掌握 Angular 开发：从模块、组件到服务

前端

2023-09-24 04:42:17

理解 Angular：三大核心概念

理解 Angular 的奥妙始于掌握其三大核心概念：模块、组件和服务。这些概念相互作用，为应用程序提供结构、可重用性和可扩展性。

模块

模块是 Angular 应用程序的基本组织单位。它们为组件和服务提供了一个隔离的上下文，并定义了应用程序中组件、服务和其他资源之间的依赖关系。每个模块都有一个根组件，它定义了应用程序在浏览器中的外观。

组件

组件是 Angular 应用程序的构建块。它们表示应用程序中特定功能的可重用部分，例如导航栏、表单或图表。每个组件都有一个 HTML 模板，定义其视图，以及一个 TypeScript 类，处理其逻辑。组件可以通过依赖注入机制相互通信。

服务

服务提供跨组件共享的通用功能，例如数据获取、身份验证或日志记录。服务是无状态的，这意味着它们不包含任何组件状态。相反，它们为组件提供数据和功能，同时保持自己的职责分离。

相互作用

这三大概念协同工作，形成强大的 Angular 应用程序基础：

模块提供依赖注入和编译上下文，使组件和服务能够相互通信。
组件通过双向数据绑定与视图交互，从而实现响应式 UI。
服务为应用程序提供共享功能，促进代码重用和可维护性。

示例

以下示例展示了这三个概念如何协同工作：

// my-app.module.ts
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DataService } from './data.service';

@NgModule({
  declarations: [AppComponent],
  providers: [DataService],
  bootstrap: [AppComponent],
})
export class AppModule {}

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: '<div>{{ data }}</div>',
})
export class AppComponent implements OnInit {
  data: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

// data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData() {
    return 'Hello, Angular!';
  }
}