Angular Dependency Injection
•
0 likes•86 views
This slide is from my talk at Angular Thailand meet up on Nov 2018. It is a 20 mins talk about how dependency injection works in Angular world. You can watch video of this talk here (It is all in Thai language): https://youtu.be/Lt5f0_tiRSM
Recommended
More Related Content
What's hot
What's hot (17)
Similar to Angular Dependency Injection
Similar to Angular Dependency Injection (20)
Recently uploaded
Recently uploaded (20)
Angular Dependency Injection
- 3. constructor(private user: UserService) constructor(@Inject(UserService) public user: UserService)
- 17. AppModule RootInjector providers: [ UserService ]
- 18. AppModule RootInjector providers: [ UserService ] BrowserModule providers FontAwesomeModule providers
- 19. AppModule RootInjector providers: [ UserService ] BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers
- 20. AppModule RootInjector providers: [ UserService ] AppComponent constructor(user: UserService) BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers
- 21. AppModule RootInjector providers: [ UserService ] AppComponent constructor(user: UserService) BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers UserService
- 22. AppModule RootInjector providers: [ UserService ] AppComponent constructor(user: UserService) BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers UserService
- 23. AppModule RootInjector providers: [ UserService ] AppComponent constructor(user: UserService) BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers UserService BlaComponent constructor(user: UserService)
- 24. AppModule RootInjector providers: [ UserService ] AppComponent constructor(user: UserService) BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers UserService BlaComponent constructor(user: UserService)
- 25. AppModule RootInjector providers: [ UserService ] AppComponent constructor(user: UserService) BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers UserService BlaComponent constructor(user: UserService)
- 28. AppComponent constructor(user: UserService) Component C RootComponentInjector (A) ParentInjector (B) ChildInjector (C) Component Tree Injector Tree Component A Component B
- 30. AppModule AppComponen Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) RootInjector
- 31. AppModule AppComponen Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) RootInjector LazyLoadModule Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) LazyLoadRootInjector
- 34. AppModule AppComponen Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) RootInjector LazyLoadModule Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) LazyLoadRootInjector
- 35. AppModule AppComponen Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) RootInjector LazyLoadModule Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) LazyLoadRootInjector PlatformInjector
- 38. • @Injectable() Tree-Shakable • @NgModule Import, Lazy
- 39. • @Injectable() Tree-Shakable • @NgModule Import, Lazy • @Component Hierarchical @Directive
- 40. Beware of provider declaration
- 41. Reference • https://angular.io/guide/hierarchical-dependency-injection • https://angular.io/guide/dependency-injection-providers • https://angular.io/guide/providers • https://angular.io/guide/singleton-services • https://angular.io/guide/lazy-loading-ngmodules