Use when building modular Angular applications requiring dependency injection with providers, injectors, and services.
View on GitHubTheBushidoCollective/han
jutsu-angular
January 24, 2026
Select agents to install to:
npx add-skill https://github.com/TheBushidoCollective/han/blob/main/jutsu/jutsu-angular/skills/angular-dependency-injection/SKILL.md -a claude-code --skill angular-dependency-injectionInstallation paths:
.claude/skills/angular-dependency-injection/# Angular Dependency Injection
Master Angular's dependency injection system for building modular,
testable applications with proper service architecture.
## DI Fundamentals
Angular's DI is hierarchical and uses decorators and providers:
```typescript
import { Injectable } from '@angular/core';
// Service injectable at root level
@Injectable({
providedIn: 'root'
})
export class UserService {
private users: User[] = [];
getUsers(): User[] {
return this.users;
}
addUser(user: User): void {
this.users.push(user);
}
}
// Component injection
import { Component } from '@angular/core';
@Component({
selector: 'app-user-list',
template: `
<div *ngFor="let user of users">
{{ user.name }}
</div>
`
})
export class UserListComponent {
users: User[];
constructor(private userService: UserService) {
this.users = this.userService.getUsers();
}
}
```
## Provider Types
### useClass - Class Provider
```typescript
import { Injectable, Provider } from '@angular/core';
// Interface
interface Logger {
log(message: string): void;
}
// Implementations
@Injectable()
export class ConsoleLogger implements Logger {
log(message: string): void {
console.log(message);
}
}
@Injectable()
export class FileLogger implements Logger {
log(message: string): void {
// Write to file
}
}
// Provider configuration
const loggerProvider: Provider = {
provide: Logger,
useClass: ConsoleLogger // or FileLogger based on env
};
// In module
@NgModule({
providers: [loggerProvider]
})
export class AppModule {}
// Usage
export class MyComponent {
constructor(private logger: Logger) {
this.logger.log('Component initialized');
}
}
```
### useValue - Value Provider
```typescript
import { InjectionToken } from '@angular/core';
// Configuration object
export interface AppConfig {
apiUrl: string;
timeout: number;
retries: number;
}
export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');
// Provider
co