Membina apl Sudut pertama anda: menyimpan dan mengakses data

Dalam tutorial pertama siri ini, kami belajar cara mula mencipta aplikasi Angular. Selepas berjaya melengkapkan tutorial ini, anda kini seharusnya mempunyai aplikasi Sudut berfungsi pertama anda bertajuk "Fakta Menarik Tentang Negara". Sebelum mencipta sebarang komponen yang boleh dipaparkan pada skrin, kami akan mencipta beberapa kelas dan menentukan beberapa fungsi yang menjadikan komponen ini berguna.

Dalam tutorial ini, tumpuan kami adalah untuk mencipta kelas Negara yang akan mengandungi sifat berbeza yang nilainya ingin kami paparkan kepada pengguna. Kami kemudiannya akan mencipta fail lain yang dipanggil country-data.ts. Fail ini akan mengandungi maklumat tentang semua negara dalam aplikasi kami. Fail ketiga kami akan dinamakan country.service.ts. Nama itu mungkin kedengaran mewah, tetapi fail itu hanya akan mengandungi kelas CountryService, yang mempunyai fungsi untuk mendapatkan semula dan mengisih fail country-data. ts menyediakan maklumat yang diperlukan untuk semua fungsi. <code class="inline">Country 类，该类将包含我们想要向用户显示其值的不同属性。然后，我们将创建另一个名为 country-data.ts 的文件。该文件将包含有关我们应用程序中所有国家/地区的信息。我们的第三个文件将被命名为 country.service.ts。这个名称可能听起来很花哨，但该文件将只包含 CountryService 类，该类具有检索和排序文件 country-data.ts 提供的信息所需的所有功能。

创建国家/地区类别

在 Angular 应用程序的 src/app 文件夹中，创建一个名为 country.ts 的文件。在其中添加以下代码。

export class Country {
    name: string;
    capital: string;
    area: number;
    population: number;
    currency: string;
    gdp: number;
}

上面的 TypeScript 代码定义了 Country 类，该类具有六个不同的属性来存储有关不同国家/地区的信息。国家名称、首都和货币存储为字符串。然而，其面积、人口和 GDP 都以数字形式存储。我们将在很多地方导入 Country 类，因此我在类定义之前添加了 export 关键字。

创建国家数组

下一步包括创建 country-data.ts 文件，以将所有国家/地区的信息存储为 Country 对象的数组。我们将在此文件中导入 Country 类，然后导出名为 COUNTRIES 的 const ，它存储国家/地区对象数组。

这是 country-data.ts 的代码。就像 country.ts 一样，您必须在 src/app 文件夹中创建此文件。

import { Country } from './country';

export const COUNTRIES: Country[] = [
  {
    name: 'Russia',
    capital: 'Moscow',
    area: 17098246,
    population: 144463451,
    currency: 'Russian Ruble',
    gdp: 1283162
  },
  {
    name: 'Canada',
    capital: 'Ottawa',
    area: 9984670,
    population: 35151728,
    currency: 'Canadian Dollar',
    gdp: 159760
  },
  {
    name: 'China',
    capital: 'Beijing',
    area: 9596961,
    population: 1403500365,
    currency: 'Renminbi (Yuan)',
    gdp: 11199145
  },
  {
    name: 'United States',
    capital: 'Washington, D.C.',
    area: 9525067,
    population: 325365189,
    currency: 'United States Dollar',
    gdp: 18569100
  },
  {
    name: 'Japan',
    capital: 'Tokyo',
    area: 377972,
    population: 12676200,
    currency: 'Yen',
    gdp: 4939384
  }
];

此文件中的第一行从位于同一目录的 country.ts 文件导入 Country 类。如果您从文件中删除这一行，TypeScript 将给出以下错误：

Cannot find name 'Country'.

如果没有 import 语句，TypeScript 将不知道 Country 类型的数组的含义。因此，请确保您已导入正确的类并正确指定 country.ts 的位置。

导入 Country 类后，我们继续创建 Country 对象的数组。我们将导入这个国家/地区数组以便在其他文件中使用，因此我们也向该数组添加 export 关键字。目前，数组中有五个不同的 Country 对象。这五个对象中的每一个都提供键值对，列出特定对象或国家/地区的属性名称及其值。

如果您尝试向尚未在 Country 类定义中声明的数组添加其他属性，您将收到以下错误：

Object literal may only specify known properties, and 'president' does not exist in type 'Country'

在本例中，我试图将总统的姓名存储为 string ，并将其存储在名为 president 的属性中。由于没有声明这样的属性，我们收到了错误。有时，您可能只想为特定对象指定属性，而不为其他对象指定属性。在这种情况下，您可以在类定义中将属性标记为可选。我在涵盖 TypeScript 接口的教程中更详细地讨论了它。

现在，只需确保所有属性的名称与类定义中的名称匹配即可。还要确保每个属性的值具有与类定义中声明的类型相同的类型。

创建 CountryService 类

创建 Country 类和 COUNTRIES 数组后，我们现在终于可以编写一些函数来处理国家/地区数据了。我们需要在服务文件中导入 Country 类和 COUNTRIES 数组。该文件需要导入 COUNTRIES 数组才能访问数据。同样，该文件必须导入 Country 类，以便理解 COUNTRIES

Buat kategori negara

Dalam folder src/app aplikasi Angular, buat fail bernama country.ts. Tambahkan kod berikut di dalamnya. #🎜🎜#

import { Injectable } from '@angular/core';

import { Country } from './country';
import { COUNTRIES } from './country-data';

@Injectable()
export class CountryService {

  constructor() { }

  getCountries(): Country[] {
    return COUNTRIES;
  }

  getPopulatedCountries(): Country[] {
    return COUNTRIES.sort((a, b) => b.population - a.population).slice(0, 3);
  }

  getLargestCountries(): Country[] {
    return COUNTRIES.sort((a, b) => b.area - a.area).slice(0, 3);
  }

  getGDPCountries(): Country[] {
    return COUNTRIES.sort((a, b) => b.gdp - a.gdp).slice(0, 3);
  }

  getCountry(name: string): Country {
    return COUNTRIES.find(country => country.name === name);
  }
}

#🎜🎜#Kod TypeScript di atas mentakrifkan kelas Country, yang mempunyai enam sifat berbeza untuk menyimpan maklumat tentang negara yang berbeza. Nama negara, modal dan mata wang disimpan sebagai rentetan. Walau bagaimanapun, kawasan, populasi dan KDNKnya disimpan dalam bentuk berangka. Kami akan mengimport kelas Negara di banyak tempat, jadi saya menambah kata kunci eksport sebelum definisi kelas. #🎜🎜#

Buat tatasusunan negara

#🎜🎜#Langkah seterusnya melibatkan mencipta fail country-data.ts untuk menyimpan semua maklumat negara sebagai Negara Tatasusunan objek . Kami akan mengimport kelas Country dalam fail ini dan kemudian mengeksport constCOUNTRIES / code> , yang menyimpan pelbagai objek negara. #🎜🎜# #🎜🎜#Ini ialah kod untuk country-data.ts. Sama seperti country.ts, anda mesti mencipta fail ini dalam folder src/app. #🎜🎜#

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

#🎜🎜#Baris pertama dalam fail ini mengimport kelas Country daripada fail country.ts yang terletak dalam direktori yang sama. Jika anda mengalih keluar baris ini daripada fail, TypeScript akan memberikan ralat berikut: #🎜🎜#

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CountryService } from './country.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CountryService],
  bootstrap: [AppComponent]
})
export class AppModule { }

#🎜🎜#Tanpa pernyataan import, TypeScript tidak akan mengetahui maksud tatasusunan jenis Negara. Jadi sila pastikan anda telah mengimport kelas yang betul dan menyatakan lokasi country.ts dengan betul. #🎜🎜# #🎜🎜#Selepas mengimport kelas Country, kami terus membuat tatasusunan objek Country. Kami akan mengimport tatasusunan negara ini untuk digunakan dalam fail lain, jadi kami juga menambah kata kunci eksport pada tatasusunan. Pada masa ini, terdapat lima objek Negara yang berbeza dalam tatasusunan. Setiap daripada lima objek ini menyediakan pasangan nilai kunci yang menyenaraikan nama atribut dan nilainya untuk objek atau negara tertentu. #🎜🎜# #🎜🎜# Jika anda cuba menambah sifat tambahan pada tatasusunan yang belum diisytiharkan dalam definisi kelas Negara, anda akan menerima ralat berikut: #🎜🎜# rrreee #🎜🎜#Dalam contoh ini, saya cuba menyimpan nama presiden sebagai string dan menyimpannya dalam rentetan bernama president dalam hartanah. Oleh kerana tiada harta sedemikian diisytiharkan, kami menerima ralat itu. Kadangkala, anda mungkin mahu menentukan sifat hanya untuk objek tertentu dan bukan untuk objek lain. Dalam kes ini, anda boleh menandakan harta sebagai pilihan dalam definisi kelas. Saya membincangkannya dengan lebih terperinci dalam tutorial saya yang meliputi antara muka TypeScript. #🎜🎜# #🎜🎜#Sekarang, cuma pastikan bahawa nama semua sifat sepadan dengan nama dalam definisi kelas. Juga pastikan bahawa nilai setiap harta mempunyai jenis yang sama seperti yang diisytiharkan dalam definisi kelas. #🎜🎜#

Buat kelas CountryService

#🎜🎜#Selepas mencipta kelas Country dan tatasusunan COUNTRIES, akhirnya kami boleh menulis beberapa fungsi untuk mengendalikan data negara . Kita perlu mengimport kelas Country dan tatasusunan COUNTRIES dalam fail perkhidmatan. Fail ini perlu mengimport tatasusunan COUNTRIES untuk mengakses data. Begitu juga, fail mesti mengimport kelas Country untuk memahami data dalam tatasusunan COUNTRIES. #🎜🎜#

我们还将从 Angular 核心导入其他依赖项，例如 Injectable ，以使我们的 CountryService 类可用于注入器注入其他组件。

一旦您的应用程序规模增大，不同的模块将需要相互通信。假设 ModuleA 需要 ModuleB 才能正常工作。在这种情况下，我们将 ModuleB 称为 ModuleA 的依赖项。

大多数情况下，只需将我们需要的模块导入到另一个文件中即可。然而，有时我们需要决定是否应该从 ModuleB 创建一个由整个应用程序使用的类实例，或者是否应该在每次使用模块时创建一个新实例。在我们的例子中，我们将在整个应用程序中注入 CountryService 类的单个实例。

这是 country.service.ts 的代码：

import { Injectable } from '@angular/core';

import { Country } from './country';
import { COUNTRIES } from './country-data';

@Injectable()
export class CountryService {

  constructor() { }

  getCountries(): Country[] {
    return COUNTRIES;
  }

  getPopulatedCountries(): Country[] {
    return COUNTRIES.sort((a, b) => b.population - a.population).slice(0, 3);
  }

  getLargestCountries(): Country[] {
    return COUNTRIES.sort((a, b) => b.area - a.area).slice(0, 3);
  }

  getGDPCountries(): Country[] {
    return COUNTRIES.sort((a, b) => b.gdp - a.gdp).slice(0, 3);
  }

  getCountry(name: string): Country {
    return COUNTRIES.find(country => country.name === name);
  }
}

@injectable 装饰器用于标识可能需要注入依赖项的服务类。然而，将 @injectable 添加到服务类是必需的编码风格，所以我们无论如何都会这样做。

之后，我们为该类编写不同的方法，这些方法采用 COUNTRIES 数组，直接返回它或使用特定条件对其进行排序，然后返回数组的一部分。

getCountries() 方法预计会返回所有 Country 对象，因此它会返回整个 COUNTRIES 数组，而不进行任何操作对其进行修改。

getPopulatedCountries() 采用 COUNTRIES 数组，并根据不同国家/地区的人口按降序对其进行排序。然后，我们使用 Array.slice() 方法从数组中返回前三个国家（索引为 0、1 和 2）。 getLargestCountries() 和 getGDPCountries() 方法的工作方式类似。

getCountry() 方法采用名称作为参数，并返回 name 属性与提供的 name 参数具有相同值的国家/地区对象。

在 app.module.ts 中包含 CountryService

您创建的服务只是 Angular 中的一个类，直到您使用 Angular 依赖注入器注册它为止。 Angular 注入器将负责创建服务实例并将它们注入到需要该服务的不同类中。我们需要先向提供者注册一个服务，然后注入器才能创建该服务。

注册任何服务有两种常见方法：使用 @Component 提供商或使用 @NgModule 提供商。当您想要限制对特定组件及其所有嵌套组件的服务访问时，使用 @Component 提供程序是有意义的。当您希望多个组件能够访问该服务时，使用 @NgModule 提供程序是有意义的。

在我们的例子中，我们将使用 CountryService 与我们应用程序的多个组件。这意味着我们应该向 @NgModule 提供程序注册一次，而不是向每个组件的 @Component 提供程序单独注册。

目前，您的 app.module.ts 文件应如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

将导入语句添加到 app.module.ts 文件，并将服务添加到 @NgModule 提供程序数组。进行这些更改后，您的 app.module.ts 文件应如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CountryService } from './country.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CountryService],
  bootstrap: [AppComponent]
})
export class AppModule { }

CountryService 类现在可供我们为应用程序创建的所有组件使用。

最终想法

成功创建三个文件，分别名为 country.ts、country-data.ts 和 country.service.ts 的第二个教程结束这个系列。

country.ts 文件用于创建一个 Country 类，该类具有不同的属性，如名称、货币、人口、面积等。 country-data.ts 文件用于存储国家对象数组，其中包含不同国家的信息。 country.service.ts 文件包含一个服务类，该服务类具有不同的方法来访问 COUNTRIES 数组中的国家/地区数据。将所有这些方法单独编写在服务类中，使我们能够从一个中心位置在不同的应用程序组件中访问它们。

在上一节中，我们向 @NgModule 提供程序注册了我们的服务，以使其可在不同组件内使用。

Tutorial seterusnya akan menunjukkan kepada anda cara membuat tiga komponen berbeza dalam apl anda untuk memaparkan butiran negara dan senarai negara.

Atas ialah kandungan terperinci Membina apl Sudut pertama anda: menyimpan dan mengakses data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!