A Boost of Dependency Injection

1. A Boost of Dependency Injection Markus Ingvarsson @markusingvarssn in/markusingvarsson
3. How did we now use DI in Angular…? After this talk, we will know: u What is dependency injection, and why we may use it, u how Angular uses hierarchical injectors to provide DI, u what dependency providers are Markus Ingvarsson @markusingvarssn in/markusingvarsson
4. What is dependency injection and why we may use it in Angular: Markus Ingvarsson @markusingvarssn in/markusingvarsson u Dependency injection is a design pattern in which a class requests dependencies from external sources rather than creating them. - https://angular.io/guide/dependency-injection u Helps us achieve a more loosely coupled application
5. Our first Angular Service Markus Ingvarsson @markusingvarssn in/markusingvarsson + Creating and registering a service – a common way
6. Our first Angular Service Markus Ingvarsson @markusingvarssn in/markusingvarsson + Creating and registering a service – a common way
7. Our first Angular Service Markus Ingvarsson @markusingvarssn in/markusingvarsson Creating and registering a service – a common way
8. Our first Angular Service Markus Ingvarsson @markusingvarssn in/markusingvarsson Using a service
9. Who provides the service to a component when it is instantiated? Markus Ingvarsson @markusingvarssn in/markusingvarsson
10. The Injectors u The injectors are responsible for creating and retrieving services in the app. u Will first check the element hierarchy followed by the module hierarchy. Element Injector Hierarchy Module Injector Hierarchy Element Injector yn Element Injector yn-1 Element Injector y1 Root Module Injector Platform Module Injector Null Injector Markus Ingvarsson @markusingvarssn in/markusingvarsson
11. The Null Injector Markus Ingvarsson @markusingvarssn in/markusingvarsson
12. The Injector u The injector is responsible for creating and retrieving services in the app. u Will first check the element hierarchy followed by the module hierarchy. Element Injector Hierarchy Module Injector Hierarchy Element Injector yn Element Injector yn-1 Element Injector y1 Root Module Injector Platform Module Injector Null Injector Markus Ingvarsson @markusingvarssn in/markusingvarsson
13. How we can use dependency providers: Markus Ingvarsson @markusingvarssn in/markusingvarsson
14. How we can use dependency providers: Markus Ingvarsson @markusingvarssn in/markusingvarsson
15. How we can use dependency providers: Markus Ingvarsson @markusingvarssn in/markusingvarsson
16. How we can use dependency providers: Markus Ingvarsson @markusingvarssn in/markusingvarsson
17. Summary Markus Ingvarsson @markusingvarssn in/markusingvarsson Now we know that u Dependency injection is a design pattern, commonly used in Angular, which helps us create a loosely coupled architecture, allowing us to build more maintainable apps. u Angular uses a hierarchy of injectors to retrieve any injected services to provide services on many different hierarchical levels. u Dependency providers can be used to reconfigure services which is an important tool when building great apps.
18. Further reading u Angular Documentation u https://angular.io/guide/dependency-injection u https://angular.io/guide/dependency-injection-providers u https://angular.io/guide/hierarchical-dependency-injection u https://angular.io/guide/dependency-injection-in-action u https://angular.io/api/core/Injector u Decoded Frontend - Dependency Injection in Angular @ YouTube https://www.youtube.com/watch?v=G8zXugcYd7o&list=PLX7eV3JL9sfmJ6Aa Zj9eDlAKrJrEul4Vz u Kevin Kreuzer – Angular Inject @ YouTube https://www.youtube.com/watch?v=GI5j3dJ6o90 Markus Ingvarsson @markusingvarssn in/markusingvarsson