Angular 简介与环境搭建

1. Angular 是什么

Angular 是由 Google 开发并维护的企业级前端框架，于 2016 年发布 Angular 2（对原 AngularJS 1.x 的完全重写）。它不是一个"库"，而是一个完整的解决方案：内置路由、HTTP 客户端、表单验证、依赖注入、国际化、动画等模块，开箱即用。

Angular 的核心设计理念是约定优于配置——框架为大型团队提供强约束的项目结构和最佳实践，使不同开发者编写的代码风格高度一致，大幅降低维护成本。

2. Angular vs React vs Vue 定位对比

三大框架各有侧重，选型前理解它们的定位差异非常重要。

维度	Angular	React	Vue
类型	完整框架	UI 库	渐进式框架
语言	TypeScript（强制）	JS/TS（可选）	JS/TS（可选）
路由	内置	需第三方	内置
HTTP	内置 HttpClient	需第三方	需第三方
表单	内置双模式	需第三方	内置（v-model）
学习曲线	陡峭	中等	平缓
适用场景	大型企业应用	中大型、灵活	中小型、快速

3. 版本演进：Angular 17 / 18 重要新特性

Angular 17（2023年11月）

• 新控制流语法：引入 @if、@for、@switch 替代 *ngIf/*ngFor 指令，性能提升 90%
• Deferrable Views（@defer）：声明式懒加载，按需延迟渲染组件
• SSR 架构升级：全新的 Node.js 服务端渲染架构，构建更快
• 全新文档网站：angular.dev 上线，取代 angular.io
• Standalone 成为默认：ng new 默认生成 Standalone 项目，NgModule 不再是必须的

Angular 18（2024年5月）

• Zoneless 实验性支持：可不依赖 Zone.js，使用 Signals 驱动变更检测
• 稳定的 Material 3：Angular Material 组件库全面升级至 Material Design 3
• 路由重定向函数：redirectTo 支持函数形式，动态重定向更灵活
• Signal inputs/outputs：input()/output() 函数式 API 稳定
• NgOptimizedImage 改进：内置图片优化指令更强大

4. 安装 Angular CLI

Angular CLI（Command Line Interface）是开发 Angular 应用的官方工具，用于创建项目、生成代码、运行服务器、构建生产包等。

环境准备

# 检查 Node.js 版本（需要 18.x 或 20.x）
node --version
npm --version

# 全局安装 Angular CLI
npm install -g @angular/cli

# 验证安装
ng version

运行 ng version 后，你会看到类似如下输出，确认版本正确：

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 18.x.x
Node: 20.x.x
Package Manager: npm 10.x.x

5. ng new：创建 Angular 项目

# 创建新项目（交互式）
ng new my-angular-app

# 创建时回答以下问题：
# ? Which stylesheet format would you like to use? CSS / SCSS / SASS / LESS
# ? Do you want to enable Server-Side Rendering (SSR)? Yes / No

# 指定参数（跳过交互）
ng new my-app --style=scss --ssr=false --routing=true

# 进入项目目录
cd my-angular-app

# 启动开发服务器
ng serve

# 或者指定端口
ng serve --port 4200 --open

6. 项目结构解析

一个刚创建的 Angular 18 项目（Standalone 模式）结构如下：

my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts       # 根组件
│   │   ├── app.component.html     # 根组件模板
│   │   ├── app.component.scss     # 根组件样式
│   │   ├── app.component.spec.ts  # 根组件测试
│   │   └── app.config.ts          # 应用配置（替代 AppModule）
│   ├── assets/                    # 静态资源
│   ├── environments/              # 环境变量
│   │   ├── environment.ts         # 开发环境
│   │   └── environment.prod.ts    # 生产环境
│   ├── index.html                 # HTML 入口
│   ├── main.ts                    # 应用引导
│   └── styles.scss                # 全局样式
├── angular.json                   # Angular 工作区配置
├── tsconfig.json                  # TypeScript 配置
├── tsconfig.app.json              # 应用 TS 配置
└── package.json

main.ts — 应用引导

// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

app.config.ts — 应用配置

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
  ]
};

7. 常用 CLI 命令

命令	说明
ng serve	启动开发服务器（默认 4200 端口）
ng build	构建应用（开发模式）
ng build --configuration production	生产构建（压缩、AOT、Tree Shaking）
ng generate component foo	生成组件（缩写 ng g c foo）
ng generate service bar	生成服务（缩写 ng g s bar）
ng test	运行单元测试（Karma + Jasmine）
ng lint	代码质量检查（ESLint）
ng update	升级 Angular 版本

8. 核心名词解释

• Zone.js Zone.js 是 Angular 用来检测异步操作完成的猴子补丁库。它拦截了 setTimeout、Promise、XHR 等浏览器 API，当异步操作完成时通知 Angular 检查是否有数据变化（即触发变更检测）。Angular 18 开始实验性支持 Zoneless 模式，未来可能不再依赖 Zone.js。
• 变更检测（Change Detection） Angular 检查组件数据是否发生变化、并更新视图的机制。默认策略（Default）会检查整棵组件树；OnPush 策略只在输入引用变化或 Signals 变化时才检查，性能更好。Zone.js 负责告诉 Angular"现在可以检测了"。
• AOT（Ahead-of-Time Compilation） AOT 编译是 Angular 的默认编译模式：在构建时将 HTML 模板编译为 JavaScript 代码，而不是在浏览器运行时编译（JIT）。AOT 优点：更快的启动速度、更小的包体积、可在构建时捕获模板错误。
• NgModule Angular 旧版的模块化机制，通过 @NgModule 装饰器将组件、指令、管道、服务组织在一起。Angular 14 引入 Standalone Components 后，NgModule 不再是必须的。Angular 17+ 新项目默认使用 Standalone 模式。
• Standalone Component Angular 14+ 引入、17+ 成为默认的组件模式。Standalone 组件直接在 @Component 装饰器中声明自己的依赖（imports），无需 NgModule 的包裹，更简洁、更易理解。
• Signals Angular 17 稳定的响应式基本单元，用 signal() 创建可观察状态，用 computed() 创建派生状态，用 effect() 执行副作用。Signals 的变更是精确的（只更新用到该 Signal 的部分），比 Zone.js 全量检测更高效。

9. 生成第一个组件

# 生成 HelloWorld 组件
ng generate component hello-world
# 生成的文件：
# src/app/hello-world/hello-world.component.ts
# src/app/hello-world/hello-world.component.html
# src/app/hello-world/hello-world.component.scss
# src/app/hello-world/hello-world.component.spec.ts

// hello-world.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  standalone: true,
  imports: [],
  template: `
    <div class="hello">
      <h1>Hello, Angular 18!</h1>
      <p>当前时间：{{ currentTime }}</p>
    </div>
  `,
  styles: [`
    .hello { padding: 20px; text-align: center; }
  `]
})
export class HelloWorldComponent {
  currentTime = new Date().toLocaleTimeString();
}