Angular 2 架构

Angular 2 是一个基于组件和服务的现代前端框架，它提供了一个高度模块化和可扩展的架构，适用于开发复杂的单页应用（SPA）。Angular 2 的架构围绕以下几个核心概念构建：组件、模块、服务、依赖注入、模板和路由。

下面是 Angular 2 的核心架构组成部分：

1. 模块 (Modules)

模块是 Angular 应用程序的组织单位。每个 Angular 应用至少有一个模块：根模块（AppModule）。模块可以帮助我们将应用程序的功能划分为多个功能区块，使得代码更加模块化和易于管理。

  • @NgModule 装饰器：用于定义模块。
  • declarations：声明模块包含的组件、指令和管道。
  • imports：导入其他模块，以便使用它们的功能。
  • providers：定义服务和依赖注入的内容。
  • bootstrap：指定应用的根组件。

示例

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

@NgModule({
  declarations: [AppComponent],  // 组件、指令、管道
  imports: [BrowserModule],  // 导入其他模块
  providers: [],  // 服务
  bootstrap: [AppComponent]  // 根组件
})
export class AppModule { }

2. 组件 (Components)

组件是 Angular 应用程序中的基本构建块。每个组件有一个 视图（View） 和一个 控制器（Controller）。组件负责将数据渲染到 UI 并响应用户输入。

  • @Component 装饰器：定义组件的元数据（选择器、模板、样式等）。
  • 组件类包含业务逻辑，模板定义了视图的 HTML 结构，样式文件定义了视图的样式。

示例

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

@Component({
  selector: 'app-root',  // 组件的选择器
  templateUrl: './app.component.html',  // 组件模板
  styleUrls: ['./app.component.css']  // 组件样式
})
export class AppComponent {
  title = 'Angular 2 App';
}
  • selector：标记该组件的标签名。
  • templateUrl：组件的 HTML 模板文件。
  • styleUrls：组件的 CSS 样式文件。

3. 模板 (Templates)

Angular 的模板定义了组件的视图。模板是 HTML 代码，支持 Angular 特性，如数据绑定、指令、管道等。通过模板，组件可以与用户交互，显示数据并响应事件。

  • 数据绑定：将组件数据与 DOM 元素绑定。
    • 插值绑定（{{}}）：将组件属性绑定到视图。
    • 属性绑定（[property]）：动态绑定属性值。
    • 事件绑定（(event)）：将事件处理方法绑定到视图事件。
    • 双向绑定（[(ngModel)]）：同步更新视图和数据。

示例

<!-- app.component.html -->
<h1>{{ title }}</h1>
<button (click)="onClick()">Click Me</button>

4. 服务 (Services)

服务是 Angular 中用于组织和共享应用程序逻辑、数据访问和其他功能的类。服务是注入的，通常用于处理与数据有关的逻辑，或者从后端 API 获取数据。

  • 服务通过 依赖注入（DI） 被注入到组件、指令、其他服务等。

示例

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

@Injectable({
  providedIn: 'root',  // 服务将在根模块中可用
})
export class DataService {
  getData() {
    return ['Item 1', 'Item 2', 'Item 3'];
  }
}

5. 路由 (Routing)

Angular 提供了一个强大的路由模块来帮助我们管理应用的导航和页面切换。通过路由，我们可以定义哪些视图与哪些 URL 匹配，并在不同的视图之间进行导航。

  • RouterModule：配置和使用路由功能。
  • Route：定义视图和 URL 的映射关系。

示例

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

6. 依赖注入 (Dependency Injection, DI)

Angular 使用依赖注入来提供服务实例给需要它们的组件、指令或其他服务。依赖注入使得代码更加模块化、可测试和灵活。

  • 服务通过构造函数注入到组件中。
  • 服务可以是 单例 或 共享的。

示例

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  data: string[];

  constructor(private dataService: DataService) {}

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

7. 指令 (Directives)

指令是 Angular 提供的功能扩展，可以操作 DOM 元素的行为。Angular 有三种类型的指令：

  • 结构型指令：改变 DOM 结构（例如 *ngIf, *ngFor）。
  • 属性型指令：改变元素的外观或行为（例如 ngClass, ngStyle）。
  • 自定义指令：用户自定义指令。

示例

<!-- 使用 *ngIf 显示或隐藏元素 -->
<div *ngIf="isVisible">This is visible</div>

<!-- 使用 *ngFor 列表渲染 -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

8. 管道 (Pipes)

管道用于格式化数据输出。例如，可以用它们来格式化日期、数字、货币等。Angular 内置了许多常用管道，如 DatePipe、CurrencyPipe，也可以自定义管道。

示例

<!-- 使用 DatePipe 格式化日期 -->
<p>{{ currentDate | date:'short' }}</p>

<!-- 使用 CurrencyPipe 格式化金额 -->
<p>{{ price | currency:'USD' }}</p>

9. 生命周期钩子 (Lifecycle Hooks)

Angular 提供了一些生命周期钩子函数，在组件或指令的不同生命周期阶段调用。这些钩子可以帮助你管理组件的创建、更新和销毁过程。

常用的生命周期钩子有：

  • ngOnInit()
  • ngOnChanges()
  • ngOnDestroy()

示例

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Component Initialized');
  }

  ngOnDestroy() {
    console.log('Component Destroyed');
  }
}

总结

Angular 2 的架构是基于组件和服务的，具有以下核心概念：

  • 模块（Modules）：组织应用功能的单位。
  • 组件（Components）：应用的基本构建块，负责渲染视图并处理业务逻辑。
  • 模板（Templates）：定义组件的视图。
  • 服务（Services）：提供共享的业务逻辑和数据访问。
  • 路由（Routing）：管理视图和 URL 之间的映射。
  • 依赖注入（Dependency Injection）：用于将服务注入到组件和其他服务中。
  • 指令（Directives）：扩展 HTML 元素的功能。
  • 管道（Pipes）：格式化数据输出。
  • 生命周期钩子（Lifecycle Hooks）：管理组件和指令的生命周期。

通过这些组成部分，Angular 2 提供了一个灵活且强大的框架，适合开发现代的 Web 应用。