Angular基础[编辑 | 编辑源代码]

Angular 是一个由 Google 开发的基于 TypeScript 的开源前端框架，用于构建单页应用程序（SPA）。它采用组件化架构，提供强大的依赖注入、数据绑定和模块化系统，适用于从简单到复杂的企业级应用开发。

核心概念[编辑 | 编辑源代码]

组件（Components）[编辑 | 编辑源代码]

Angular 应用由组件构成，每个组件包含：

模板（HTML 视图）
样式（CSS）
业务逻辑（TypeScript 类）

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>{{title}}</h1>`,
  styles: [`h1 { color: blue; }`]
})
export class AppComponent {
  title = '我的第一个Angular应用';
}

模块（Modules）[编辑 | 编辑源代码]

Angular 使用模块系统组织代码。每个应用至少有一个根模块（AppModule）：

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

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

数据绑定[编辑 | 编辑源代码]

Angular 提供四种数据绑定方式：

关键特性[编辑 | 编辑源代码]

指令（Directives）[编辑 | 编辑源代码]

结构型指令：修改 DOM 布局（如 *ngIf, *ngFor）
属性型指令：改变元素外观行为（如 [ngStyle], [ngClass]）

<!-- 结构型指令示例 -->
<div *ngIf="isVisible">条件显示内容</div>

<ul>
  <li *ngFor="let item of items">{{item.name}}</li>
</ul>

服务与依赖注入[编辑 | 编辑源代码]

服务是可复用的业务逻辑单元，通过依赖注入系统使用：

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'React', 'Vue'];
  }
}

路由（Routing）[编辑 | 编辑源代码]

Angular Router 实现导航和视图管理：

// app-routing.module.ts
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

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

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

实际案例：待办事项应用[编辑 | 编辑源代码]

组件结构[编辑 | 编辑源代码]

实现代码[编辑 | 编辑源代码]

// todo.service.ts
@Injectable()
export class TodoService {
  private todos: Todo[] = [];

  addTodo(text: string) {
    this.todos.push({ id: Date.now(), text, completed: false });
  }

  getTodos() {
    return this.todos;
  }
}

<!-- todo-list.component.html -->
<input [(ngModel)]="newTodo" (keyup.enter)="addTodo()">
<ul>
  <li *ngFor="let todo of todos$ | async">
    {{todo.text}}
  </li>
</ul>

性能优化[编辑 | 编辑源代码]

变更检测策略：使用 OnPush 策略减少检测次数
懒加载模块：按需加载特性模块
AOT编译：提前编译模板
纯管道：优化数据转换

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizedComponent {}

学习路径[编辑 | 编辑源代码]

1. TypeScript 基础 2. Angular CLI 工具 3. 组件与模板语法 4. 服务与依赖注入 5. 路由与导航 6. 状态管理（如 NgRx） 7. 高级主题（动态组件、自定义指令等）

数学公式示例[编辑 | 编辑源代码]

Angular 的变更检测复杂度可以表示为： $O (n) = \sum_{i = 1}^{n} C_{i}$ 其中 $C_{i}$ 是第i个组件的检测成本。