Angular 知识框架

一、Angular 基础

1. Angular 简介

• Angular 是什么？

  • 基于 TypeScript 的前端框架（Google 维护）。

  • 适用于构建单页应用（SPA）。

• 核心特性

  • 组件化架构

  • 双向数据绑定

  • 依赖注入（DI）

  • 模块化设计（NgModule）

• Angular vs AngularJS

  • Angular（2+）是完全重写的版本，不兼容 AngularJS（1.x）。

2. 开发环境搭建

• 安装工具

  • Node.js（LTS 版本）

  • Angular CLI：npm install -g @angular/cli

• 创建项目

  ng new my-app
  cd my-app
  ng serve

• 项目结构

  /src
    /app         # 核心代码
      /components
      /services
    /assets      # 静态资源
    index.html   # 主入口

3. TypeScript 基础

• 类型系统

  • 基本类型：string, number, boolean, any

  • 接口（interface）

  • 类（class）

• 装饰器（Decorators）

  • @Component, @Injectable, @Input, @Output

二、Angular 核心概念

4. 组件（Components）

• 组件结构

  @Component({
    selector: 'app-hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
  })
  export class HelloComponent {
    name = 'Angular';
  }

• 模板语法

  • 插值：{{ name }}

  • 属性绑定：[property]="value"

  • 事件绑定：(event)="handler()"

• 生命周期钩子

  • ngOnInit, ngOnDestroy, ngAfterViewInit 等

5. 指令（Directives）

• 内置指令

  • *ngIf（条件渲染）

  • *ngFor（循环渲染）

  • [ngClass], [ngStyle]（动态样式）

• 自定义指令

  • @Directive 装饰器

6. 数据绑定

• 单向绑定

  • 属性绑定：[value]="data"

  • 事件绑定：(click)="onClick()"

• 双向绑定

  • [(ngModel)]（需导入 FormsModule）

7. 服务与依赖注入（DI）

• 创建服务

  @Injectable({
    providedIn: 'root' // 全局单例
  })
  export class DataService {
    getData() { return [1, 2, 3]; }
  }

• 依赖注入

  constructor(private dataService: DataService) {}

8. 路由（Routing）

• 配置路由

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

• 路由导航

  • <router-outlet>（占位符）

  • routerLink（链接跳转）

  • Router.navigate()（编程式导航）

三、Angular 进阶

9. 表单处理

• 模板驱动表单

  • NgModel，NgForm

• 响应式表单

  • FormGroup, FormControl

  • Validators（表单验证）

10. HTTP 通信

• HttpClient

  constructor(private http: HttpClient) {}
  getUsers() {
    return this.http.get<User[]>('/api/users');
  }

• 拦截器（Interceptors）

  • 全局请求/响应处理

11. 状态管理

• RxJS

  • Observable, Subject

  • 操作符：map, filter, debounceTime

• NgRx（Redux 风格）

  • Store, Actions, Reducers

12. 性能优化

• 变更检测策略

  • ChangeDetectionStrategy.OnPush

• 懒加载模块

  { path: 'admin', loadChildren: () => import('./admin.module') }

• AOT 编译（Ahead-of-Time）

  • 提升运行时性能

四、Angular 高级

13. 国际化（i18n）

• ng xi18n 提取翻译文本

• 多语言切换

14. 测试

• 单元测试

  • Jasmine + Karma

  • TestBed（ Angular 测试工具）

• E2E 测试

  • Protractor（已弃用，推荐 Cypress）

15. 部署

• 生产构建

  ng build --prod

• Docker 部署

  FROM nginx
  COPY dist/my-app /usr/share/nginx/html

五、学习路线建议

1. 初级阶段（1-2 个月）

• TypeScript 基础

• Angular 组件 & 数据绑定

• 路由 & HTTP 请求

2. 中级阶段（2-4 个月）

• 响应式表单

• RxJS 异步编程

• 状态管理（NgRx）

3. 高级阶段（4-6 个月）

• 性能优化（懒加载、AOT）

• 自定义指令/管道

• 微前端架构（Angular Elements）

4. 实战项目

• 初级：Todo List（CRUD 操作）

• 中级：电商网站（购物车、路由守卫）

• 高级：管理后台（NgRx、权限控制）

通过这个知识框架，你可以逐步掌握 Angular 的核心技术，并进阶到企业级开发。建议结合 Angular 官方文档 和实战项目练习！