Tweet
Tweet

Slide 1

Slide 1 text

A Boost of Dependency Injection Markus Ingvarsson @markusingvarssn in/markusingvarsson

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Our first Angular Service Markus Ingvarsson @markusingvarssn in/markusingvarsson + Creating and registering a service – a common way

Slide 6

Slide 6 text

Our first Angular Service Markus Ingvarsson @markusingvarssn in/markusingvarsson + Creating and registering a service – a common way

Slide 7

Slide 7 text

Our first Angular Service Markus Ingvarsson @markusingvarssn in/markusingvarsson Creating and registering a service – a common way

Slide 8

Slide 8 text

Our first Angular Service Markus Ingvarsson @markusingvarssn in/markusingvarsson Using a service

Slide 9

Slide 9 text

Who provides the service to a component when it is instantiated? Markus Ingvarsson @markusingvarssn in/markusingvarsson

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

The Null Injector Markus Ingvarsson @markusingvarssn in/markusingvarsson

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

How we can use dependency providers: Markus Ingvarsson @markusingvarssn in/markusingvarsson

Slide 14

Slide 14 text

How we can use dependency providers: Markus Ingvarsson @markusingvarssn in/markusingvarsson

Slide 15

Slide 15 text

How we can use dependency providers: Markus Ingvarsson @markusingvarssn in/markusingvarsson

Slide 16

Slide 16 text

How we can use dependency providers: Markus Ingvarsson @markusingvarssn in/markusingvarsson

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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