mcpField
A
angular-services

angular-services

github.com/oguzhan18开发7193 次安装31 周前更新
代码仓库

关于 angular-services

面向 Angular 开发者的服务与依赖注入参考技能，介绍服务注册、inject()、工厂提供者、延迟服务和共享状态。

主要功能

  1. 01使用 providedIn 注册服务
  2. 02通过 inject() 注入依赖
  3. 03配置工厂提供者
  4. 04设置延迟服务
  5. 05通过服务共享状态

适用场景

  1. 01创建应用级数据服务
  2. 02注入 HTTP 或路由依赖
  3. 03使用工厂提供者配置日志服务
  4. 04在组件间共享购物车状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-services

安装后在 Claude Code 中输入/angular-services确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

Angular 服务

版本： Angular 21（2025） 标签： Services、@Injectable、DI

参考： 服务指南 • @Injectable API

最佳实践

  • 使用 providedIn 创建服务
@Injectable({ providedIn: 'root' })
export class DataService {
  getData() {
    return this.http.get('/api/data');
  }
}
  • 使用 inject() 函数
@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);
  
  getUsers() {
    return this.http.get<User[]>('/api/users');
  }
}
  • 使用工厂提供程序
@Injectable({
  providedIn: 'root',
  useFactory: () => new LoggerService(environment.production)
})
export class LoggerService {
  constructor(private isProduction: boolean) {}
}
  • 懒加载服务使用 providedIn: 'any'
@Injectable({ providedIn: 'any' })
export class LazyService {}
  • 在组件中使用服务
@Component({})
export class MyComponent {
  private dataService = inject(DataService);
  
  data$ = this.dataService.getData();
}
  • 使用多个服务
@Component({})
export class MyComponent {
  private auth = inject(AuthService);
  private http = inject(HttpClient);
  private router = inject(Router);
}
  • 使用服务管理共享状态
@Injectable({ providedIn: 'root' })
export class CartService {
  private items = signal<Item[]>([]);
  
  cartItems = this.items.asReadonly();
  
  addItem(item: Item) {
    this.items.update(items => [...items, item]);
  }
}

评论

支持 Markdown