첫 번째 Angular 앱 구축: 데이터 저장 및 액세스

이 시리즈의 첫 번째 튜토리얼에서 우리는 Angular 애플리케이션 생성을 시작하는 방법을 배웠습니다. 이 튜토리얼을 성공적으로 완료한 후에는 이제 "국가에 대한 흥미로운 사실"이라는 제목의 첫 번째 작동하는 Angular 애플리케이션을 갖게 될 것입니다. 화면에 렌더링할 수 있는 구성 요소를 만들기 전에 몇 가지 클래스를 만들고 이러한 구성 요소를 유용하게 만드는 몇 가지 기능을 정의하겠습니다.

이 튜토리얼에서는 정보를 제공하는 데 필요한 모든 기능을 갖춘 Country 类，该类将包含我们想要向用户显示其值的不同属性。然后，我们将创建另一个名为 country-data.ts 的文件。该文件将包含有关我们应用程序中所有国家/地区的信息。我们的第三个文件将被命名为 country.service.ts。这个名称可能听起来很花哨，但该文件将只包含 CountryService 类，该类具有检索和排序文件 country-data.ts을 만드는 데 중점을 둡니다.

국가 카테고리 만들기

Angular 애플리케이션의 src/app 文件夹中，创建一个名为 country.ts 파일. 그 안에 다음 코드를 추가하세요.

으아악

위의 TypeScript 코드는 Country 类，该类具有六个不同的属性来存储有关不同国家/地区的信息。国家名称、首都和货币存储为字符串。然而，其面积、人口和 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 关键字。目前，数组中有五个不同的 Country 개체. 이 5개 개체 각각은 특정 개체 또는 국가에 대한 속성 이름과 해당 값을 나열하는 키-값 쌍을 제공합니다.

클래스 정의에 선언되지 않은 배열에 추가 속성을 추가하려고 하면 다음 오류가 발생합니다. Country 으아악

이 예에서는 대통령의 이름을

속성에 저장하려고 합니다. 그러한 속성이 선언되지 않았기 때문에 오류가 발생했습니다. 때로는 특정 개체에 대해서만 속성을 지정하고 다른 개체에는 속성을 지정하지 않으려는 경우도 있습니다. 이 경우 클래스 정의에서 해당 속성을 선택 사항으로 표시할 수 있습니다. TypeScript 인터페이스를 다루는 튜토리얼에서 이에 대해 더 자세히 논의합니다. string ，并将其存储在名为 president

이제 모든 속성의 이름이 클래스 정의의 이름과 일치하는지 확인하세요. 또한 각 속성의 값이 클래스 정의에 선언된 것과 동일한 유형인지 확인하십시오.

CountryService 클래스 만들기

클래스와 COUNTRIES 배열을 생성한 후 이제 마침내 국가 데이터를 처리하는 몇 가지 함수를 작성할 수 있습니다. 서비스 파일에서 Country 类和 COUNTRIES 数组后，我们现在终于可以编写一些函数来处理国家/地区数据了。我们需要在服务文件中导入 Country 类和 COUNTRIES 数组。该文件需要导入 COUNTRIES 数组才能访问数据。同样，该文件必须导入 Country 类，以便理解 COUNTRIES 클래스와 COUNTRIES 배열을 가져와야 합니다. 데이터에 액세스하려면 이 파일에서 COUNTRIES 배열을 가져와야 합니다. 다시 말하지만, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!