当前位置：首页 > article >正文

Angular的理解

article 2025/4/1 18:47:26

Angular 是一个由 Google 维护的全功能前端框架，适合构建复杂的企业级应用。它采用 TypeScript 作为首选语言，提供了一套完整的解决方案，包括数据绑定、依赖注入、路由、表单处理等。

1. Angular 的核心概念

1.1 组件化架构

Angular 应用由**组件（Components）**构成，每个组件包含：

HTML 模板（定义 UI）
CSS 样式（定义外观）
TypeScript 类（定义逻辑）
元数据（@Component 装饰器）（配置组件）

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Angular App';
}

1.2 模块化（NgModule）

Angular 采用模块化设计，每个模块（NgModule）封装一组相关功能：

声明组件、指令、管道
导入其他模块
提供服务（依赖注入）

@NgModule({
  declarations: [AppComponent], // 注册组件
  imports: [BrowserModule],     // 导入其他模块
  providers: [UserService],    // 注册服务
  bootstrap: [AppComponent]    // 启动组件
})
export class AppModule {}

2. 数据绑定与变更检测

Angular 采用双向数据绑定（[(ngModel)]）和单向数据流（@Input() / @Output()）。

2.1 数据绑定方式

语法	说明
`{{ expression }}`	插值（显示变量）
`[property]="expression"`	属性绑定（父 → 子）
`(event)="handler()"`	事件绑定（子 → 父）
`[(ngModel)]="property"`	双向绑定（表单输入）

2.2 变更检测（Change Detection）

默认策略：Default（检查所有组件）
优化策略：OnPush（仅当输入变化时检查）

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})

3. 依赖注入（DI）

Angular 的 DI 系统管理服务（Services）的创建和共享：

@Injectable() 标记可注入的服务
providers 在模块或组件级别注册服务
构造函数注入（自动解析依赖）

@Injectable({ providedIn: 'root' }) // 全局单例
export class UserService {
  getUsers() { return [...] }
}

@Component({
  providers: [UserService] // 组件级实例
})
export class UserComponent {
  constructor(private userService: UserService) {}
}

4. 路由（Router）

Angular 提供 @angular/router 进行 SPA 导航：

RouterModule.forRoot(routes) 配置路由
<router-outlet> 渲染匹配的组件
Router 服务 编程式导航

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UserListComponent }
];

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

5. 表单处理

Angular 提供模板驱动表单和响应式表单两种方式：

5.1 模板驱动表单

使用 ngModel 绑定数据
适合简单表单

<form #form="ngForm" (ngSubmit)="onSubmit(form)">
  <input name="username" ngModel required>
  <button type="submit">Submit</button>
</form>

5.2 响应式表单

使用 FormControl、FormGroup 动态管理表单
适合复杂表单验证

loginForm = new FormGroup({
  username: new FormControl('', Validators.required),
  password: new FormControl('')
});

6. HTTP 通信

Angular 提供 HttpClient 进行 HTTP 请求：

@Injectable()
export class ApiService {
  constructor(private http: HttpClient) {}

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

7. 状态管理（NgRx）

对于大型应用，可使用 NgRx（基于 Redux 的状态管理）：

Store（全局状态）
Actions（触发状态变更）
Reducers（纯函数更新状态）
Effects（处理副作用，如 API 调用）

// 定义 Action
export const loadUsers = createAction('[User] Load Users');

// 定义 Reducer
const userReducer = createReducer(
  initialState,
  on(loadUsers, (state) => ({ ...state, loading: true }))
);

8. Angular 的优势与劣势

✅ 优势

全功能框架：内置路由、表单、HTTP、依赖注入等
TypeScript 支持：强类型，减少运行时错误
企业级适用：适合大型复杂应用
CLI 工具：ng generate 快速生成代码
长期支持（LTS）：Google 维护，版本稳定

❌ 劣势

学习曲线陡峭：概念多（模块、依赖注入、RxJS 等）
性能开销：比 React/Vue 稍重（但可通过 OnPush 优化）
灵活性较低：相比 React，Angular 更“固执己见”

9. Angular vs React vs Vue

特性	Angular	React	Vue
架构	全功能框架	库（需搭配生态）	渐进式框架
语言	TypeScript	JavaScript/TS	JavaScript/TS
数据绑定	双向/单向	单向	双向/单向
学习曲线	高	中	低
适用场景	企业级应用	灵活生态	快速开发