Angular 基础

Angular 是由 Google 维护的、用于构建 Web 应用的 TypeScript 框架（含路由、HTTP、表单、依赖注入等）。当前文档以 Angular 17+ 为主线：独立组件（Standalone）、内置控制流（@if / @for）、Signals。前置：JavaScript 基础、TypeScript、HTML。

可与 Vue 基础、React 基础对照：Angular 是开箱即用的全栈前端框架，默认 TypeScript，变更检测与依赖注入为核心机制。

Angular 是什么、不是什么

	说明
是	组件 + 模板；DI 管理服务；官方 CLI、Router、`HttpClient`、表单模块
不是	仅 UI 库（对比 React）；默认不用 JSX（使用 HTML 模板 + 指令）

与 AngularJS（1.x）的区别

AngularJS（1.x） 与 Angular（2+） 是完全不同的框架，API 与架构不兼容。本文档中的「Angular」均指 Angular 2 及以后 的版本线。

独立组件与引导（Standalone）

Angular 17 起，CLI 新建应用默认生成 standalone 组件（standalone: true），无需 NgModule 包裹根模块即可启动：

// main.ts
import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";
import { provideRouter } from "@angular/router";
import { routes } from "./app/app.routes";

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
});

// app.component.ts
import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet],
  template: `<router-outlet />`,
})
export class AppComponent {}

既有 NgModule 项目仍可维护；新功能优先采用 Standalone + import 在组件上声明依赖。

CLI 速览

bash

npm install -g @angular/cli
ng new my-app --style=css --routing
cd my-app && ng serve

命令	作用
`ng generate component foo`	生成组件
`ng generate service bar`	生成服务
`ng build`	生产构建
`ng test`	单元测试（默认 Karma + Jasmine）

详见工程化。

核心概念速览

概念	说明
组件	`@Component`：类 + 模板 + 样式；通过 selector 挂载
模板	HTML + 绑定 + 指令；见组件与模板
依赖注入	在构造函数或 `inject()` 中获取服务实例
变更检测	默认由 Zone.js 等在异步任务后刷新视图；见 performance
Signal	细粒度响应式原语（Angular 16+）；见 Signals
RxJS	处理异步流（HTTP、事件流）；常与 `async` 管道配合

本目录学习路径

主题	文档
组件与模板	components
响应式	signals/basics → rxjs
DI / 表单 / HTTP	di、forms、http
路由与状态	router、state
性能与工程	performance、project

参考文献

以下链接在编写时均可正常访问：

资料	说明
Angular 文档	英文官方
Angular 中文文档	社区翻译，与版本同步以站点为准
Angular 更新指南	版本升级