Angular Serving: 初心者向けの包括的なガイド

＃＃＃こんにちは！ Angular コンポーネントとルーティングに関するチュートリアルを読んでいただければ幸いです。この記事では、Angular のもう 1 つの興味深い概念であるサービスについて引き続き説明します。

Angular コンポーネントがアプリケーションのプレゼンテーション層である場合、実際に実際のデータを取得してビジネス ロジックを実行するのは何でしょうか?ここでAngularサービスが登場します。 Angular サービスの役割は、データ、モデル、ビジネス ロジックをコンポーネント間で取得、整理し、最終的に共有することです。

Angular サービスの技術的な詳細に入る前に、まずその機能を理解しましょう。これは、コードのどの部分をコンポーネント内に配置する必要があるか、またどの部分を Angular サービス内に配置する必要があるかを理解するのに役立ちます。

サービスに関する重要な事実をいくつか示します:

サービスは、

@Injectable

デコレータを使用して定義されます。これにより、サービスをコンポーネントまたは他のサービスに注入できることが Angular に伝えられます。サービスの注入については後で詳しく説明します。 サービスは、すべてのビジネス ロジックが保持され、コンポーネント間で共有される場所です。これにより、アプリケーションのスケーラビリティと保守性が向上します。通常、サービスはバックエンドと対話するための正しい場所でもあります。たとえば、AJAX 呼び出しを行う必要がある場合、サービス内に呼び出しを完了するメソッドを作成できます。

Service はシングルトン クラスです。 Angular アプリケーションでは、特定のサービスの単一インスタンスのみが実行されます。

サービスとは何ですか?

Angular のサービスは、アプリケーションのライフサイクル中に 1 回だけインスタンス化されるオブジェクトです。サービスによって受信および維持されるデータは、アプリケーション全体で使用できます。これは、コンポーネントがいつでもサービスからデータを取得できることを意味します。

依存性注入

は、コンポーネント内にサービスを導入するために使用されます。 サービスを作成して Angular コンポーネントで使用する方法を理解してみましょう。プロジェクトの完全なソース コードは、GitHub リポジトリで見つけることができます。

ソース コードを取得したら、プロジェクト ディレクトリに移動し、

npm install

を使用して必要な依存関係をインストールします。依存関係をインストールした後、次のように入力してアプリケーションを起動します: リーリー アプリケーションは

https://localhost:4200/.

で実行されている必要があります。 プロジェクトの全体的なフォルダー構造は次のとおりです。

リーリー

1.

サービスのスケルトンの構築 Angular でサービスを作成するには 2 つの方法があります:

プロジェクト内にフォルダーとファイルを手動で作成します。

1. ng g service
2. コマンドを使用して、サービスを自動的に作成します。この方法を使用すると、選択したディレクトリに <path>.service.ts</path> および .service.spec.ts ファイルが自動的に取得されます。 リーリー

2.

サービスの作成 プロジェクト構造内に

.service.ts

ファイルが作成されたので、サービスのコンテンツを入力します。これを行うには、サービスが何を行う必要があるかを決定する必要があります。複数のサービスを使用して、それぞれが特定のビジネス操作を実行できることに注意してください。この例では、employee.service.ts を使用して、それを使用するコンポーネントにロールの静的なリストを返します。 次のコードを

employee.service.ts

に入力します。 リーリー このサービスは、ロールの静的なリストをアプリケーションに返すだけです。サービスを 1 行ずつデコードしてみましょう。

Injectable
1. を @angular/core ライブラリからインポートします。サービスはコンポーネントに消費または注入されるため、これは非常に重要です。 @Injectable 命令により、サービスを識別できます。 次に、
@Injectable
2. デコレータを適用します。 @Injectable の providedIn プロパティは、インジェクターが使用できる場所を指定します。ほとんどの場合、root が値として指定されます。これは、サービスをアプリケーション レベルで注入できることを意味します。他のオプションは、any、platform、null、または Type です。 <any> </any>
EmployeeService
3. という名前のクラス コンポーネントを作成します。このクラスにはメソッド getRole があり、オブジェクトの静的配列を返します。

3.

コンポーネントの作成 前述したように、Angular のサービスはアプリケーションのビジネス ロジックを保持するために使用されます。ビューアにデータを表示するには、プレゼンテーション層が必要です。ここで、デコレータ

@Component

を使用して作成される、従来のクラスベースの Angular コンポーネントが登場します。 Angular コンポーネントについて詳しくは、このシリーズの前の記事をご覧ください。 Angular コンポーネントを理解し、独自のコンポーネントを作成するのに役立ちます。ファイル

employee.component.ts

を作成し、次のコードをそれに追加します: リーリー 細かく見てみましょう:

1. 导入 @Component 装饰器并调用它。我们指定 'employee' 作为选择器，并提供一个指向描述组件视图的 HTML 的模板 URL。
2. 声明组件类并指定它实现 OnInit。因此，我们可以定义一个 ngOnInit 事件处理程序，该处理程序将在创建组件时调用。
3. 为了使用我们的服务，必须在构造函数内声明它。在我们的例子中，您将在构造函数中看到 private employeeService: EmployeeService 。通过此步骤，我们将使该服务可以跨组件访问。
4. 由于我们的目标是在创建员工组件时加载角色，因此我们在 ngOnInit 中获取数据。

这可以变得更简单吗？由于该服务是一个单例类，因此可以在多个组件之间重用，而不会造成任何性能损失。

4.创建视图

现在我们的组件中有数据了，让我们构建一个简单的 employee.component.html 文件来迭代角色并显示它们。下面，我们使用 *ngFor 来迭代角色，并仅向用户显示类型。

<h3>Data from employee.service</h3>
<ul>
    <li *ngFor = "let role of roles">{{role.type}}</li>
</ul>

5.运行项目

在项目启动并运行之前我们只剩下一步了。我们需要确保 employee.component.ts 文件包含在 @NgModule 指令内的声明列表中。

如下所示，EmployeeComponent 已添加到 app.module.ts 文件中。

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeComponent } from './components/employee.component';

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

有趣的是，我们尚未将该服务添加到我们的提供商列表中，但我们能够成功使用该服务。为什么？因为我们已经指定在应用程序的根级别提供服务（即使用 providedIn: 'root' 参数）。但是，请继续阅读以了解有关我们确实需要在 @NgModule 的 providers 数组中提及服务的场景的更多信息。

此外，我们还需要将 employee 元素添加到 app.component.html 文件中。

<h1>
  Tutorial: Angular Services
</h1>
<employee></employee>

<router-outlet></router-outlet>

如果我们到目前为止运行我们的应用程序，它将如下所示：

6.从服务动态获取数据

现在，我们将获取特定于 employee.component.ts 的数据。

让我们创建一个新服务来从 API 获取数据。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class EmployeDetailsService {
    fetchEmployeeDetailsURL = 'https://reqres.in/api/users?page=2'
    constructor(private http: HttpClient) { }
    fetchEmployeeDetails = () => {
        return this.http.get(this.fetchEmployeeDetailsURL);
    }
}

现在，让我们逐行理解我们的代码。

1. 由于我们要通过 AJAX 调用获取数据，因此导入 HttpClient 非常重要。如果您是 HttpClient 的新手，您可以在本系列的另一篇文章中了解更多信息。
2. 在我们的 EmployeeDetailsS​​ervice 中，我们没有指定 provideIn 参数。这意味着我们需要执行额外的步骤来让整个应用程序了解我们的可注入服务。您将在下一步中了解这一点。
3. HttpClient 本身就是一个可注入服务。在构造函数中声明它，以便将其注入到组件中。在 fetchEmployeeDetails 方法中，我们将使用 HttpClient.get 方法从 URL 获取数据。

7. 在 app.module 中注册服务

与我们的第一个服务不同，我们在 app.module.ts 中注册 EmployeeDetailsS​​ervice 至关重要，因为我们尚未在根级别声明可注入。这是更新后的 app.module.ts 文件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeComponent } from './components/employee.component';
import { EmployeDetailsService } from './services/employeeDetails.service';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    EmployeDetailsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果您密切关注，您可能会注意到两个重要的变化：

1. 在我们的 app.module.ts 文件中，我们需要将 EmployeDetailsS​​ervice 包含在 Providers 列表中。
2. 我们需要从 @angular/common/http 导入 HttpClientModule。 HttpClientModule 必须包含在我们的 imports 列表中。

就是这样 - 我们现在准备在组件中使用 EmployeeDetailsS​​ervice 。

8.获取动态数据

为了适应新服务，我们将对组件进行一些更改。

添加一个按钮来加载数据

首先，我们将在视图中添加一个按钮。当我们单击此按钮时，将通过 AJAX 调用加载数据。这是更新后的employee.component.html文件：

<h3>Data from employee.service</h3>
<ul>
    <li *ngFor = "let role of roles">{{role.type}}</li>
</ul>
Load Employee Details

    
{{employee.email}}

订阅Getter函数

接下来订阅EmployeDetailsS​​ervice中的getter函数。为此，我们将 EmployeDetailsS​​ervice 添加到 employee.component.ts 中的构造函数中：

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../services/employee.service';
import { EmployeDetailsService } from '../services/employeeDetails.service';

@Component({
  selector: 'employee',
  templateUrl: './employee.component.html'
})

export class EmployeeComponent implements OnInit {

    roles: any;
    employeeDetails: any;
    constructor(private employeeService: EmployeeService,
        private employeeDetailsService: EmployeDetailsService) {		
	}
    ngOnInit(): void {
        this.roles = this.employeeService.getRole()
    }

    loadEmployeeDetails = () => {
        this.employeeDetailsService.fetchEmployeeDetails()
                                    .subscribe((response:any)=>{
                                        this.employeeDetails = response.data;
                                    })
    }
 
}

完成此更改后，单击 LoadEmployeeDetails 按钮，我们将看到以下视图。

结论

给你！我们已经逐步构建了一个可以处理静态和动态数据的 Angular 服务。现在，您应该能够构建自己的 Angular 服务并使用它们通过 AJAX 调用获取数据。您甚至可以以更可重用的方式实现业务逻辑。

以上がAngular Serving: 初心者向けの包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。