RSS

NgModule Decorator Deep Dive

30 אוג

 

In this post I want to emphasize some facts that help you understand the “ANGULAR MODULES (NGMODULE)” article.

1.          The services classes have different behaviors from Components, Directives and Pipes (CDP) in Angular Injector.

a.     Service behaviors in injector:

                                        1.     Singleton Instance – When you register a service to the Injector, you get a singleton instance.

                                        2.     Bubble – When a component wants to inject a service, Angular first looks at the component injector (child) and if the service doesn’t exist, it searches in the parent component injector (“bubble”). The Injector continues to go up until it finds the service. The root parent Injector belongs to platform object.

 

b.      CDP behaviors in injector:

                                        1.     Not singleton – When you use a directive or component in a template, you get a new instance of the directive/component. For example, if you use same directive number of times in a template, you get many instances of the directive.
 

                                        2.     Not bubble – You can’t register a directive in a parent component and use it in a child component.

 

2.          If a module loads normally, it doesn’t create an injector. If a module loads in a lazy way, it creates an injector for the module scope.

3.          Split the properties of NgModel Decorator to two groups: one for services and one for CDP.

a.     Group I – Properties for services classes:

                                        1.     Providers

b.     Group II – Properties for CDP classes:

                                        1.     Declarations

                                        2.     Imports

                                        3.     Exports

                                        4.     Bootstrap

 

Now we can start to explain the NgModule properties:

 

Group I – Properties for services classes:

§  @NgModule.providers – all the classes listed here are registered to the application injector as singleton (not in each component or directive metadata @component.providers that declares in @NgModule.declarations property). Anybody can ask for this singleton instance.
We have one exception; the lazy module has it on Injector. Meaning, the services listed in module providers are registered in the module injector instead of the application injector. It makes this service only available
to this module.

 

Group II – Properties for CDP classes:

§  @NgModule.declarations – all the CDP listed here know each other. It is the same as to register each component (@Component.directives) to all the other’s components. This property affects only the classes (CDP) defined in this property.

Example: declarations = [Compoent1, Component2, Component3, Directive1, Directive2, Pipe1, Pipe2 ]


clip_image002

 

Note: Each component knows all the others. Directive and pipe don’t have a template so they don’t need to know anybody.

 

§  @NgModule.exports – List of components, directives and pipes (CDP) that will be visible to modules that import this module.

 

§  @NgModule.imports – Everything from the imported modules that declares as an export, in the imported modules, will be available to declarations of this module.

 

Example:

1.     ModuleA ( declarations=[ Component1], imports:[ModuleB] )

2.     ModuleB ( declarations=[ Component2, Component3], exports:[ Component3] )

clip_image004

                        Component1 can use Component3 in a template but can’t use Component2.

 

§  @NgModule.bootstrap – Array of components to bootstrap. Angular loads this array to the DOM during the bootstrap (application launch) process. Use it only in root module (main).

Summary
This post is not instead of reading the ANGULAR MODULES (NGMODULE)” article, it just to emphasize some points in the article to make it more readable. I hope this information is helpful for you; send feedback please :=).

The next course opens on 18 September. For more information click here.

 

Advertisements
 
השארת תגובה

פורסם ע"י ב- אוגוסט 30, 2016 ב- Angular 2.0, AngularJS Tips

 

כתיבת תגובה

הזינו את פרטיכם בטופס, או לחצו על אחד מהאייקונים כדי להשתמש בחשבון קיים:

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

 
%d בלוגרים אהבו את זה: