学习要点：了解Angular的基本概念、核心特性、架构组成以及与其他框架的差异。
什么是Angular？
Angular是一个由Google开发和维护的开源Web应用框架，用于构建高效、可扩展的单页应用程序（SPA）。它基于TypeScript构建，采用组件化架构，提供了完整的解决方案，包括数据绑定、依赖注入、路由、表单处理等核心功能。
Angular发展历程
- AngularJS（2010）：第一个版本，基于JavaScript
- Angular 2+（2016）：完全重写，基于TypeScript
- Angular 4+（2017）：向后兼容Angular 2
- Angular 12+（2021）：移除View Engine，仅保留Ivy
- Angular 14+（2022）：独立API、严格类型表单
Angular的核心特性
组件化架构
Angular应用由可复用的组件树构成，每个组件包含模板、样式和业务逻辑，提高代码复用性和可维护性。
双向数据绑定
通过[(ngModel)]指令实现模型与视图的自动同步，减少DOM操作代码，简化开发流程。
TypeScript支持
基于TypeScript，提供静态类型检查、接口、装饰器等高级特性，增强代码质量和开发体验。
依赖注入
强大的依赖注入系统，实现松耦合的组件设计，便于测试和维护。
Angular架构概览
Angular架构核心概念关系图
| 架构组件 | 描述 |
|---|---|
| 模块（Modules） | 使用@NgModule装饰器声明，组织相关组件、指令、管道和服务 |
| 组件（Components） | 应用的基本构建块，包含视图模板和业务逻辑 |
| 模板（Templates） | 使用HTML和Angular模板语法定义组件视图 |
| 指令（Directives） | 扩展HTML功能，包括结构型指令（*ngIf）和属性型指令（ngStyle） |
| 服务（Services） | 可注入的单例对象，用于封装业务逻辑和数据访问 |
| 路由（Routing） | RouterModule提供SPA导航功能，支持懒加载和守卫 |
第一个Angular组件示例
以下是一个简单的Angular组件示例，展示组件的基本结构：
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = '我的第一个Angular应用';
currentDate = new Date();
greetUser(name: string): string {
return `欢迎, ${name}!`;
}
}app.component.html
<div class="app-container">
<h1>@{{title}}</h1>
<p>当前时间: @{{currentDate | date:'yyyy-MM-dd HH:mm'}}</p>
<p>@{{greetUser('Angular开发者')}}</p>
<button class="btn btn-primary" (click)="updateTitle()">
更新标题
</button>
<div *ngIf="showExtraInfo">
<p>这是条件显示的内容</p>
</div>
</div>Angular与其他框架对比
| 特性 | Angular | React | Vue.js |
|---|---|---|---|
| 类型 | 完整框架 | UI库 | 渐进式框架 |
| 语言 | TypeScript | JavaScript (JSX) | JavaScript |
| 数据绑定 | 双向 | 单向 | 双向/单向 |
| 学习曲线 | 较陡峭 | 中等 | 平缓 |
| 适用场景 | 大型企业应用 | 灵活UI需求 | 快速原型开发 |
Angular CLI开发工具
Angular CLI是官方命令行工具，简化了项目创建、构建、测试和部署过程：
# 安装Angular CLI
npm install -g @angular/cli
# 创建新项目
ng new my-angular-app
# 启动开发服务器
ng serve
# 生成组件
ng generate component my-component
# 构建生产版本
ng build --prod
注意：Angular与AngularJS（1.x版本）是完全不同的框架，AngularJS使用基于作用域的MVC架构，而Angular 2+使用基于组件的架构，两者不兼容。
本章总结
- Angular是基于TypeScript的完整前端框架，适合构建大型企业级应用
- 采用组件化架构，支持双向数据绑定和依赖注入
- 包含模块、组件、服务、指令、管道等核心概念
- Angular CLI提供完整的开发工具链
- 与React、Vue相比，Angular提供更完整的"开箱即用"解决方案