# 全局安装 Angular CLI（推荐每次使用 npx 调用最新版）
npm install -g @angular/cli@latest
 
# 创建新项目
ng new my-angular-app
 
cd my-angular-app
ng serve

my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts      # 根组件
│   │   ├── app.config.ts         # 应用级配置（路由、Provider）
│   │   ├── app.routes.ts         # 路由配置
│   │   ├── components/           # 可复用组件
│   │   ├── features/             # 业务功能模块
│   │   ├── services/             # 服务层（HTTP、状态、业务逻辑）
│   │   └── models/               # 类型定义
│   ├── index.html
│   ├── main.ts                   # 应用入口
│   ├── styles.scss               # 全局样式
│   └── assets/                   # 静态资源
├── public/                       # 公共静态资源（v17+ 新目录）
├── angular.json                  # Angular CLI 工作区配置
├── package.json
├── tsconfig.json
└── vite.config.ts                # 若使用 Vite 实验模式

ng serve            # 启动开发服务器，默认 http://localhost:4200
ng build            # 生产构建（默认使用 esbuild）
gn test             # 运行 Vitest 测试（v21+）
ng generate component hero  # 生成组件
ng generate service user    # 生成服务
ng add @angular/material    # 添加 Angular Material

// src/app/components/counter/counter.component.ts
import { Component, signal, computed } from '@angular/core'
 
@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ double() }}</p>
    <button (click)="increment()">+1</button>
  `
})
export class CounterComponent {
  // 使用 signal 创建响应式状态
  count = signal(0)
 
  // 使用 computed 创建派生值
  double = computed(() => this.count() * 2)
 
  increment() {
    // 使用 update 基于最新值更新
    this.count.update((value) => value + 1)
  }
}

import { Component } from '@angular/core'
import { RouterLink } from '@angular/router'
 
@Component({
  selector: 'app-hero',
  standalone: true,
  // 直接在组件中导入依赖
  imports: [RouterLink],
  template: `<a routerLink="/heroes">Heroes</a>`
})
export class HeroComponent {}

<!-- @if 条件渲染 -->
@if (user.isAdmin) {
  <admin-panel />
} @else {
  <user-panel />
}
 
<!-- @for 列表渲染 -->
@for (hero of heroes(); track hero.id) {
  <hero-card [hero]="hero" />
} @empty {
  <p>No heroes found</p>
}
 
<!-- @defer 延迟加载 -->
@defer (on viewport) {
  <heavy-chart />
} @placeholder {
  <chart-skeleton />
}

import { Component } from '@angular/core'
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms'
 
@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <input formControlName="email" />
      <input formControlName="password" type="password" />
      <button type="submit">登录</button>
    </form>
  `
})
export class LoginComponent {
  loginForm = new FormGroup({
    email: new FormControl(''),
    password: new FormControl('')
  })
 
  onSubmit() {
    console.log(this.loginForm.value)
  }
}

digraph Angular_Signals {
  rankdir=TB
  node [shape=box, style="rounded,filled", fillcolor="#fef2f2"]
  Signal [label="signal(state)", fillcolor="#fecaca"]
  Computed [label="computed(derived)", fillcolor="#fecaca"]
  Effect [label="effect(side effect)", fillcolor="#fecaca"]
  Template [label="Template Binding"]
  DOM [label="DOM Update"]
 
  Signal -> Computed
  Computed -> Template
  Signal -> Template
  Effect -> DOM
}

// src/app/services/user.service.ts
import { Injectable } from '@angular/core'
 
@Injectable({ providedIn: 'root' })
export class UserService {
  getUsers() {
    return fetch('/api/users').then((res) => res.json())
  }
}
 
// src/app/components/users/users.component.ts
import { Component, inject, signal } from '@angular/core'
import { UserService } from '../../services/user.service'
 
@Component({
  selector: 'app-users',
  standalone: true,
  template: `
    @for (user of users(); track user.id) {
      <p>{{ user.name }}</p>
    }
  `
})
export class UsersComponent {
  private userService = inject(UserService)
  users = signal([])
 
  constructor() {
    this.userService.getUsers().then((users) => this.users.set(users))
  }
}

// src/app/app.routes.ts
import { Routes } from '@angular/router'
 
export const routes: Routes = [
  {
    path: 'admin',
    // 懒加载 Standalone 组件
    loadComponent: () => import('./admin/admin.component').then((m) => m.AdminComponent),
    canActivate: [() => inject(AuthGuard).canActivate()]
  },
  { path: '**', redirectTo: '' }
]

import { Component, resource } from '@angular/core'
 
@Component({
  selector: 'app-posts',
  standalone: true,
  template: `
    @if (posts().error) { <p>Error loading posts</p> }
    @if (posts().isLoading) { <p>Loading...</p> }
    @for (post of posts().value; track post.id) {
      <p>{{ post.title }}</p>
    }
  `
})
export class PostsComponent {
  posts = resource({
    loader: () => fetch('/api/posts').then((res) => res.json())
  })
}

digraph Angular_Ecosystem {
  rankdir=TB
  node [shape=box, style="rounded,filled", fillcolor="#fff1f2"]
  Angular [label="Angular Core", fillcolor="#fecdd3"]
 
  Angular -> CLI [label="Angular CLI"]
  Angular -> Router [label="Angular Router"]
  Angular -> Forms [label="Angular Forms"]
  Angular -> Http [label="HttpClient"]
  Angular -> Material [label="Angular Material"]
  Angular -> CDK [label="Angular CDK"]
  Angular -> Universal [label="Angular Universal / SSR"]
  Angular -> DevTools [label="Angular DevTools"]
  Angular -> Analog [label="Analog 元框架"]
  Angular -> Nx [label="Nx Monorepo"]
 
  Material -> CDK [label="基于 CDK"]
  CDK -> ARIA [label="Angular ARIA"]
}

{
  "compilerOptions": {
    "strict": true,
    "noImplicitOverride": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}

// 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, withPreloading(PreloadAllModules)),
    provideHttpClient()
  ]
}

// src/app/main.ts
import { bootstrapApplication } from '@angular/platform-browser'
import { AppComponent } from './app/app.component'
import { appConfig } from './app/app.config'
 
bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err))

src/app/
├── features/
│   ├── users/
│   │   ├── components/
│   │   ├── services/
│   │   ├── models/
│   │   └── users.routes.ts
│   └── orders/
├── shared/
│   ├── components/
│   ├── directives/
│   └── pipes/
├── core/
│   ├── services/          # 全局单例服务
│   └── interceptors/
└── app.config.ts

import { Component, ChangeDetectionStrategy, signal } from '@angular/core'
 
@Component({
  selector: 'app-optimized',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>{{ value() }}</p>`
})
export class OptimizedComponent {
  value = signal(0)
}

@defer (on viewport; prefetch on idle) {
  <heavy-data-grid />
} @placeholder {
  <grid-skeleton />
} @loading {
  <spinner />
}

import { inject } from '@angular/core'
import { Router } from '@angular/router'
 
export const authGuard = () => {
  const auth = inject(AuthService)
  const router = inject(Router)
 
  if (!auth.isAuthenticated()) {
    return router.createUrlTree(['/login'])
  }
  return true
}

import { HttpInterceptorFn } from '@angular/common/http'
 
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken()
  const cloned = token
    ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })
    : req
  return next(cloned)
}