欢迎！希望你已经阅读了有关Angular中的角组件和布线的教程。在这篇文章中，我们将探讨另一个关键概念：服务。当组件负责展示应用程序的界面时，服务则承担起获取实际数据和执行业务逻辑的任务。Angular服务旨在跨组件管理、组织和共享数据、模型和复杂的业务逻辑，从而提高应用的可扩展性和可维护性。
首先，服务是通过@ Injectable装饰器定义的，这表明服务可以被注入到组件或其他服务中。稍后我们将深入讲解这个过程。服务是存储业务逻辑的地方，并且可以在多个组件之间共享，使得与后端交互（如执行AJAX调用）更加方便。此外，服务是一个单例类，意味着在整个应用程序的生命周期中，只会实例化一次，且其维护的数据可供全局访问。依赖注入机制使得在组件中引入和使用服务变得简单。
为了实践创建和使用服务，你可以从我们的GitHub仓库获取项目源码，然后在项目目录中运行`npm install`安装依赖，接着使用`ng serve`启动应用，它将在https://localhost:4200/上运行。项目文件结构如下：
“`
src
-app
–components
—employee.component.CSS
—employee.component.htML
—employee.component.ts
–services
—employee.service.spec.ts
—employee-detAIls.service.ts
–app.routing.module.ts
–app.component.css
–app.component.html
–app.component.ts
–app.module.ts
–assets
-index.html
-tsconfig.json
“`
创建服务有两种方式：手动创建文件或使用`ng g service`命令。以下是在`employee.service.ts`中创建服务的基本框架：
“`typescript
import { Injectable } from ‘@angular/core’;
@Injectable({
providedIn: ‘root’,
})
export class EmployeeService {
role = 6;
// 从服务中动态获取数据的方法
}
“`
接下来，我们创建一个`EmployeeDetailsService`服务来从API获取数据：
“`typescript
import { Injectable } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
@Injectable()
export class EmployeeDetailsService {
fetchEmployeeDetailsUrl = ‘https://reqres.in/api/users?page=2’;
constructor(private http: HttpClient) {}
fetchEmployeeDetails() {
return this.http.get(this.fetchEmployeeDetailsUrl);
}
}
“`
在这个例子中，我们导入了`HttpClient`模块以执行AJAX调用。由于我们没有在`EmployeeDetailsService`中指定`providedIn`，我们需要在`app.module.ts`中注册这个服务，以便在整个应用中使用：
“`typescript
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 { EmployeeDetailsService } from ‘./services/employee-details.service’;
@NgModule({
declarations: [AppComponent, EmployeeComponent],
imports: [BrowserModule, HttpClientModule, AppRoutingModule],
providers: [EmployeeDetailsService], // 注册服务
bootstrap: [AppComponent],
})
export class AppModule {}
“`
至此，我们已经创建了一个处理静态和动态数据的Angular服务。现在你应该掌握了如何构建自己的Angular服务并利用它们通过AJAX调用获取数据，以及实现可复用的业务逻辑。祝你编码愉快！
相关文章
