angular-cheatsheet

**Angular 快速指南** Angular 是一款由 Google 维护的开源前端框架，主要用于构建单页应用程序（SPA）。它基于 TypeScript 开发，提供了一整套工具和服务，包括数据绑定、依赖注入、模块化、组件化、路由、服务等，帮助开发者高效地构建动态且响应式的Web应用。 ### TypeScript 基础 Angular 框架主要使用 TypeScript 进行开发，这是一种静态类型的超集语言，提供了类型安全、面向对象的特性，以及对ES6的全面支持。在Angular中，TypeScript用于定义组件、服务、指令等核心概念，是理解Angular的关键。 ### 模块（Modules） Angular 应用由一个或多个模块组成，每个模块都是一个 `NgModule` 类。模块用于组织应用的组件、指令和服务，并控制它们的可见性和可用性。通过导入其他模块，可以实现功能的复用和分组。 ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } ``` ### 组件（Components） 组件是Angular应用的基本构建块，它们负责渲染UI。组件由模板（HTML）、类（TypeScript）和元数据（@Component装饰器）三部分组成。元数据定义了组件的属性，如selector（用于在模板中引用组件）、template（内联模板）或 templateUrl（外部模板文件）等。 ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: '<h1>Hello, Angular!</h1>' }) export class AppComponent { } ``` ### 数据绑定（Data Binding） Angular 的数据绑定允许组件的属性与视图元素之间自动同步。有五种数据绑定形式：属性绑定、事件绑定、双向数据绑定、结构指令和表达式。 例如，属性绑定将组件属性值赋给HTML元素属性： ```html <p>{{ message }}</p> ``` 事件绑定监听用户交互并调用组件方法： ```html <button (click)="onButtonClick()">Click me</button> ``` ### 依赖注入（Dependency Injection） Angular 的依赖注入系统使得组件可以轻松获取服务实例。服务是可重用的代码单元，提供特定的功能。通过在组件类的构造函数中声明依赖，Angular会自动注入所需的服务。 ```typescript import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class ApiService { constructor(private http: HttpClient) { } } // 在组件中注入服务 import { ApiService } from './api.service'; @Component({ ... }) export class MyComponent { constructor(private apiService: ApiService) { } } ``` ### 路由（Routing） Angular 的路由模块（@angular/router）允许在应用中导航和管理多个视图。配置路由后，可以通过URL激活不同的组件。 ```typescript import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` ### 指令（Directives） 指令扩展了HTML的功能，分为结构指令（改变DOM结构）和属性指令（修改元素或属性的行为）。例如，`*ngIf` 是一个结构指令，`[class.active]` 是一个属性指令。 ```html <div *ngIf="isVisible">I'm visible!</div> <a [routerLink]="['/about']" [class.active]="isActive">About</a> ``` ### 管道（Pipes） 管道用于在模板中转换数据，例如日期格式化、货币转换等。Angular 提供了一些内置的管道，也可以自定义管道。 ```html {{ date | date:'short' }} <!-- 显示格式化的日期 --> ``` ### 服务（Services） 服务是可重用的类，通常包含应用程序的业务逻辑或与远程服务器的通信。通过注入服务，组件可以从其他组件或模块中解耦。 ```typescript @Injectable() export class UserService { getUsers() { /*...*/ } } ``` 以上只是Angular基础知识的冰山一角，实际开发中还会涉及模块懒加载、异步路由、表单处理、状态管理等更多高级特性和最佳实践。对于深入学习Angular，建议阅读官方文档并参与实际项目以提升技能。