Injector Trees

Slides for my talk at the Techmaker Meetup in Reading, UK.

Transcript

1. INJECTOR TREES Kapunahele Wong @kapunahele
2. angular.io/docs
3. In the works
5. And on its way…
6. LOTS. TUTORING @kapunahele @mhevery
7. IN-DEPTH WITH URI SHAKED & ME ANGULAR CONNECT @UriShaked Photo credit: Ashnita Bali! @kapunahele
8. https://github.com/angular/angular/issues
9. Services @kapunahele
10. According to the docs: @kapunahele In Angular, a service is an instance of a class that can be made available to any part of your application using Angular's dependency injection system. From: https://angular.io/start/data
11. @kapunahele Angular's dependency injection system Stuff in Trees a service is an instance of a class that can be made available => => =>
12. Injector trees @kapunahele
13. ONLY TWO TYPES OF INJECTORS* ▸ModuleInjector ▸ElementInjector @kapunahele
14. ModuleInjector @kapunahele
15. MODULEINJECTOR ▸@NgModule.providers ▸@Injectable.providedIn @kapunahele
16. MODULEINJECTOR ▸@NgModule.providers @kapunahele
17. MODULEINJECTOR ▸@Injectable.providedIn @kapunahele
18. MODULEINJECTOR @kapunahele
19. MODULEINJECTOR @kapunahele
20. MODULEINJECTOR @kapunahele
21. ElementInjector @kapunahele
22. ELEMENTINJECTOR ▸@Component.providers ▸@Component.viewProviders @kapunahele
23. ELEMENTINJECTOR ▸@Component.providers @kapunahele
24. ELEMENTINJECTOR ▸@Component.viewProviders @kapunahele
25. ELEMENTINJECTOR @kapunahele
26. One is not the parent of the other @kapunahele ModuleInjector & ElementInjector
27. ModuleInjector @kapunahele ElementInjector Source: https://svs.gsfc.nasa.gov/11650
28. ModuleInjector @kapunahele ElementInjector Source: https://svs.gsfc.nasa.gov/11650
29. ModuleInjector @kapunahele ElementInjector Source: https://svs.gsfc.nasa.gov/11650 1 2
30. Another analogy @kapunahele
31. ModuleInjector @kapunahele ElementInjector 1 2
32. ModuleInjector @kapunahele ElementInjector 1 2
33. ModuleInjector @kapunahele ElementInjector 1 2
34. ModuleInjector @kapunahele ElementInjector 1 2
35. ModuleInjector @kapunahele ElementInjector 1 2
36. ModuleInjector @kapunahele ElementInjector 1 2
37. ModuleInjector @kapunahele ElementInjector 1 2
38. ModuleInjector @kapunahele ElementInjector 1 2
39. ModuleInjector @kapunahele ElementInjector 1 2
40. Sample apps @kapunahele
41. MODULEINJECTOR @kapunahele
42. Our given values: @kapunahele FlowerService: AnimalService:
43. MODULEINJECTOR @kapunahele
44. MODULEINJECTOR @kapunahele
45. ELEMENTINJECTOR @kapunahele
46. Our given values: @kapunahele FlowerService: AnimalService:
47. ELEMENTINJECTOR @kapunahele
48. ELEMENTINJECTOR @kapunahele
49. So, why two? @Component.providers @Component.viewProviders @kapunahele
50. @kapunahele
51. @kapunahele Angular’s logical view representation
52. @kapunahele <#VIEW> represents an instance of a template and each component has its own <#VIEW>
53. @kapunahele Inject the FlowerService: Basic example (ModuleInjector) Add binding in MyAppComponent template: Renders:
54. @kapunahele In the logical tree: Basic example (ModuleInjector)
55. @kapunahele @Component.providers array
56. @kapunahele @Component.providers
57. @kapunahele @Component.viewProviders array
58. @kapunahele @Component.viewProviders
59. @kapunahele @Component.providers
60. Visibility decorators @kapunahele
61. @Host() @kapunahele @SkipSelf() @Self() @Optional()
62. @Optional() @kapunahele
63. @Self() @kapunahele
64. @SkipSelf() @kapunahele
65. @Host() @kapunahele
66. @kapunahele The visibility decorators can make different things visible depending on whether you’ve used @Component.providers or @Component .viewProviders. (Think <#VIEW>)
67. @kapunahele 1. Two injector trees 2. ElementInjector first, ModuleInjector second 3. Use visibility decorators to customize where the injector starts and stops looking Recap:
68. https://github.com/kapunahelewong/ element-injector-tree @kapunahele https://github.com/kapunahelewong/ module-injector-tree ElementInjector Demo ModuleInjector Demo Thank you!!!