最初の Angular アプリの構築: データの保存とアクセス

このシリーズの最初のチュートリアルでは、Angular アプリケーションの作成を開始する方法を学びました。このチュートリアルを正常に完了すると、「Interesting Facts About Countries」というタイトルの最初に動作する Angular アプリケーションが完成するはずです。画面上にレンダリングできるコンポーネントを作成する前に、いくつかのクラスを作成し、これらのコンポーネントを便利にするいくつかの関数を定義します。

このチュートリアルでは、ユーザーに値を表示するさまざまなプロパティを含む Country クラスを作成することに重点を置きます。次に、country-data.ts という名前の別のファイルを作成します。このファイルには、アプリケーション内のすべての国に関する情報が含まれます。 3 番目のファイルの名前は country.service.ts です。名前は派手に聞こえるかもしれませんが、ファイルには CountryService クラスのみが含まれます。このクラスには、ファイル country-data.ts によって提供される情報の取得と並べ替えに必要なすべての機能が含まれています。

国カテゴリの作成

Angular アプリケーションの src/app フォルダーに、country.ts というファイルを作成します。その中に次のコードを追加します。

上記の TypeScript コードは、 Country クラスを定義します。このクラスには、さまざまな国に関する情報を格納するための 6 つの異なるプロパティがあります。国名、首都、通貨は文字列として保存されます。ただし、その面積、人口、GDP は数値形式で保存されます。 Country クラスをさまざまな場所にインポートするため、クラス定義の前に export キーワードを追加しました。

国配列の作成

次のステップでは、country-data.ts ファイルを作成して、すべての国の情報を Country オブジェクトの配列として保存します。このファイルの Country クラスをインポートし、国オブジェクトの配列を格納する COUNTRIES という名前の const をエクスポートします。

これは country-data.ts のコードです。 country.ts と同様に、このファイルは src/app フォルダーに作成する必要があります。

このファイルの最初の行は、同じディレクトリにある country.ts ファイルから country クラスをインポートします。ファイルからこの行を削除すると、TypeScript によって次のエラーが発生します:

import ステートメントがないと、TypeScript は Country 型の配列の意味を認識できません。そのため、正しいクラスをインポートし、country.ts の場所を正しく指定していることを確認してください。

Country クラスをインポートした後、引き続き Country オブジェクトの配列を作成します。この国の配列をインポートして他のファイルで使用するため、この配列に export キーワードも追加します。現在、配列内には 5 つの異なる Country オブジェクトがあります。これら 5 つのオブジェクトはそれぞれ、特定のオブジェクトまたは国の属性名とその値をリストするキーと値のペアを提供します。

Country クラス定義で宣言されていない配列に追加のプロパティを追加しようとすると、次のエラーが発生します:

この例では、社長の名前を string として保存し、president というプロパティに保存しようとしています。そのようなプロパティが宣言されていないため、エラーが発生しました。場合によっては、特定のオブジェクトに対してのみプロパティを指定し、他のオブジェクトに対しては指定したくない場合があります。この場合、クラス定義でプロパティをオプションとしてマークできます。これについては、TypeScript インターフェイスを説明するチュートリアルで詳しく説明します。

ここで、すべてのプロパティの名前がクラス定義の名前と一致していることを確認してください。また、各プロパティの値がクラス定義で宣言されているのと同じ型であることを確認してください。

CountryService クラスの作成

Country クラスと COUTRIES 配列を作成したら、いよいよ国データを処理する関数をいくつか作成できます。 Country クラスと COUNTRIES 配列をサービス ファイルにインポートする必要があります。データにアクセスするには、このファイルで COUNTRIES 配列をインポートする必要があります。繰り返しになりますが、COUNTRIES 配列内のデータを理解するには、ファイルで Country クラスをインポートする必要があります。

我们还将从 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 提供程序注册了我们的服务，以使其可在不同组件内使用。

次のチュートリアルでは、アプリ内に 3 つの異なるコンポーネントを作成して、国の詳細と国のリストを表示する方法を示します。

以上が最初の Angular アプリの構築: データの保存とアクセスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。