Angular 企业级开发指南 - 给 Vue3/React 开发者的从入门到精通

my-app/
src/
  app/
    app.component.ts          # 根组件
    app.config.ts              # 应用配置 (providers)
    app.routes.ts              # 路由定义
    core/                      # 全局单例服务、守卫、拦截器
      services/
      guards/
      interceptors/
    features/                  # 功能模块 (按业务领域划分)
      user/
        user.component.ts
        user.service.ts
        user.routes.ts
      dashboard/
    shared/                    # 可复用组件、管道、指令
      components/
      pipes/
      directives/
  assets/
  styles.scss
  main.ts                     # 启动入口
angular.json                   # CLI 工作区配置
tsconfig.json
package.json

<!-- 父组件使用 -->
<app-todo-item
  [todo]="myTodo"
  [showDetails]="true"
  (toggle)="handleToggle($event)"
  (delete)="handleDelete($event)"
/>

<!-- @if / @else -->
@if (user.isAdmin) {
  <admin-panel />
} @else if (user.isMod) {
  <mod-panel />
} @else {
  <user-panel />
}

<!-- @for with track (必需) and @empty -->
@for (item of items; track item.id) {
  <div>{{ item.name }}</div>
} @empty {
  <div>No items found</div>
}

<!-- @switch -->
@switch (status) {
  @case ('loading') { <spinner /> }
  @case ('error') { <error-message /> }
  @default { <content /> }
}

<!-- @defer 延迟加载 -->
@defer (on viewport) {
  <heavy-chart-component />
} @loading {
  <spinner />
} @placeholder {
  <div>Scroll down to see chart</div>
}

@Component({ /* ... */ })
export class UserComponent implements OnInit, OnDestroy {
  private userService = inject(UserService);
  userId = input.required<string>();

  ngOnInit() {
    // 组件初始化，inputs 已可用
    console.log('User ID:', this.userId());
  }

  ngOnDestroy() {
    // 清理资源
    console.log('Component destroyed');
  }

  constructor() {
    // afterNextRender 必须在注入上下文中调用
    afterNextRender(() => {
      // DOM 已渲染，可安全操作 DOM
    });
  }
}

export class CounterComponent {
  // 创建可写 Signal -- 相当于 Vue ref(0) / React useState(0)
  count = signal(0);

  // 计算属性 -- 相当于 Vue computed() / React useMemo()
  doubled = computed(() => this.count() * 2);

  increment() {
    this.count.update(c => c + 1);    // 相当于 Vue count.value++
  }

  reset() {
    this.count.set(0);                // 相当于 Vue count.value = 0
  }

  constructor() {
    // 副作用 -- 相当于 Vue watchEffect() / React useEffect()
    effect(() => {
      console.log('Count changed:', this.count());
    });
  }
}

export class FilterComponent {
  options = input.required<string[]>();

  // 当 options 变化时自动重置为第一项，但用户可以手动选择
  selectedOption = linkedSignal(() => this.options()[0]);

  selectOption(opt: string) {
    this.selectedOption.set(opt);  // 手动覆盖仍然有效
  }
}

export class UserDetailComponent {
  userId = input.required<number>();

  // 当 userId 变化时自动重新请求
  userResource = httpResource<User>(() => `/api/users/${this.userId()}`);
  // userResource.value()   -- 数据
  // userResource.isLoading() -- 加载状态
  // userResource.error()    -- 错误信息
}

import { toSignal, toObservable } from '@angular/core/rxjs-interop';

// Observable -> Signal
const users = toSignal(this.userService.getUsers$(), { initialValue: [] });

// Signal -> Observable
const count$ = toObservable(this.count);

@Component({
  selector: 'app-form',
  template: `
    <input #nameInput type="text" />
    <app-submit-button />
    <ng-content></ng-content>
  `
})
export class FormComponent implements AfterViewInit {
  // 查询自己模板中的元素
  @ViewChild('nameInput') nameInput!: ElementRef;
  @ViewChild(SubmitButtonComponent) submitBtn!: SubmitButtonComponent;

  // Signal 写法 (推荐)
  nameInputRef = viewChild<ElementRef>('nameInput');

  // 查询投影内容 (父组件通过 ng-content 传入的)
  @ContentChild(FormFieldComponent) firstField!: FormFieldComponent;

  ngAfterViewInit() {
    this.nameInput.nativeElement.focus();
  }
}

// 装饰器写法 (兼容)
@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  @HostBinding('style.backgroundColor') bgColor = '';
  @HostListener('mouseenter') onEnter() { this.bgColor = 'yellow'; }
  @HostListener('mouseleave') onLeave() { this.bgColor = ''; }
}

// host 属性写法 (推荐, Angular 19+)
@Directive({
  selector: '[appHighlight]',
  host: {
    '(mouseenter)': 'onEnter()',
    '(mouseleave)': 'onLeave()',
    '[style.backgroundColor]': 'bgColor',
  }
})
export class HighlightDirective {
  bgColor = '';
  onEnter() { this.bgColor = 'yellow'; }
  onLeave() { this.bgColor = ''; }
}

// Promise: 单值、立即执行、不可取消
const promise = fetch('/api/users').then(res => res.json());

// Observable: 多值、惰性执行、可取消
const users$ = this.http.get<User[]>('/api/users');
// 不 subscribe 就不会发请求！

const sub = users$.subscribe({
  next: (users) => console.log(users),
  error: (err) => console.error(err),
  complete: () => console.log('done')
});

sub.unsubscribe();  // 可以取消

// Subject: 多播，无初始值
const subject = new Subject<string>();
subject.subscribe(v => console.log('A:', v));
subject.next('hello');  // A: hello
subject.subscribe(v => console.log('B:', v));
subject.next('world');  // A: world, B: world  (B 收不到 hello)

// BehaviorSubject: 有初始值，新订阅者立即收到最新值
const auth$ = new BehaviorSubject<User | null>(null);
auth$.subscribe(v => console.log(v));  // 立即输出 null
auth$.next({ name: 'Alice' });

// ReplaySubject: 缓存 N 个历史值
const messages$ = new ReplaySubject<string>(3);  // 缓存最近 3 条

// switchMap: 取消旧请求，用最新的 (搜索框首选)
this.searchInput.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(keyword => this.api.search(keyword))
).subscribe(results => this.results.set(results));

// mergeMap: 全部并行，不取消 (批量上传)
this.files$.pipe(
  mergeMap(file => this.uploadService.upload(file))
).subscribe();

// concatMap: 排队执行，保证顺序 (顺序依赖操作)
this.actions$.pipe(
  concatMap(action => this.api.execute(action))
).subscribe();

// exhaustMap: 忽略后续，防重复提交 (表单提交按钮)
this.submitBtn.clicks$.pipe(
  exhaustMap(() => this.api.submitForm(this.form.value))
).subscribe();

// 搜索标配：debounce + distinct + switchMap
this.searchControl.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  filter(term => term.length > 2),
  switchMap(term => this.searchService.search(term))
).subscribe(results => this.results.set(results));

// combineLatest: 多个流组合 (任一变化就触发)
combineLatest([
  this.route.params,
  this.authService.currentUser$
]).pipe(
  switchMap(([params, user]) =>
    this.api.getPost(params['id'], user.token)
  )
).subscribe(post => this.post.set(post));

// forkJoin: 等所有请求完成 (类似 Promise.all)
forkJoin({
  users: this.api.getUsers(),
  roles: this.api.getRoles(),
  permissions: this.api.getPermissions()
}).subscribe(({ users, roles, permissions }) => {
  this.initDashboard(users, roles, permissions);
});

// shareReplay: 缓存结果，避免重复请求
@Injectable({ providedIn: 'root' })
export class ConfigService {
  readonly config$ = this.http.get<AppConfig>('/api/config').pipe(
    shareReplay(1)  // 多个组件订阅只发一次请求
  );
  constructor(private http: HttpClient) {}
}

// catchError + retry: 错误处理和重试
this.http.get<Data>('/api/data').pipe(
  retry(3),
  catchError(error => {
    console.error('API Error:', error);
    return of(DEFAULT_DATA);  // 返回降级数据
  })
).subscribe(data => this.data.set(data));

// 方式 1: takeUntilDestroyed (Angular 16+, 推荐)
@Component({ /* ... */ })
export class UserListComponent {
  private destroyRef = inject(DestroyRef);

  ngOnInit() {
    this.userService.getUsers().pipe(
      takeUntilDestroyed(this.destroyRef)
    ).subscribe(users => this.users = users);
  }

  // 在构造函数/字段初始化中可以省略参数
  private data$ = this.api.getData().pipe(
    takeUntilDestroyed()
  );
}

// 方式 2: async pipe (模板中使用，自动管理)
@Component({
  template: `
    @if (users$ | async; as users) {
      @for (user of users; track user.id) {
        <app-user-card [user]="user" />
      }
    } @else {
      <p>Loading...</p>
    }
  `
})
export class UserListComponent {
  users$ = inject(UserService).getUsers();
}

// 方式 3: toSignal (推荐用于新项目)
@Component({
  template: `
    @for (user of users(); track user.id) {
      <app-user-card [user]="user" />
    }
  `
})
export class UserListComponent {
  users = toSignal(inject(UserService).getUsers(), { initialValue: [] });
}

export const userResolver: ResolveFn<User> = (route) => {
  return inject(UserService).getUser(route.paramMap.get('id')!);
};
// 使用: resolve: { user: userResolver }

@Component({
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <div>
        <label>Name</label>
        <input formControlName="name" />
        @if (userForm.get('name')?.errors?.['required']) {
          <span class="error">Name is required</span>
        }
      </div>

      <div>
        <label>Email</label>
        <input formControlName="email" type="email" />
        @if (userForm.get('email')?.errors?.['email']) {
          <span class="error">Invalid email</span>
        }
      </div>

      <div formGroupName="address">
        <input formControlName="street" placeholder="Street" />
        <input formControlName="city" placeholder="City" />
      </div>

      <button type="submit" [disabled]="userForm.invalid">Submit</button>
    </form>
  `
})
export class UserFormComponent {
  private fb = inject(FormBuilder);

  userForm = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    address: this.fb.group({
      street: [''],
      city: ['']
    })
  });

  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }
}

// modal.component.ts - 多 slot 投影
@Component({
  selector: 'app-modal',
  template: `
    <div class="modal">
      <header><ng-content select="[modal-header]" /></header>
      <main><ng-content select="[modal-body]" /></main>
      <footer><ng-content select="[modal-footer]" /></footer>
    </div>
  `
})
export class ModalComponent {}

// 使用
@Component({
  template: `
    <app-modal>
      <div modal-header><h2>Confirm Delete</h2></div>
      <div modal-body><p>Are you sure?</p></div>
      <div modal-footer>
        <button (click)="cancel()">Cancel</button>
        <button (click)="confirm()">OK</button>
      </div>
    </app-modal>
  `
})
export class PageComponent {}

// data-table.component.ts - 可自定义模板的组件
@Component({
  selector: 'app-data-table',
  template: `
    <table>
      @for (row of data(); track row.id) {
        <tr>
          <ng-container
            *ngTemplateOutlet="rowTemplate() || defaultRow; context: { $implicit: row }"
          />
        </tr>
      }
    </table>
    <ng-template #defaultRow let-row>
      <td>{{ row.id }}</td>
      <td>{{ row.name }}</td>
    </ng-template>
  `
})
export class DataTableComponent {
  data = input.required<any[]>();
  rowTemplate = input<TemplateRef<any>>();
}

// 使用 - 传入自定义行模板
@Component({
  template: `
    <ng-template #customRow let-row>
      <td><strong>{{ row.name }}</strong></td>
      <td>{{ row.email }}</td>
      <td><button (click)="edit(row)">Edit</button></td>
    </ng-template>
    <app-data-table [data]="users" [rowTemplate]="customRow" />
  `
})
export class UserPageComponent {}

@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
  transform(value: string, maxLength = 50): string {
    return value.length > maxLength
      ? value.substring(0, maxLength) + '...'
      : value;
  }
}
// 使用: {{ longText | truncate:30 }}

@Injectable({ providedIn: 'root' })
export class TodoStore {
  // State
  private todos = signal<Todo[]>([]);

  // Selectors (只读)
  readonly allTodos = this.todos.asReadonly();
  readonly completedCount = computed(() =>
    this.todos().filter(t => t.completed).length
  );
  readonly pendingCount = computed(() =>
    this.todos().filter(t => !t.completed).length
  );

  // Actions
  addTodo(title: string) {
    this.todos.update(todos => [
      ...todos,
      { id: crypto.randomUUID(), title, completed: false }
    ]);
  }

  toggleTodo(id: string) {
    this.todos.update(todos =>
      todos.map(t => t.id === id ? { ...t, completed: !t.completed } : t)
    );
  }

  removeTodo(id: string) {
    this.todos.update(todos => todos.filter(t => t.id !== id));
  }
}

import { signalStore, withState, withMethods, withComputed, patchState } from '@ngrx/signals';

export const TodoStore = signalStore(
  { providedIn: 'root' },
  withState({ todos: [] as Todo[], loading: false }),
  withComputed(({ todos }) => ({
    completedCount: computed(() => todos().filter(t => t.completed).length),
  })),
  withMethods((store, todoApi = inject(TodoApiService)) => ({
    async loadTodos() {
      patchState(store, { loading: true });
      const todos = await firstValueFrom(todoApi.getAll());
      patchState(store, { todos, loading: false });
    },
    addTodo(title: string) {
      patchState(store, { todos: [...store.todos(), { id: Date.now(), title, completed: false }] });
    },
  }))
);

<!-- 进入视口时加载 -->
@defer (on viewport) {
  <heavy-chart [data]="chartData" />
} @loading (minimum 200ms) {
  <skeleton-loader />
} @placeholder {
  <div style="height: 400px">Chart will appear here</div>
} @error {
  <p>Failed to load chart</p>
}

<!-- 其他触发条件 -->
@defer (on idle) { ... }        <!-- 浏览器空闲时 -->
@defer (on interaction) { ... } <!-- 用户交互时 -->
@defer (on hover) { ... }       <!-- 鼠标悬停时 -->
@defer (on timer(5s)) { ... }   <!-- 5秒后 -->
@defer (when condition) { ... } <!-- 条件为真时 -->

describe('AuthService', () => {
  let service: AuthService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        AuthService,
        provideHttpClient(),
        provideHttpClientTesting(),
      ]
    });
    service = TestBed.inject(AuthService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  it('should login successfully', () => {
    const mockUser = { id: '1', name: 'Alice' };
    service.login({ email: 'a@b.com', password: '123' }).subscribe(user => {
      expect(user).toEqual(mockUser);
    });
    const req = httpMock.expectOne('/api/login');
    expect(req.request.method).toBe('POST');
    req.flush(mockUser);
  });
});

describe('UserCardComponent', () => {
  it('should display user name', async () => {
    await TestBed.configureTestingModule({
      imports: [UserCardComponent]
    }).compileComponents();

    const fixture = TestBed.createComponent(UserCardComponent);
    fixture.componentRef.setInput('user', { name: 'Alice', email: 'a@b.com' });
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toContain('Alice');
  });
});

src/app/
  core/                        # 全局单例 (加载一次)
    services/auth.service.ts
    interceptors/auth.interceptor.ts
    guards/auth.guard.ts
  features/                    # 业务模块 (各自独立)
    user/
      components/
      services/
      user.routes.ts
    order/
      components/
      services/
      order.routes.ts
  shared/                      # 跨模块复用
    components/button/
    pipes/truncate.pipe.ts
    directives/tooltip.directive.ts

apps/
  web-app/                     # 主应用
  admin-app/                   # 管理后台
libs/
  feature-user/                # 用户功能库
  data-access-api/             # API 数据层
  ui-components/               # UI 组件库
  util-validators/             # 工具函数库