建立你的第一個Angular應用程式：儲存和存取數據-js教程-PHP中文網

建立你的第一個Angular應用程式：儲存和存取數據

在本系列的第一個教學中，我們學習如何開始建立 Angular 應用程式。成功完成該教程後，您現在應該擁有第一個正常運行的 Angular 應用程序，其標題為“關於國家/地區的有趣事實”。在創建任何可以在螢幕上呈現的元件之前，我們將建立一些類別並定義一些使這些元件有用的函數。

在本教程中，我們的重點將是建立一個 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 陣列內的資料。

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

下一個教學將向您展示如何在應用程式中建立三個不同的元件來顯示國家/地區詳細資訊和國家/地區清單。

以上是建立你的第一個Angular應用程式：儲存和存取數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！