Agentic Awesome Skills 之 Angular Expert基于 Signals、Standalone 与 Zoneless 的现代 Angular v20 开发全指南【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址: https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills本指南以仓库内angular技能的完整知识体系为主体系统讲解现代 Angularv20开发的六大核心支柱——Signals 细粒度响应式、Standalone 组件架构、无 Zone.jsZoneless应用、SSR/Hydration 服务端渲染、函数式路由与依赖注入以及信号驱动的状态管理与测试。读完本文你将掌握从零搭建现代 Angular 应用、将旧式 NgModule 应用渐进迁移、以及完成性能优化与可测试性改造的完整实战方案。技能定位何时使用与何时回避仓库中的angular技能SKILL.md被定位为 Modern Angular (v20) expert在技能目录 catalog.json 中登记为web-development分类、风险等级safe、来源self其触发词triggers覆盖signals、standalone、zoneless、ssr、hydration、reactive等主题便于 Agent 在任务匹配时自动激活。该技能明确划定了使用边界适合使用构建新的 Angular 应用v20实现 Signals 响应式模式创建 Standalone 组件并从 NgModules 迁移配置 Zoneless 应用实现 SSR、预渲染与水合hydration优化 Angular 性能采纳现代 Angular 模式与最佳实践。不适合使用从 AngularJS1.x迁移应使用angular-migration技能无法升级的遗留 Angular 应用通用 TypeScript 问题应使用typescript-expert技能。技能同时声明了安全约束所有改动必须在生产环境前于开发环境测试既有应用应采用渐进式迁移而非一次性大爆炸式重构过渡期间保持向后兼容。其完整操作程序与参考材料沉淀在 references/detailed-guide.md 中技能元数据版本 1.0.0、组织归属、主题摘要可查看 metadata.json。Angular 版本时间线理解 v20 的上下文在执行任何现代 Angular 开发前先确认项目所处版本。技能提供了如下版本演进脉络版本发布时间关键特性Angular 202025 Q2Signals 稳定、Zoneless 稳定、增量水合Incremental hydrationAngular 212025 Q4Signals-first 成为默认、SSR 增强Angular 222026 Q2Signal Forms、无选择器组件Selectorless components据此本文所有模式均以 v20 为基线Signals 已是稳定 API 而非实验特性Zoneless 可直接启用defer增量水合可用于生产。Signals新的细粒度响应式原语Signals 是 Angular 的细粒度响应式系统取代了基于 zone.js 的全局变更检测。它的核心价值在于只有读取了某个 signal 的模板与计算才会在其变化时被重新求值从而将变更检测从全树扫描收敛为精确追踪。核心概念signal / computed / effectimport { signal, computed, effect } from angular/core; // 可写 signal const count signal(0); // 读取值 console.log(count()); // 0 // 更新值 count.set(5); // 直接赋值 count.update((v) v 1); // 函数式更新 // 计算派生signal const doubled computed(() count() * 2); // 副作用 effect(() { console.log(Count changed to: ${count()}); });使用要点signal()创建可写状态computed()基于其他 signal 惰性派生值仅在依赖变化且被读取时重算effect()用于需要对外部世界产生副作用的场景如日志、与第三方库同步不要在computed中执行副作用。基于 Signal 的输入与输出v20 中Input()/Output()装饰器让位于函数式input()/output()/model()import { Component, input, output, model } from angular/core; Component({ selector: app-user-card, standalone: true, template: div classcard h3{{ name() }}/h3 span{{ role() }}/span button (click)select.emit(id())Select/button /div , }) export class UserCardComponent { // Signal 输入只读 id input.requiredstring(); name input.requiredstring(); role inputstring(User); // 带默认值 // 输出 select outputstring(); // 双向绑定model isSelected model(false); } // 用法 // app-user-card [id]123 [name]John [(isSelected)]selected /input.required()强制父组件必须传入该输入缺省时在开发模式会报错model()提供[(isSelected)]语法糖等价于手动实现inputoutput的配对。Signal 查询ViewChild / ContentChild模板查询同样演进为信号 APIimport { Component, viewChild, viewChildren, contentChild, } from angular/core; Component({ selector: app-container, standalone: true, template: input #searchInput / app-item *ngForlet item of items() / , }) export class ContainerComponent { // 基于 Signal 的查询 searchInput viewChildElementRef(searchInput); items viewChildren(ItemComponent); projectedContent contentChild(HeaderDirective); focusSearch() { this.searchInput()?.nativeElement.focus(); } }Signals 与 RxJS 的选择使用场景SignalsRxJS本地组件状态✅ 首选过度设计派生/计算值✅computed()combineLatest可行副作用✅effect()tap操作符HTTP 请求❌✅ HttpClient 返回 Observable事件流❌✅fromEvent、操作符复杂异步流程❌✅switchMap、mergeMap经验法则信号管状态RxJS 管事件与异步流。HttpClient、DOM 事件、复杂的异步编排仍属于 RxJS 的主场两者通过toSignal()/toObservable()angular/core/rxjs-interop无缝互转。Standalone 组件无 NgModule 的现代架构Standalone 组件自包含无需在 NgModule 中声明即可独立编译与复用。创建 Standalone 组件import { Component } from angular/core; import { CommonModule } from angular/common; import { RouterLink } from angular/router; Component({ selector: app-header, standalone: true, imports: [CommonModule, RouterLink], // 直接导入 template: header a routerLink/Home/a a routerLink/aboutAbout/a /header , }) export class HeaderComponent {}依赖以imports数组直接声明所见即所得SharedModule 这类捆绑式模块成为反模式。无 NgModule 启动应用// main.ts import { bootstrapApplication } from angular/platform-browser; import { provideRouter } from angular/router; import { provideHttpClient } from angular/common/http; import { AppComponent } from ./app/app.component; import { routes } from ./app/app.routes; bootstrapApplication(AppComponent, { providers: [provideRouter(routes), provideHttpClient()], });所有应用级能力路由、HTTP、zoneless、水合等统一通过providers中的provide*函数注册配置点收敛、可预测。懒加载 Standalone 组件// app.routes.ts import { Routes } from angular/router; export const routes: Routes [ { path: dashboard, loadComponent: () import(./dashboard/dashboard.component).then( (m) m.DashboardComponent, ), }, { path: admin, loadChildren: () import(./admin/admin.routes).then((m) m.ADMIN_ROUTES), }, ];loadComponent按需加载单个组件loadChildren按需加载整组路由两者都是削减首屏 bundle 的关键手段。Zoneless Angular告别 zone.jsZoneless 应用不使用 zone.js直接由 Signals 驱动变更检测从而带来性能与调试体验的双重提升。启用 Zoneless 模式// main.ts import { bootstrapApplication } from angular/platform-browser; import { provideZonelessChangeDetection } from angular/core; import { AppComponent } from ./app/app.component; bootstrapApplication(AppComponent, { providers: [provideZonelessChangeDetection()], });只需替换provideZoneChangeDetection或省略 zone 相关 provider 并移除 polyfill即可开启。Zoneless 组件模式import { Component, signal, ChangeDetectionStrategy } from angular/core; Component({ selector: app-counter, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: divCount: {{ count() }}/div button (click)increment()/button , }) export class CounterComponent { count signal(0); increment() { this.count.update((v) v 1); // 无需 zone.js —— Signal 自动触发变更检测 } }Zoneless 的核心收益性能不再为异步 API 打 zone.js 补丁调试干净的调用栈没有 zone 包装层干扰包体积去掉 zone.js 可减少约 15KB互操作性与 Web Components、微前端协同更顺畅。需要注意的边界Zoneless 下任何状态变更都必须通过 signal 更新驱动而非对象原地变异否则不会触发检测遗留代码中依赖 zone 隐式触发的模式需要显式改写。SSR 与 Hydration服务端渲染与客户端水合用 Angular CLI 启用 SSRng add angular/ssr水合配置// app.config.ts import { ApplicationConfig } from angular/core; import { provideClientHydration, withEventReplay, } from angular/platform-browser; export const appConfig: ApplicationConfig { providers: [provideClientHydration(withEventReplay())], };provideClientHydration让服务端渲染的 DOM 在客户端复用而非重建withEventReplay()负责回放 SSR 期间丢失的用户交互事件避免首屏点击丢失。增量水合v20增量水合通过defer的hydrate触发条件将水合工作按需拆分import { Component } from angular/core; Component({ selector: app-page, standalone: true, template: app-hero / defer (hydrate on viewport) { app-comments / } defer (hydrate on interaction) { app-chat-widget / } , }) export class PageComponent {}水合触发条件速查触发条件适用场景on idle低优先级浏览器空闲时水合on viewport元素进入视口时水合on interaction首次用户交互时水合on hover用户悬停时水合on timer(ms)指定延迟后水合选择原则用户越可能先接触的部分越早水合评论、聊天等低频交互组件延迟到交互前一刻可显著摊薄首屏水合成本。现代路由模式函数式守卫与解析器函数式路由守卫// auth.guard.ts import { inject } from angular/core; import { Router, CanActivateFn } from angular/router; import { AuthService } from ./auth.service; export const authGuard: CanActivateFn (route, state) { const auth inject(AuthService); const router inject(Router); if (auth.isAuthenticated()) { return true; } return router.createUrlTree([/login], { queryParams: { returnUrl: state.url }, }); }; // 在路由中使用 export const routes: Routes [ { path: dashboard, loadComponent: () import(./dashboard.component), canActivate: [authGuard], }, ];函数式守卫CanActivateFn取代了旧式类守卫配合inject()在函数体内直接获取依赖代码更简洁且天然支持 tree-shaking。返回UrlTree而非false可保留原始目标地址便于登录后回跳。路由级数据解析器import { inject } from angular/core; import { ResolveFn } from angular/router; import { UserService } from ./user.service; import { User } from ./user.model; export const userResolver: ResolveFnUser (route) { const userService inject(UserService); return userService.getUser(route.paramMap.get(id)!); }; // 在路由中使用 { path: user/:id, loadComponent: () import(./user.component), resolve: { user: userResolver } } // 在组件中消费 export class UserComponent { private route inject(ActivatedRoute); user toSignal(this.route.data.pipe(map(d d[user]))); }解析器在组件实例化前完成数据预取配合toSignal()将route.data中的 Observable 转为 signal 供模板同步消费是数据就绪再渲染的标准写法。依赖注入模式现代 inject() 与 InjectionToken函数式 inject()import { Component, inject } from angular/core; import { HttpClient } from angular/common/http; import { UserService } from ./user.service; Component({...}) export class UserComponent { // 现代 inject() —— 无需构造函数 private http inject(HttpClient); private userService inject(UserService); // 适用于任何注入上下文 users toSignal(this.userService.getUsers()); }字段初始化时即可注入并派生状态消除了构造函数参数列表的样板代码也让类字段级初始化与响应式派生更自然。用 InjectionToken 承载配置import { InjectionToken, inject } from angular/core; // 定义 token export const API_BASE_URL new InjectionTokenstring(API_BASE_URL); // 在配置中提供 bootstrapApplication(AppComponent, { providers: [{ provide: API_BASE_URL, useValue: https://api.example.com }], }); // 在服务中注入 Injectable({ providedIn: root }) export class ApiService { private baseUrl inject(API_BASE_URL); get(endpoint: string) { return this.http.get(${this.baseUrl}/${endpoint}); } }将环境相关的配置API 地址、特性开关等抽象为 InjectionToken业务代码与具体环境解耦测试时也可轻松覆盖。组件组合与复用内容投影与 Host Directives内容投影插槽Component({ selector: app-card, template: div classcard div classheader !-- 按属性选择 -- ng-content select[card-header]/ng-content /div div classbody !-- 默认插槽 -- ng-content/ng-content /div /div }) export class CardComponent {} // 用法 app-card h3 card-headerTitle/h3 pBody content/p /app-cardng-content的select属性支持按元素、属性或 CSS 选择器将投影内容路由到多个插槽未匹配select的内容落入默认插槽。Host Directives行为组合// 可复用行为无需继承 Directive({ standalone: true, selector: [appTooltip], inputs: [tooltip] // Signal 输入别名 }) export class TooltipDirective { ... } Component({ selector: app-button, standalone: true, hostDirectives: [ { directive: TooltipDirective, inputs: [tooltip: title] // 映射输入 } ], template: ng-content / }) export class ButtonComponent {}Host Directives 允许组件组合指令能力app-button通过hostDirectives直接获得 Tooltip 行为inputs: [tooltip: title]将宿主组件的title输入透传给内部指令实现跨组件复用公共行为而无需多重继承。状态管理模式Signal 驱动的服务与组件 Store基于 Signal 的状态服务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 signalUser | null(null); private _theme signallight | dark(light); private _notifications signalNotification[]([]); // 公开只读 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]); } }核心模式私有可写 signal 公开只读 computed 显式动作方法。外部只能通过动作方法改状态杜绝随意原地变异派生状态如unreadCount自动随源数据更新。组件 Store 模式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 signalProduct[]([]); private _loading signal(false); private _filter signal(); // 选择器 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.getProduct[](/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); } }这是组件局部状态的轻量方案状态、派生选择器含过滤逻辑与异步动作封装于单一 store 类组件注入后通过filteredProducts直接渲染测试时注入真实或 mock 的 HttpClient 即可。表单当前 Reactive Forms 与 Signal Forms 预览当前推荐Reactive Formsimport { 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 formControlNamename placeholderName / input formControlNameemail typeemail placeholderEmail / button [disabled]form.invalidSubmit/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); } } }v22 之前的生产实践中Reactive Forms 仍是类型安全的表单标准方案FormBuilder.group内联声明控件与校验规则form.invalid驱动提交按钮禁用状态。Signal 感知表单模式预览// 未来 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() }); } } }这展示了技能对 v22 Signal Forms 的前瞻以 signal 承载字段值、以computed实现声明式校验。作为预览模式落地前应核实所用 Angular 版本对 Signal Forms 的支持程度。性能优化变更检测、Defer 与 NgOptimizedImage变更检测策略Component({ changeDetection: ChangeDetectionStrategy.OnPush, // 仅在以下情况触发检查 // 1. 输入 signal/引用变化 // 2. 事件处理器执行 // 3. Async pipe 发射值 // 4. Signal 值变化 })OnPush 将组件从全局轮询中摘出只在明确信号驱动时自检是现代 Angular 性能基线的第一道闸门。Defer 块实现懒加载Component({ template: !-- 立即加载 -- app-header / !-- 可见时懒加载 -- defer (on viewport) { app-heavy-chart / } placeholder { div classskeleton / } loading (minimum 200ms) { app-spinner / } error { pFailed to load chart/p } })defer块提供完整的加载态编排placeholder展示占位骨架、loading (minimum 200ms)避免闪烁、error兜底失败场景。重型图表、视频播放器等按视口进入时机加载。NgOptimizedImageimport { NgOptimizedImage } from angular/common; Component({ imports: [NgOptimizedImage], template: img ngSrchero.jpg width800 height600 priority / img ngSrcthumbnail.jpg width200 height150 loadinglazy placeholderblur / })ngSrc替代src启用 Angular 图像优化管线priority标记 LCP 首屏图、loadinglazy延迟非首屏图、placeholderblur提供模糊占位width/height声明可防止布局偏移CLS。测试现代 AngularSignal 组件与输入测试 Signal 组件import { ComponentFixture, TestBed } from angular/core/testing; import { CounterComponent } from ./counter.component; describe(CounterComponent, () { let component: CounterComponent; let fixture: ComponentFixtureCounterComponent; beforeEach(async () { await TestBed.configureTestingModule({ imports: [CounterComponent], // Standalone 直接导入 }).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); }); });Standalone 组件可直接放入TestBed.configureTestingModule({ imports: [...] })无需声明任何 NgModulesignal 状态可被断言读取也可直接count.set(5)驱动 DOM 断言。测试 Signal 输入组件import { ComponentFixture, TestBed } from angular/core/testing; import { ComponentRef } from angular/core; import { UserCardComponent } from ./user-card.component; describe(UserCardComponent, () { let fixture: ComponentFixtureUserCardComponent; let componentRef: ComponentRefUserCardComponent; beforeEach(async () { await TestBed.configureTestingModule({ imports: [UserCardComponent], }).compileComponents(); fixture TestBed.createComponent(UserCardComponent); componentRef fixture.componentRef; // 通过 setInput 设置 signal 输入 componentRef.setInput(id, 123); componentRef.setInput(name, John Doe); fixture.detectChanges(); }); it(should display user name, () { const el fixture.nativeElement.querySelector(h3); expect(el.textContent).toContain(John Doe); }); });ComponentRef.setInput()是测试 signal 输入的官方入口等价于父组件模板中的属性绑定[name]John Doe让单元测试无需渲染父组件即可验证输入渲染逻辑。最佳实践总结模式✅ 应做❌ 不应做状态本地状态使用 Signals简单状态滥用 RxJS组件Standalone 直接导入臃肿的 SharedModule变更检测OnPush Signals全局默认 CD懒加载defer与loadComponent全部急切加载DIinject()函数构造函数注入冗长输入input()信号函数Input()装饰器遗留Zoneless新项目启用遗留项目未经测试强行开启常见故障排查问题解决方案Signal 未更新 UI确认OnPush并以函数形式调用 signalcount()水合不匹配检查服务端与客户端内容一致性循环依赖使用inject()搭配forwardRefZoneless 未检测到变化通过 signal 更新触发而非对象原地变异SSR 数据获取失败使用TransferState或withFetch()在仓库中继续深入本指南的主体内容来自angular技能的完整知识库读者可在仓库中继续深入技能入口与激活条件plugins/agentic-awesome-skills-claude/skills/angular/SKILL.md完整操作程序与全部代码参考plugins/agentic-awesome-skills-claude/skills/angular/references/detailed-guide.md技能结构说明与版本信息plugins/agentic-awesome-skills-claude/skills/angular/README.md技能元数据版本、组织、主题摘要plugins/agentic-awesome-skills-claude/skills/angular/metadata.json技能目录索引分类、风险等级、触发词data/catalog.json同一技能的另一个分发版本位于 plugins/agentic-awesome-skills/skills/angular/与 claude 版本内容一致仓库内还有angular-best-practices、angular-migration、angular-state-management、angular-ui-patterns等相邻技能分别覆盖性能最佳实践、AngularJS 迁移、状态管理选型与 UI 模式可在实际任务中按需组合调用。技能正文中涉及的 Signals、Zoneless、SSR 等主题均以 Angular 官方文档为参考基准落地实现时请结合所使用 Angular 版本核对 API 可用性并始终遵循本文开篇的安全约束——先测试、再上线遗留系统渐进迁移。【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址: https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
