Angular

基于 TypeScript 的前端框架，自带 CLI、组件、信号与依赖注入

核心功能

把应用拆成带 @Component 装饰器的 TypeScript 类，用 signal 管理状态、用依赖注入共享逻辑，并由 Angular CLI 统一负责创建项目、开发服务器与构建。适合结构约定要求高、需要多人长期协作维护的中大型 Web 应用。

功能亮点

组件是带装饰器的类

@Component 里写 selector 和 template，类体里写行为，结构位置固定、易于团队统一

信号式响应

signal('Morgan') 创建状态，firstName() 读取、firstName.set(...) 更新，框架追踪读取点

派生值自动同步

computed(() => firstName().toUpperCase()) 只读，上游信号一变它的值随之更新

服务注入替代层层传参

共享逻辑封装成服务类，组件里 private calculator = inject(Calculator) 即可取用

CLI 兜住整条链路

ng new 交互式生成项目并初始化 git，npm start 起监听模式的开发服务器

适用场景

• 多人协作的中大型 Web 应用，靠框架约定统一目录结构与组件写法
• 以 TypeScript 为主的团队，希望模板、状态、服务都有静态类型保障
• 需要把共享逻辑抽成服务、在多个组件间通过依赖注入复用的业务系统

安装配置

bash

前置条件：Node.js v20.19.0 或更新版本。

第一步，全局安装 Angular CLI ——

npm:
npm install -g @angular/cli

第二步，创建项目（按提示选择配置项）:
ng new <project-name>

第三步，进入目录并启动本地开发服务器:
cd my-first-angular-app
npm start

启动成功后访问终端提示的地址，默认为 http://localhost:4200/

使用方法

typescript

// user-profile.ts —— 定义并组合组件
import {ProfilePhoto} from 'profile-photo.ts';

@Component({
  selector: 'user-profile',
  imports: [ProfilePhoto],
  template: `
    <h1>User profile</h1>
    <profile-photo />
    <p>This is the user profile page</p>
  `,
})
export class UserProfile {
  // Component behavior is defined in here
}

// 用 signal / computed 管理状态
import {signal, computed} from '@angular/core';

@Component({
  /* ... */
})
export class UserProfile {
  isTrial = signal(false);
  isTrialExpired = signal(false);
  showTrialDuration = computed(() => this.isTrial() && !this.isTrialExpired());

  activateTrial() {
    this.isTrial.set(true);
  }
}