Erstellen Sie Ihre erste Angular-App: Speichern und Zugreifen auf Daten

Im ersten Tutorial dieser Serie haben wir gelernt, wie man mit der Erstellung einer Angular-Anwendung beginnt. Nachdem Sie dieses Tutorial erfolgreich abgeschlossen haben, sollten Sie nun über Ihre erste funktionierende Angular-Anwendung mit dem Titel „Interesting Facts About Countries“ verfügen. Bevor wir Komponenten erstellen, die auf dem Bildschirm gerendert werden können, erstellen wir einige Klassen und definieren einige Funktionen, die diese Komponenten nützlich machen.

In diesem Tutorial liegt unser Fokus auf der Erstellung eines Country 类，该类将包含我们想要向用户显示其值的不同属性。然后，我们将创建另一个名为 country-data.ts 的文件。该文件将包含有关我们应用程序中所有国家/地区的信息。我们的第三个文件将被命名为 country.service.ts。这个名称可能听起来很花哨，但该文件将只包含 CountryService 类，该类具有检索和排序文件 country-data.ts mit allen Funktionen, die zur Bereitstellung von Informationen erforderlich sind.

Länderkategorien erstellen

Die src/app 文件夹中，创建一个名为 country.ts Dateien in der Angular-Anwendung. Fügen Sie den folgenden Code hinzu.

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

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

Länderarray erstellen

Der nächste Schritt besteht darin, country-data.ts 文件，以将所有国家/地区的信息存储为 Country 对象的数组。我们将在此文件中导入 Country 类，然后导出名为 COUNTRIES 的 const zu erstellen, das eine Reihe von Länderobjekten speichert.

Dies ist der country-data.ts 的代码。就像 country.ts 一样，您必须在 src/app Ordner, in dem diese Datei erstellt wird.

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
  }
];

Die erste Zeile in dieser Datei stammt aus der Klasse country.ts 文件导入 Country, die sich im selben Verzeichnis befindet. Wenn Sie diese Zeile aus der Datei entfernen, gibt TypeScript den folgenden Fehler aus:

Cannot find name 'Country'.

Ohne die Importanweisung weiß TypeScript nicht, wo Country 类型的数组的含义。因此，请确保您已导入正确的类并正确指定 country.ts ist.

Objekte importieren Country 类后，我们继续创建 Country 对象的数组。我们将导入这个国家/地区数组以便在其他文件中使用，因此我们也向该数组添加 export 关键字。目前，数组中有五个不同的 Country. Jedes dieser fünf Objekte stellt Schlüssel-Wert-Paare bereit, die die Attributnamen und ihre Werte für ein bestimmtes Objekt oder Land auflisten.

Wenn Sie versuchen, zusätzliche Eigenschaften zu einem Array hinzuzufügen, das nicht in der Klassendefinition Country deklariert wurde, erhalten Sie die folgende Fehlermeldung:

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

In diesem Beispiel versuche ich, den Namen des Präsidenten in einem Attribut als string ，并将其存储在名为 president zu speichern. Da keine solche Eigenschaft deklariert wurde, erhielten wir die Fehlermeldung. Manchmal möchten Sie möglicherweise Eigenschaften nur für ein bestimmtes Objekt und nicht für andere Objekte angeben. In diesem Fall können Sie die Eigenschaft in der Klassendefinition als optional markieren. Ich bespreche es ausführlicher in meinem Tutorial zu TypeScript-Schnittstellen.

Stellen Sie nun sicher, dass die Namen aller Eigenschaften mit den Namen in der Klassendefinition übereinstimmen. Stellen Sie außerdem sicher, dass der Wert jedes Attributs denselben Typ hat wie in der Klassendefinition deklariert.

CountryService-Klasse erstellen

Nachdem wir die Country 类和 COUNTRIES 数组后，我们现在终于可以编写一些函数来处理国家/地区数据了。我们需要在服务文件中导入 Country 类和 COUNTRIES 数组。该文件需要导入 COUNTRIES 数组才能访问数据。同样，该文件必须导入 Country 类，以便理解 COUNTRIES-Klasse und das Array COUNTRIES erstellt haben, können wir nun endlich einige Funktionen schreiben, um die Länderdaten zu verarbeiten. Wir müssen die Klasse

und das Array COUNTRIES in die Servicedatei importieren. Diese Datei muss das Array COUNTRIES importieren, um auf die Daten zugreifen zu können. Auch hier muss die Datei die Klasse 🎜 importieren, um die Daten im Array COUNTRIES zu verstehen. 🎜

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

Das nächste Tutorial zeigt Ihnen, wie Sie drei verschiedene Komponenten in Ihrer App erstellen, um Länderdetails und eine Länderliste anzuzeigen.

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihre erste Angular-App: Speichern und Zugreifen auf Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!