Angular

import { signal, computed, effect } from "@angular/core";
// 可写信号 (Writable signal)
const count = signal(0);
// 读取值
console.log(count()); // 0
// 更新值
count.set(5); // 直接设置
count.update((v) => v + 1); // 函数式更新
// 计算信号 (Computed/derived signal)
const doubled = computed(() => count() * 2);
// 效果 (Effect/副作用)
effect(() => {
  console.log(Count changed to: ${count()});
});

import { Component, input, output, model } from "@angular/core";
@Component({
  selector: "app-user-card",
  standalone: true,
  template: 
    <div class="card">
      <h3>{{ name() }}</h3>
      <span>{{ role() }}</span>
      <button (click)="select.emit(id())">Select</button>
    </div>
  ,
})
export class UserCardComponent {
  // Signal 输入 (只读)
  id = input.required<string>();
  name = input.required<string>();
  role = input<string>("User"); // 带默认值
// 输出
  select = output<string>();
// 双向绑定 (model)
  isSelected = model(false);
}
// 使用方式:
// <app-user-card [id]="'123'" [name]="'John'" [(isSelected)]="selected" />

import {
  Component,
  viewChild,
  viewChildren,
  contentChild,
} from "@angular/core";
@Component({
  selector: "app-container",
  standalone: true,
  template: 
    <input #searchInput />
    <app-item *ngFor="let item of items()" />
  ,
})
export class ContainerComponent {
  // 基于 Signal 的查询

### 何时使用 Signals vs RxJS

| 使用场景                | Signals         | RxJS                             |
| ----------------------- | --------------- | -------------------------------- |
| 组件本地状态            | ✅ 推荐          | 过度设计                         |
| 派生/计算值              | ✅ computed() | combineLatest 可实现            |
| 副作用                  | ✅ effect()   | tap 操作符                     |
| HTTP 请求               | ❌              | ✅ HttpClient 返回 Observable |
| 事件流                  | ❌              | ✅ fromEvent 及相关操作符        |
| 复杂异步流               | ❌              | ✅ switchMap, mergeMap       |
---
2. 独立组件 (Standalone Components)
独立组件是自包含的，不需要在 NgModule 中声明。
创建独立组件

### 无 NgModule 引导启动

### 独立组件的懒加载

---

3. 无 Zone 的 Angular (Zoneless Angular)
Zoneless 应用不使用 zone.js，从而提升性能并简化调试。
启用 Zoneless 模式

### Zoneless 组件模式

### Zoneless 的核心优势

性能：异步 API 不再被 zone.js 拦截（patch）
调试：堆栈跟踪更简洁，没有 zone 包装层
包体积：移除 zone.js 后体积更小（节省约 15KB）
互操作性
可扩展性：结合 Web Components 和微前端效果更佳
---
4. 服务端渲染 (SSR) 与注水 (Hydration)
使用 Angular CLI 设置 SSR

### 注水配置

### 渐进式注水 (v20+)

### 注水触发条件

| 触发条件 | 使用场景 |
| :--- | :--- |
| on idle | 低优先级，在浏览器空闲时注水 |
| on viewport | 当元素进入视口时注水 |
| on interaction | 在用户首次交互时注水 |
| on hover | 当用户悬停时注水 |
| on timer(ms) | 在指定延迟后注水 |
---
5. 现代路由模式
函数式路由守卫 (Functional Route Guards)

### 路由级数据解析器 (Route-Level Data Resolvers)

---

6. 依赖注入 (DI) 模式
现代 inject() 函数

### 用于配置的注入令牌 (Injection Tokens)

" }],
});

// 在服务中注入
@Injectable({ providedIn: "root" })
export class ApiService {
  private baseUrl = inject(API_BASE_URL);
get(endpoint: string) {
    return this.http.get(${this.baseUrl}/${endpoint});
  }
}

@Component({
  selector: 'app-card',
  template: 
    <div class="card">
      <div class="header">
        <!-- 通过属性选择 -->
        <ng-content select="[card-header]"></ng-content>
      </div>
      <div class="body">
        <!-- 默认插槽 -->
        <ng-content></ng-content>
      </div>
    </div>
  
})
export class CardComponent {}
// 使用方式
<app-card>
  <h3 card-header>标题</h3>
  <p>正文内容</p>
</app-card>

// 无需继承即可实现可复用行为
@Directive({
  standalone: true,
  selector: '[appTooltip]',
  inputs: ['tooltip'] // Signal input 别名
})
export class TooltipDirective { ... }
@Component({
  selector: 'app-button',
  standalone: true,
  hostDirectives: [
    {
      directive: TooltipDirective,
      inputs: ['tooltip: title'] // 映射输入
    }
  ],
  template: <ng-content />
})
export class ButtonComponent {}

import { Injectable, signal, computed } from "@angular/core";
interface AppState {
  user: User | null;
  theme: "light" | "dark";
  notifications: Notification[];
}
@Injectable({ providedIn: "root" })
export class StateService {
  // 私有可写 signal
  private _user = signal<User | null>(null);
  private _theme = signal<"light" | "dark">("light");
  private _notifications = signal<Notification[]>([]);
// 公开只读 computed
  readonly user = computed(() => this._user());
  readonly theme = computed(() => this._theme());
  readonly notifications = computed(() => this._notifications());
  readonly unreadCount = computed(
    () => this._notifications().filter((n) => !n.read).length,
  );
// 操作方法
  setUser(user: User | null) {
    this._user.set(user);
  }
toggleTheme() {
    this._theme.update((t) => (t === "light" ? "dark" : "light"));
  }
addNotification(notification: Notification) {
    this._notifications.update((n) => [...n, notification]);
  }
}

import { Injectable, signal, computed, inject } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { toSignal } from "@angular/core/rxjs-interop";
@Injectable()
export class ProductStore {
  private http = inject(HttpClient);
// 状态
  private _products = signal<Product[]>([]);
  private _loading = signal(false);
  private _filter = signal("");
// 选择器 (Selectors)
  readonly products = computed(() => this._products());
  readonly loading = computed(() => this._loading());
  readonly filteredProducts = computed(() => {
    const filter = this._filter().toLowerCase();
    return this._products().filter((p) =>
      p.name.toLowerCase().includes(filter),
    );
  });
// 操作方法
  loadProducts() {
    this._loading.set(true);
    this.http.get<Product[]>("/api/products").subscribe({
      next: (products) => {
        this._products.set(products);
        this._loading.set(false);
      },
      error: () => this._loading.set(false),
    });
  }
setFilter(filter: string) {
    this._filter.set(filter);
  }
}

import { Component, inject } from "@angular/core";
import { FormBuilder, Validators, ReactiveFormsModule } from "@angular/forms";
@Component({
  selector: "app-user-form",
  standalone: true,
  imports: [ReactiveFormsModule],
  template: 
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="name" placeholder="Name" />
      <input formControlName="email" type="email" placeholder="Email" />
      <button [disabled]="form.invalid">Submit</button>
    </form>
  ,
})
export class UserFormComponent {
  private fb = inject(FormBuilder);
form = this.fb.group({
    name: ["", Validators.required],
    email: ["", [Validators.required, Validators.email]],
  });
onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

// 未来的 Signal Forms API (实验性)
import { Component, signal } from '@angular/core';
@Component({...})
export class SignalFormComponent {
  name = signal('');
  email = signal('');
// 计算验证状态
  isValid = computed(() =>
    this.name().length > 0 &&
    this.email().includes('@')
  );
submit() {
    if (this.isValid()) {
      console.log({ name: this.name(), email: this.email() });
    }
  }
}

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  // 仅在以下情况检查：
  // 1. Input signal/引用发生变化
  // 2. 事件处理器运行
  // 3. Async 管道发出值
  // 4. Signal 值发生变化
})

@Component({
  template: 
    <!-- 立即加载 -->
    <app-header />
<!-- 进入视口时延迟加载 -->
    @defer (on viewport) {
      <app-heavy-chart />
    } @placeholder {
      <div class="skeleton" />
    } @loading (minimum 200ms) {
      <app-spinner />
    } @error {
      <p>Failed to load chart</p>
    }
  
})

import { NgOptimizedImage } from '@angular/common';
@Component({
  imports: [NgOptimizedImage],
  template: 
    <img
      ngSrc="hero.jpg"
      width="800"
      height="600"
      priority
    />

<img
      ngSrc="thumbnail.jpg"
      width="200"
      height="150"
      loading="lazy"
      placeholder="blur"
    />
  
})

import { ComponentFixture, TestBed } from "@angular/core/testing";
import { CounterComponent } from "./counter.component";
describe("CounterComponent", () => {
  let component: CounterComponent;
  let fixture: ComponentFixture<CounterComponent>;
beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CounterComponent], // 独立组件导入
    }).compileComponents();
fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
it("should increment count", () => {
    expect(component.count()).toBe(0);
component.increment();
expect(component.count()).toBe(1);
  });
it("should update DOM on signal change", () => {
    component.count.set(5);
    fixture.detectChanges();
const el = fixture.nativeElement.querySelector(".count");
    expect(el.textContent).toContain("5");
  });
});

import { ComponentFixture, TestBed } from "@angular/core/