The Puppet Master's Guide to Injection Tokens

Slides from the talk "The Puppet Master's Guide to Injection Tokens" by Markus Ingvarsson

Transcript

1. The Puppet Master's Guide to Injection Tokens Markus Ingvarsson @markusingvarssn
2. https://blog.angular.io/angular-v16- is-here-4d7a28ec680d
3. Angular Developer Survey 2022 Results Summary https://blog.angular.io/angular- developer-survey-2022-results- summary-d17c88f62690
5. Let’s demystify Injection Tokens! 5
6. Let’s demystify Injection Tokens! After this talk, you will know o The essentials of Angular’s Dependency Injection and Injection Tokens o The role of Injection Tokens in enhancing app flexibility and configurability o Hands-on usage of Injection Tokens in real-world scenarios.
7. Hello! I’m Markus @markusingvarssn 7
8. Gothenburg
9. Gothenburg
15. The InjectionToken https://angular.io/api/core/InjectionToken
16. Dependency Injection in Angular A quick recap
17. Dependency Injection in Angular A quick recap
18. Node Injector yn Node Injector yn-1 Node Injector y1 The Injectors’ role - creating and retrieving dependencies in the app. Node Injector Hierarchy Environment Injector Hierarchy Root Injector Platform Injector Null Injector
19. https://www.youtube.com/watch?v=ZQ9EuzqYLnU
20. GreatGrandChild Node Injector Node Injector yn-1 Node Injector y1 The Injectors’ role - creating and retrieving dependencies in the app. Node Injector Hierarchy Environment Injector Hierarchy Root Injector Platform Injector Null Injector GreatGrand ChildCmp
21. GreatGrandChild Node Injector GrandChild Node Injector Node Injector y1 The Injectors’ role - creating and retrieving dependencies in the app. Node Injector Hierarchy Environment Injector Hierarchy Root Injector Platform Injector Null Injector GreatGrand ChildCmp
22. GreatGrandChild Node Injector GrandChild Node Injector The Injectors’ role - creating and retrieving dependencies in the app. Node Injector Hierarchy Environment Injector Hierarchy Root Injector Platform Injector Null Injector GreatGrand ChildCmp App Node Injector
23. GreatGrandChild Node Injector GrandChild Node Injector The Injectors’ role - creating and retrieving dependencies in the app. Node Injector Hierarchy Environment Injector Hierarchy Root Injector Platform Injector Null Injector GreatGrand ChildCmp App Node Injector
24. Dependency Injection in Angular A quick recap
25. GreatGrandChild Node Injector GrandChild Node Injector The Injectors’ role - creating and retrieving dependencies in the app. Node Injector Hierarchy Environment Injector Hierarchy Root Injector Platform Injector Null Injector GreatGrand ChildCmp App Node Injector
26. No Providers Found
27. Node Injector yn Node Injector yn-1 Node Injector y1 The Injectors’ role - creating and retrieving dependencies in the app. Node Injector Hierarchy Environment Injector Hierarchy Root Injector Platform Injector Null Injector
28. Providers in Angular
29. Providers in Angular
36. https://angular.io/api/core/inject Traditional way Angular 14+ “way” (we’ll favor this one)
37. https://www.youtube.com/watch?v=bH3ASMHgIFE&t=0s
38. Providers in Angular
42. Providers in Angular
43. Providers in Angular
44. Providers in Angular
45. Providers in Angular
53. *drumroll*
55. InjectionTokens in Angular
56. Built in InjectionTokens in Angular
73. Checkout Component Injector Node Injector yn-1 Node Injector y1 The Injectors’ role - creating and retrieving dependencies in the app. Node Injector Hierarchy Environment Injector Hierarchy Root Injector Platform Injector Null Injector showError: false showError: false STEPPER_GLOBAL_OPTIONS STEPPER_GLOBAL_OPTION
76. Summary o Clarified some core concepts of Angular’s Dependency Injection o Uncovered how Injection Tokens can dynamically alter an app’s behaviour o Examples of using Injection Tokens for HTTP requests, pipes and components
77. Further Reading Angular Documentation o https://angular.io/guide/dependency-injection-overview o https://angular.io/api/core/InjectionToken Decoded Frontend – Dependency Injection in Angular @ Youtube o https://www.youtube.com/watch?v=G8zXugcYd7o&list=PLX7eV3JL9sfmJ6Aa Zj9eDlAKrJrEul4Vz Thomas Laforge – Deep dive into the DI system @ Angular Tiny Conf o https://www.youtube.com/watch?v=ZQ9EuzqYLnU Kamil Galek – 5 cool usages of inject function in Angular @ NG-BE 2023 o https://www.youtube.com/watch?v=bH3ASMHgIFE&t=0s
78. The Puppet Master's Guide to Injection Tokens Markus Ingvarsson @markusingvarssn https://github.com/markusingvarsson /acm-puppet-master-injectiontokens Thank you!