Suggested Videos
Part 32 - Angular dependency injection | Text | Slides
Part 33 - Why dependency injection | Text | Slides
Part 34 - Angular singleton service | Text | Slides
In this video we will discuss Angular Injectors. This is continuation to Part 34. Please watch Part 34 from Angular 2 tutorial before proceeding.
In Part 32 of Angular 2 tutorial we discussed what is dependency injection and how it is implemented in Angular. There are 2 simple steps to use dependency injection in Angular. For example, if you have a component that depends on a service and needs an instance of it,
Step 1 : First register the service with the angular injector
Step 2 : Specify a dependency using the constructor of your component class.
With these 2 steps in place, the angular injector will automatically inject an instance of the the service into the component's constructor when an instance of the component is created.
Angular 1 has only one global injector but in Angular 2 we have one injector at the application root level and hierarchical injectors that parallel an application's component tree. This means in Angular 2, we have one root injector plus an injector at every component level as you can see from the diagram below.
If a service is registered with the root injector then that service is available for all components in our entire application including the components in lazy loaded modules. We will discuss lazy loaded modules in a later video in this series.
If a service is registered with the injector at the Application Root component level, then that service is available for all the components in the application except the components in lazy loaded modules.
If a service is registered with a specific component injector, then that service is available for that component and any of it's children. For example, if we register a service with Component X injector, then that service is available for Components X, Y & Z but not for Component A. Similarly if a we register a service with Component A injector, then that service is available only for Component A but not for Components X, Y & Z.
We can register a service with the angular injector using the providers property of @Component decorator or @NgModule decorator.
To register a service with the root injector use providers property of @ngModule decorator of root module (app.module.ts) or any feature module
To register a service with the injector at a component levet use providers property of @Component decorator
Part 32 - Angular dependency injection | Text | Slides
Part 33 - Why dependency injection | Text | Slides
Part 34 - Angular singleton service | Text | Slides
In this video we will discuss Angular Injectors. This is continuation to Part 34. Please watch Part 34 from Angular 2 tutorial before proceeding.
In Part 32 of Angular 2 tutorial we discussed what is dependency injection and how it is implemented in Angular. There are 2 simple steps to use dependency injection in Angular. For example, if you have a component that depends on a service and needs an instance of it,
Step 1 : First register the service with the angular injector
Step 2 : Specify a dependency using the constructor of your component class.
With these 2 steps in place, the angular injector will automatically inject an instance of the the service into the component's constructor when an instance of the component is created.
Angular 1 has only one global injector but in Angular 2 we have one injector at the application root level and hierarchical injectors that parallel an application's component tree. This means in Angular 2, we have one root injector plus an injector at every component level as you can see from the diagram below.
If a service is registered with the root injector then that service is available for all components in our entire application including the components in lazy loaded modules. We will discuss lazy loaded modules in a later video in this series.
If a service is registered with the injector at the Application Root component level, then that service is available for all the components in the application except the components in lazy loaded modules.
If a service is registered with a specific component injector, then that service is available for that component and any of it's children. For example, if we register a service with Component X injector, then that service is available for Components X, Y & Z but not for Component A. Similarly if a we register a service with Component A injector, then that service is available only for Component A but not for Components X, Y & Z.
We can register a service with the angular injector using the providers property of @Component decorator or @NgModule decorator.
To register a service with the root injector use providers property of @ngModule decorator of root module (app.module.ts) or any feature module
To register a service with the injector at a component levet use providers property of @Component decorator
Thanks for your tutorial that you provided free of charge on youtube. In recent lesson including this , you explain a subject many times in one video. It will be much better to explain it only once. thanks!
ReplyDeleteThat will make our concepts more and more clearer. So cheers!
ReplyDelete