Dependency Injection in Angular

Transcript

1. Dependency Injection in Angular Marko Stanimirović
2. Marko Stanimirović @MarkoStDev ★ Sr. Frontend Engineer at JobCloud ★ NgRx Core Team Member ★ Angular Belgrade Organizer ★ Hobby Musician
3. Marko Stanimirović @MarkoStDev ★ Sr. Frontend Engineer at JobCloud ★ NgRx Core Team Member ★ Angular Belgrade Organizer ★ Hobby Musician ★ Google Developer Expert in Angular
4. What is Dependency Injection?
5. “DI is a design pattern that makes an object independent of its dependencies by decoupling its usage from its creation.”
6. Improves testability, scalability and maintainability Reduces tight coupling
7. class UsersService { private usersResource = new HttpUsersResource(); private logger = new ServerLogger(); } Without Dependency Injection
8. class UsersService { private usersResource = new HttpUsersResource(); private logger = new ServerLogger(); } Tightly coupled Without Dependency Injection
9. class UsersService { constructor( private usersResource: UsersResource, private logger: Logger ) {} } With Dependency Injection
10. class UsersService { constructor( private usersResource: UsersResource, private logger: Logger ) {} } With Dependency Injection Loosely coupled
11. Injection Scopes in Angular
12. Injection Scopes in Standalone Angular Apps
13. Injection Scopes in Standalone Angular Apps Root
14. Injection Scopes in Standalone Angular Apps Route Root
15. Injection Scopes in Standalone Angular Apps Element Route Root (Component / Directive)
16. Root Providers
17. Providing Service at the Root Level - #1 Way class UsersService { ./ ... }
18. Providing Service at the Root Level - #1 Way @Injectable({ providedIn: 'root' }) class UsersService { ./ ... }
19. Providing Service at the Root Level - #1 Way @Injectable({ providedIn: 'root' }) class UsersService { ./ ... } @Component(** **. */) class UserDetailsComponent { constructor(private usersService: UsersService) {} }
20. Providing Service at the Root Level - #2 Way @Injectable() class UsersService { ./ ... } bootstrapApplication(AppComponent, { providers: [UsersService], });
21. Route Providers
22. Providing Service at the Route Level const userRoutes: Route[] = [ { path: '', component: UsersShellComponent, children: [ { path: '', component: UserListComponent }, { path: ':id', component: UserDetailsComponent }, ], }, ];
23. Providing Service at the Route Level const userRoutes: Route[] = [ { path: '', component: UsersShellComponent, providers: [UsersService], children: [ { path: '', component: UserListComponent }, { path: ':id', component: UserDetailsComponent }, ], }, ];
24. Providing Service at the Route Level const userRoutes: Route[] = [ { path: '', component: UsersShellComponent, providers: [UsersService], children: [ { path: '', component: UserListComponent }, { path: ':id', component: UserDetailsComponent }, ], }, ];
25. Element Providers
26. Providing Service at the Component Level @Component({ selector: 'app-user-details', standalone: true, template: ` <app-user-form [user]="usersService.activeUser"> ./app-user-form> <ng-content>./ng-content> `, imports: [UserFormComponent], }) class UserDetailsComponent { constructor(readonly usersService: UsersService) {} }
27. Providing Service at the Component Level @Component({ selector: 'app-user-details', standalone: true, template: ` <app-user-form [user]="usersService.activeUser"> ./app-user-form> <ng-content>./ng-content> `, providers: [UsersService], imports: [UserFormComponent], }) class UserDetailsComponent { constructor(readonly usersService: UsersService) {} }
28. Providing Service at the Component Level @Component({ selector: 'app-user-details', standalone: true, template: ` <app-user-form [user]="usersService.activeUser"> ./app-user-form> <ng-content>./ng-content> `, providers: [UsersService], imports: [UserFormComponent], }) class UserDetailsComponent { constructor(readonly usersService: UsersService) {} }
29. Providing Service at the Component Level @Component({ selector: 'app-user-details', standalone: true, template: ` <app-user-form [user]="usersService.activeUser"> ./app-user-form> <ng-content>./ng-content> `, viewProviders: [UsersService], imports: [UserFormComponent], }) class UserDetailsComponent { constructor(readonly usersService: UsersService) {} }
30. Providing Service at the Component Level @Component({ selector: 'app-user-details', standalone: true, template: ` <app-user-form [user]="usersService.activeUser"> ./app-user-form> <ng-content>./ng-content> `, viewProviders: [UsersService], imports: [UserFormComponent], }) class UserDetailsComponent { constructor(readonly usersService: UsersService) {} }
31. Dependency Resolution in Angular
32. Element Injector viewProviders @Inject(UsersService) providers UserDetailsComponent
33. Element Injector viewProviders @Inject(UsersService) providers UserDetailsComponent
34. Element Injector viewProviders @Inject(UsersService) providers UserDetailsComponent
35. Element Injector viewProviders @Inject(UsersService) providers Element Injector viewProviders providers AppComponent UserDetailsComponent
36. Element Injector viewProviders @Inject(UsersService) providers Element Injector viewProviders providers AppComponent UserDetailsComponent
37. Element Injector viewProviders @Inject(UsersService) providers Element Injector viewProviders providers AppComponent Route Injector providers UserDetailsComponent
38. Element Injector viewProviders @Inject(UsersService) providers Root Injector providers Element Injector viewProviders providers AppComponent Route Injector providers UserDetailsComponent
39. Element Injector viewProviders @Inject(UsersService) providers Root Injector providers Element Injector viewProviders providers AppComponent Route Injector providers UserDetailsComponent
40. Resolution Modifiers
41. Optional Modifier
42. Optional Modifier @Component(** **. */) class UserDetailsComponent { constructor(@Optional() private usersService.: UsersService) {} }
43. Optional Modifier @Component(** **. */) class UserDetailsComponent { constructor(@Optional() private usersService.: UsersService) {} } Element Injector viewProviders providers UserDetailsComponent @Optional() @Inject(UsersService)
44. Optional Modifier @Component(** **. */) class UserDetailsComponent { constructor(@Optional() private usersService.: UsersService) {} } Element Injector viewProviders providers UserDetailsComponent Element Injector viewProviders providers AppComponent Route Injector providers Root Injector providers @Optional() @Inject(UsersService) null
45. SkipSelf Modifier
46. SkipSelf Modifier @Component(** **. */) class UserDetailsComponent { constructor(@SkipSelf() private usersService: UsersService) {} }
47. SkipSelf Modifier @Component(** **. */) class UserDetailsComponent { constructor(@SkipSelf() private usersService: UsersService) {} } Element Injector viewProviders providers UserDetailsComponent Element Injector viewProviders providers AppComponent Route Injector providers Root Injector providers @SkipSelf() @Inject(UsersService) search starts here
48. Self Modifier @Component(** **. */) class UserDetailsComponent { constructor(@Self() private usersService: UsersService) {} }
49. Self Modifier @Component(** **. */) class UserDetailsComponent { constructor(@Self() private usersService: UsersService) {} } Element Injector viewProviders providers UserDetailsComponent @Self() @Inject(UsersService)
50. Self Modifier @Component(** **. */) class UserDetailsComponent { constructor(@Self() private usersService: UsersService) {} } Element Injector viewProviders providers UserDetailsComponent @Self() @Inject(UsersService)
51. Host Modifier @Component(** **. */) class UserDetailsComponent { constructor(@Host() private usersService: UsersService) {} }
52. Host Modifier @Component(** **. */) class UserDetailsComponent { constructor(@Host() private usersService: UsersService) {} } Element Injector viewProviders providers UserDetailsComponent @Host() @Inject(UsersService)
53. Host Modifier @Component(** **. */) class UserDetailsComponent { constructor(@Host() private usersService: UsersService) {} } Element Injector viewProviders providers UserDetailsComponent @Host() @Inject(UsersService)
54. Host Modifier @Component(** **. */) class UserDetailsComponent { constructor(@Host() private usersService: UsersService) {} } Element Injector viewProviders providers UserDetailsComponent @Host() @Inject(UsersService) Element Injector viewProviders providers AppComponent
55. Host Modifier @Component(** **. */) class UserDetailsComponent { constructor(@Host() private usersService: UsersService) {} } Element Injector viewProviders providers UserDetailsComponent @Host() @Inject(UsersService) Element Injector viewProviders providers AppComponent
56. Injection Tokens
57. Creating Injection Token const APP_THEME = new InjectionToken<'light' | 'dark'>('Application Theme');
58. Creating Injection Token const APP_THEME = new InjectionToken<'light' | 'dark'>('Application Theme'); constant value type description
59. Providing Injection Token const APP_THEME = new InjectionToken<'light' | 'dark'>('Application Theme'); bootstrapApplication(AppComponent, { providers: [ ], }); providing at the root level
60. Providing Injection Token const APP_THEME = new InjectionToken<'light' | 'dark'>('Application Theme'); bootstrapApplication(AppComponent, { providers: [APP_THEME ], });
61. Providing Injection Token const APP_THEME = new InjectionToken<'light' | 'dark'>('Application Theme'); bootstrapApplication(AppComponent, { providers: [{ }], });
62. Providing Injection Token const APP_THEME = new InjectionToken<'light' | 'dark'>('Application Theme'); bootstrapApplication(AppComponent, { providers: [{ provide: APP_THEME }], });
63. Providing Injection Token const APP_THEME = new InjectionToken<'light' | 'dark'>('Application Theme'); bootstrapApplication(AppComponent, { providers: [{ provide: APP_THEME, useValue: 'light' }], });
64. Providing Injection Token const APP_THEME = new InjectionToken<'light' | 'dark'>('Application Theme'); bootstrapApplication(AppComponent, { providers: [{ provide: APP_THEME, useFactory: appThemeFactory }], }); function appThemeFactory() { return localStorage.getItem('theme') .? 'light'; }
65. Injecting Injection Token const APP_THEME = new InjectionToken<'light' | 'dark'>('Application Theme'); bootstrapApplication(AppComponent, { providers: [{ provide: APP_THEME, useFactory: appThemeFactory }], }); @Component(** **. */) class SideMenuComponent { constructor( ) {} }
66. Injecting Injection Token const APP_THEME = new InjectionToken<'light' | 'dark'>('Application Theme'); bootstrapApplication(AppComponent, { providers: [{ provide: APP_THEME, useFactory: appThemeFactory }], }); @Component(** **. */) class SideMenuComponent { constructor(@Inject(APP_THEME) theme: 'light' | 'dark') {} }
67. Providing Injection Token - Tree Shakeable Way const APP_THEME = new InjectionToken('Application Theme', { });
68. Providing Injection Token - Tree Shakeable Way const APP_THEME = new InjectionToken('Application Theme', { providedIn: 'root', factory: () .> localStorage.getItem('theme') .? 'light', });
69. Providing Injection Token - Tree Shakeable Way const APP_THEME = new InjectionToken('Application Theme', { providedIn: 'root', factory: () .> localStorage.getItem('theme') .? 'light', }); @Component(** **. */) class SideMenuComponent { constructor(@Inject(APP_THEME) theme: 'light' | 'dark') {} }
70. inject Function
71. Constructor-Based DI vs inject @Component({ ** **. */ }) export class UserDetailsComponent { constructor( private usersService: UsersService, private route: ActivatedRoute ) {} }
72. Constructor-Based DI vs inject @Component({ ** **. */ }) export class UserDetailsComponent { constructor( private usersService: UsersService, private route: ActivatedRoute ) {} } @Component({ ** **. */ }) export class UserDetailsComponent { private usersService = inject(UsersService); private route = inject(ActivatedRoute); }
73. Constructor-Based DI vs inject @Component({ ** **. */ }) export class UserDetailsComponent { constructor( private usersService: UsersService, private route: ActivatedRoute ) {} } @Component({ ** **. */ }) export class UserDetailsComponent { private usersService = inject(UsersService); private route = inject(ActivatedRoute); } token
74. Resolution Modifiers with inject @Component({ ** **. */ }) export class UserDetailsComponent { private usersService = inject(UsersService, { self: true, optional: true }); }
75. Resolution Modifiers with inject @Component({ ** **. */ }) export class UserDetailsComponent { private usersService = inject(UsersService, { self: true, optional: true }); } config
76. Factories with inject
77. Factories with inject const ID_ROUTE_PARAM = new InjectionToken('ID Route Parameter Observable', { factory() { }, });
78. Factories with inject const ID_ROUTE_PARAM = new InjectionToken('ID Route Parameter Observable', { factory() { const route = inject(ActivatedRoute); }, });
79. Factories with inject const ID_ROUTE_PARAM = new InjectionToken('ID Route Parameter Observable', { factory() { const route = inject(ActivatedRoute); return route.params.pipe( map((params) .> params['id']), filter(Boolean), distinctUntilChanged() ); }, });
80. Base Classes with inject
81. Base Classes with Constructor-Based DI abstract class EntityResource<T extends { id: string }> { ./ ... }
82. Base Classes with Constructor-Based DI abstract class EntityResource<T extends { id: string }> { protected constructor( protected http: HttpClient, protected apiUrl: string, protected uri: string ) {} ./ ... }
83. Base Classes with Constructor-Based DI abstract class EntityResource<T extends { id: string }> { protected constructor( protected http: HttpClient, protected apiUrl: string, protected uri: string ) {} ./ ... } @Injectable({ providedIn: 'root' }) class UsersResource extends EntityResource<User> { }
84. Base Classes with Constructor-Based DI abstract class EntityResource<T extends { id: string }> { protected constructor( protected http: HttpClient, protected apiUrl: string, protected uri: string ) {} ./ ... } @Injectable({ providedIn: 'root' }) class UsersResource extends EntityResource<User> { constructor( http: HttpClient, @Inject(API_URL) apiUrl: string ) { super(http, apiUrl, 'users'); } }
85. Base Classes with inject abstract class EntityResource<T extends { id: string }> { ./ ... }
86. Base Classes with inject abstract class EntityResource<T extends { id: string }> { protected http = inject(HttpClient); protected apiUrl = inject(API_URL); protected constructor(protected uri: string) {} ./ ... }
87. Base Classes with inject abstract class EntityResource<T extends { id: string }> { protected http = inject(HttpClient); protected apiUrl = inject(API_URL); protected constructor(protected uri: string) {} ./ ... } @Injectable({ providedIn: 'root' }) class UsersResource extends EntityResource<User> { constructor() { super('users'); } }
88. Advanced DI Techniques
89. Providing Logger Based on Environment
90. Providing Logger Based on Environment @Injectable({ providedIn: 'root', }) abstract class Logger { abstract log(message: string): void; abstract error(message: string): void; }
91. Providing Logger Based on Environment @Injectable({ providedIn: 'root', }) abstract class Logger { abstract log(message: string): void; abstract error(message: string): void; } @Injectable({ providedIn: 'root' }) class ServerLogger extends Logger { ./ ... } @Injectable({ providedIn: 'root' }) class ConsoleLogger extends Logger { ./ ... }
92. Providing Logger Based on Environment @Injectable({ providedIn: 'root', useFactory: () .> environment.production ? inject(ServerLogger) : inject(ConsoleLogger), }) abstract class Logger { abstract log(message: string): void; abstract error(message: string): void; } @Injectable({ providedIn: 'root' }) class ServerLogger extends Logger { ./ ... } @Injectable({ providedIn: 'root' }) class ConsoleLogger extends Logger { ./ ... }
93. Providing Logger Based on Environment @Injectable({ providedIn: 'root', useFactory: () .> environment.production ? inject(ServerLogger) : inject(ConsoleLogger), }) abstract class Logger { abstract log(message: string): void; abstract error(message: string): void; } @Injectable({ providedIn: 'root' }) class ServerLogger extends Logger { ./ ... } @Injectable({ providedIn: 'root' }) class ConsoleLogger extends Logger { ./ ... } @Injectable({ providedIn: 'root' }) class UsersService { constructor(private readonly logger: Logger) {} }
94. Example from @ngrx/component package
95. tick-scheduler.ts @Injectable({ providedIn: 'root', }) abstract class TickScheduler { abstract schedule(): void; }
96. tick-scheduler.ts @Injectable({ providedIn: 'root', }) abstract class TickScheduler { abstract schedule(): void; } @Injectable({ providedIn: 'root' }) class AnimationFrameTickScheduler extends TickScheduler { ./ ... } class NoopTickScheduler extends TickScheduler { schedule(): void {} }
97. tick-scheduler.ts @Injectable({ providedIn: 'root', useFactory: () .> { const zone = inject(NgZone); return isNgZone(zone) ? new NoopTickScheduler() : inject(AnimationFrameTickScheduler); }, }) abstract class TickScheduler { abstract schedule(): void; } @Injectable({ providedIn: 'root' }) class AnimationFrameTickScheduler extends TickScheduler { ./ ... } class NoopTickScheduler extends TickScheduler { schedule(): void {} }
98. tick-scheduler.ts @Injectable({ providedIn: 'root', useFactory: () .> { const zone = inject(NgZone); return isNgZone(zone) ? new NoopTickScheduler() : inject(AnimationFrameTickScheduler); }, }) abstract class TickScheduler { abstract schedule(): void; } @Injectable({ providedIn: 'root' }) class AnimationFrameTickScheduler extends TickScheduler { ./ ... } class NoopTickScheduler extends TickScheduler { schedule(): void {} }
99. Angular DI Under the Hood
100. Scan project files
101. Scan project files Find all classes with Angular-specific decorators @Injectable() @Component() @Directive() @Pipe()
102. Scan project files Find all classes with Angular-specific decorators Preserve information about constructor parameter types @Injectable() @Component() @Directive() @Pipe()
103. Scan project files Find all classes with Angular-specific decorators Preserve information about constructor parameter types Transpile TypeScript to JavaScript @Injectable() @Component() @Directive() @Pipe()
104. users.service.ts @Injectable({ providedIn: 'root' }) class UsersService { constructor( private usersResource: UsersResource, private logger: Logger ) {} }
105. users.service.ts @Injectable({ providedIn: 'root' }) class UsersService { constructor( private usersResource: UsersResource, private logger: Logger ) {} } class UsersService { constructor(usersResource, logger) { this.usersResource = usersResource; this.logger = logger; } } UsersService.ɵfac = function UsersService_Factory() { return new UsersService( ɵɵinject(UsersResource), ɵɵinject(Logger) ); }; UsersService.ɵprov = ɵɵdefineInjectable({ token: UsersService, factory: UsersService.ɵfac, providedIn: 'root' }); Compiled Output
106. users.service.ts @Injectable({ providedIn: 'root' }) class UsersService { constructor( private usersResource: UsersResource, private logger: Logger ) {} } class UsersService { constructor(usersResource, logger) { this.usersResource = usersResource; this.logger = logger; } } UsersService.ɵfac = function UsersService_Factory() { return new UsersService( ɵɵinject(UsersResource), ɵɵinject(Logger) ); }; UsersService.ɵprov = ɵɵdefineInjectable({ token: UsersService, factory: UsersService.ɵfac, providedIn: 'root' }); Compiled Output
107. users.service.ts @Injectable({ providedIn: 'root' }) class UsersService { constructor( private usersResource: UsersResource, private logger: Logger ) {} } class UsersService { constructor(usersResource, logger) { this.usersResource = usersResource; this.logger = logger; } } UsersService.ɵfac = function UsersService_Factory() { return new UsersService( ɵɵinject(UsersResource), ɵɵinject(Logger) ); }; UsersService.ɵprov = ɵɵdefineInjectable({ token: UsersService, factory: UsersService.ɵfac, providedIn: 'root' }); Compiled Output
108. users.service.ts @Injectable({ providedIn: 'root' }) class UsersService { constructor( private usersResource: UsersResource, private logger: Logger ) {} } class UsersService { constructor(usersResource, logger) { this.usersResource = usersResource; this.logger = logger; } } UsersService.ɵfac = function UsersService_Factory() { return new UsersService( ɵɵinject(UsersResource), ɵɵinject(Logger) ); }; UsersService.ɵprov = ɵɵdefineInjectable({ token: UsersService, factory: UsersService.ɵfac, providedIn: 'root' }); Compiled Output
109. Summary
110. DI mechanism is one of the most powerful features of the Angular Framework! DI gives the ability to write loosely coupled and reusable code that is easier to test, scale, and maintain.
111. Marko Stanimirović @MarkoStDev Thank You!