mcpField
A
angular-services

angular-services

github.com/oguzhan18Development7193 installsUpdated 31w ago
Repository

About angular-services

A reference skill for Angular developers building services and using dependency injection. It covers service registration, inject(), factory providers, lazy services, and shared state.

Key features

  1. 01Register services with providedIn
  2. 02Inject dependencies with inject()
  3. 03Configure factory providers
  4. 04Set up lazy services
  5. 05Share state through services

Use cases

  1. 01Creating an application-wide data service
  2. 02Injecting HTTP or routing dependencies
  3. 03Configuring a logger with a factory provider
  4. 04Sharing cart state across components

Install

Copy the command and run it in a terminal.

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

After installing, type/angular-servicesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project README

Angular Services

Version: Angular 21 (2025) Tags: Services, @Injectable, DI

References: Services Guide • @Injectable API

Best Practices

  • Create service with providedIn
@Injectable({ providedIn: 'root' })
export class DataService {
  getData() {
    return this.http.get('/api/data');
  }
}
  • Use inject() function
@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);
  
  getUsers() {
    return this.http.get<User[]>('/api/users');
  }
}
  • Use factory providers
@Injectable({
  providedIn: 'root',
  useFactory: () => new LoggerService(environment.production)
})
export class LoggerService {
  constructor(private isProduction: boolean) {}
}
  • Use providedIn: 'any' for lazy services
@Injectable({ providedIn: 'any' })
export class LazyService {}
  • Use service in component
@Component({})
export class MyComponent {
  private dataService = inject(DataService);
  
  data$ = this.dataService.getData();
}
  • Use multiple services
@Component({})
export class MyComponent {
  private auth = inject(AuthService);
  private http = inject(HttpClient);
  private router = inject(Router);
}
  • Use service for shared state
@Injectable({ providedIn: 'root' })
export class CartService {
  private items = signal<Item[]>([]);
  
  cartItems = this.items.asReadonly();
  
  addItem(item: Item) {
    this.items.update(items => [...items, item]);
  }
}

Comments

Markdown supported