Angular 12服务完整教程与实例

迪鲁宾
768 阅读5分钟

本教程通过实例讲述了关于Angular服务的完整细节。

在Angular应用程序中，组件从API中获取数据，这些数据进入mysql数据库并显示在浏览器API上。因此，我们必须写一段代码，在组件中消费API代码。假设多个组件使用相同的API，这意味着我们必须在所有组件中编写相同的API消费代码。

假设，如果API消耗逻辑有任何变化，我们必须在多个地方进行修改。

为了解决这个问题，Angular引入了使用依赖性注入的服务。

什么是Angular服务？

Angular中的服务是一个带有属性和可重用功能的普通类。这些功能被Angular组件、指令和其他服务所调用。

Angular服务的优点

  • 它充当了组件视图和模型之间的委托层
  • 分离数据访问逻辑，促进代码的模块化和可重复使用
  • 在多个组件之间轻松地共享数据

如何创建Angular服务？

如果你已经有一个Angular应用程序。

你可以使用以下ng cli命令来创建

ng generate service servicename
or 
ng g s servicename

下面是上述命令的输出


B:\blog\angular-app-testing>ng g s employee
CREATE src/app/employee.service.spec.ts (367 bytes)
CREATE src/app/employee.service.ts (137 bytes)

给出employee作为一个服务名称，它创建了两个文件

  • 服务类：employee.service.ts
  • 服务规范类：employee.service.spec.ts

下面是创建的employee.service.ts类

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  constructor() { }
}

@Injectable 是一个Angular装饰器，可以在其他组件中作为依赖使用。

providedIn providedIn: 'root' 使得这个服务在应用程序根部可用。这将是你在创建时的默认值-ng generate service command

它在运行时创建为一个单子和共享类。

该服务可以作为全局和本地组件的作用域使用。

Angular服务作用域

Angular的服务可以在全局（应用模块）或组件中声明。

全局模块服务

在这里，服务类被声明在应用模块-app.module.ts中。

服务是如何在全局范围内创建的？

  • 当第一个组件或指令用户实例被创建和加载时，服务实例会被首次创建。
  • 单个服务在一个模块中的所有组件实例中共享。
  • 一旦应用模块被销毁或页面被卸载，服务类就被销毁。

以下是配置全局服务的步骤

  • 在应用模块文件--app.module.ts中导入服务。
  • 在NgModule的提供者部分更新服务类

这将被注册为全局服务，并在@ngModule 的所有组件中可用。

import { NgModule } from '@angular/core';

import { EmployeeService } from './employee.service';

@NgModule({
  declarations: [

  ],
  imports: [

  ],
  providers: [EmployeeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

本地服务

本地服务可以被配置在组件、指令和管道中。

以下是本地服务的生命周期

  • 一旦angular组件（指令、管道）实例被创建并加载，就会创建新的服务实例。
  • 每当组件实例被创建时，新的服务实例就会被创建。
  • 每当组件卸载或销毁时，服务就被销毁。

在这个例子中，服务被注入到组件本身，这意味着服务实例是在组件创建时创建的。

单个组件有一个服务实例的副本。

  • 将服务类导入到组件中
  • 在@component元数据的提供者属性中配置服务。
import { Component } from '@angular/core';
import { EmployeeService } from './employee.service';
import { StaticClass } from './StaticClass';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers:[EmployeeService]
})
export class AppComponent {
  title = '';

  constructor() { }


}

Angular服务方法

它包含了所有组件中可重复使用的代码的方法。

在实时应用程序中，Angular服务被用于API操作，如创建、读取、更新、删除操作。

让我们看看消费API的CRUD操作吧 Angular提供了HttpClient 服务来消费外部API。

为了使用HttpClient，我们必须首先在Angular应用模块中导入HttpClientModule 。

import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [

  ],
  imports: [

    HttpClientModule
  ],
  providers: [],
  bootstrap: []
})
export class AppModule { }

现在你可以在你的服务中使用HttpClient 服务。

在你的服务的构造函数中注入HttpClient ，如下图所示

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  constructor(private httpClient: HttpClient) { }
}

让我们为Angular服务添加方法

API网址被声明为一个私有变量，并添加方法

下面是一个Angular Service example

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from "rxjs/operators";
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  private employee_api_url: string = 'api.localhost.com';

  constructor(private httpClient: HttpClient) { }

  createEmployee(employee: any): Observable {
    return this.httpClient.post(this.employee_api_url + '/create', employee)
      .pipe(map((resp: any) => resp.json()),
        catchError(error => this.throwError(error))
      )

  }
  getEmployees(): Observable {
    return this.httpClient.get(this.employee_api_url + '/read')
      .pipe(map((resp: any) => resp.json()),
        catchError(error => this.throwError(error))
      )

  }
  updateEmployee(employee: any): Observable {
    return this.httpClient.get(this.employee_api_url + '/update')
      .pipe(map((resp: any) => resp.json()),
        catchError(error => this.throwError(error))
      )

  }
  deleteEmployee(id: number): Observable {
    return this.httpClient.delete(this.employee_api_url + '/delete/{id}')
      .pipe(map((resp: any) => resp.json()),
        catchError(error => this.throwError(error))
      )

  }
  throwError(error: any) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
  }

}

在Angular组件中使用服务

让我们看看如何在一个组件中访问Angular服务

  • Import 在Angular组件中使用服务
  • 在@Component 元数据的提供者中配置EmployeeService
  • 在组件的constructor 中注入EmployeeService 。

下面是一个例子

import { Component } from '@angular/core';
import { EmployeeService } from './employee.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [EmployeeService]
})
export class AppComponent {
  title = '';
  emps: [] = [];
  constructor(private employeeService: EmployeeService) { }

  ngOnInit() {
    this.employeeService.getEmployees().subscribe((data) => {
      this.emps = data;
    }, (error) => {
      console.log("An error accessing Employee Service");
    })



  }
}

服务和组件的区别是什么

组件和服务是Angular框架的基本构建模块。

让我们看看它们之间的一些区别

组件服务
组件是在浏览器上显示的用户界面服务包含用于数据处理逻辑的通用功能
可以用@component装饰器来创建可以用@Injectable装饰器创建
组件可以是独立的，也可以使用其他组件服务被所有组件使用，可以使用其他服务
它包含了可重复使用的ui html功能
它包含HTML、CSS、数据绑定逻辑包含数据处理和访问逻辑
组件不是单子，可以有多个实例整个应用的单子实例

总结

在这篇文章中，你学到了关于Angular服务的完整教程，并举例说明了

  • 什么是Angular服务
  • 如何创建Angular服务
  • 如何在Angular组件中访问服务
  • Angular全局和局部范围
  • 服务和组件之间的区别
  • Angular服务的优势
avatar
文章
阅读
粉丝