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 官方文档和实战项目练习！