ANGULAR2 Learning Notes--detailed Ngmodule module _angularjs

A module in ANGULAR2 refers to a class that is decorated with @ngmodule. @NgModule use a metadata object to tell angular how to compile and run the code. A module can contain components, directives, pipelines, and can declare their access rights public so that the components of the external module can access and use them.

module is used to organize the application, through the module mechanism external class library can be very convenient to extend the application, after Rc5, ANGULAR2 will many common functions are assigned to a module, such as: Formmodule, HttpModule, Routermodule.

The main properties of the Ngmodule are as follows:

• Declarations: A list of internal components/directives/pipes in the module that declares the internal members of this module
• Providers: Specifies the service to be used at the root level of the application. (There is no module-level service in Angular2, and all provider declared in Ngmodule are registered at the root level dependency injector)
• Imports: Import other modules, components, directives, pipes, etc. exposed by other module can be used in the components of this module. For example, after the introduction of Commonmodule can use Ngif, ngfor and other instructions.
• Exports: Used to control which internal members are exposed to external use. Importing a module does not mean that the public members exposed by the module imported into this module are automatically imported. Unless the imported module writes its internal imported module to exports.
• Bootstrap: Usually the root component of the app startup, typically only one component. The components in the bootstrap are automatically placed into the entrycomponents.
• Entrycompoenents: A component that is not referenced in the template. This property is normally used only by NG itself, typically bootstrap components or routing components, and Ng automatically puts bootstrap, routing components in it. This property is not used unless the component is added to the DOM through routing dynamics.

Each ANGULAR2 application has at least one module that is the same as the module.

Import {Ngmodule} from ' @angular/core ';
Import {Browsermodule} from ' @angular/platform-borwser ';
Import {appcomponent} from './appcomponent ';

@NgModule ({
  declarations: [Appcomponent],
  imports: [Browsermodule],
  bootstrap: [Appcomponent]
})
Export Class appmodule{}

With the expansion of the program, a single root module has been unable to clearly partition responsibility, this time can be introduced feature module. Feature module, like the way the root module is created, all modules share a run-time context and a dependency injector.

The function module and the root module's duty difference mainly has the following two points:

• The purpose of the root module is to start the app, which is designed to extend the app
• Functional modules can expose or hide specific implementations as needed

Another technology that ANGULAR2 provides for the module is deferred loading. By default, ANGULAR2 packs all the code into a single file in order to improve the fluency of the application, but if the app is running in mobile, loading a large file can be slow, so RC5 provides a way to delay loading.

Template: '
 <app-title [subtitle]= ' subtitle ' ></app-title>
 <nav>
  <a routerlink= ' Contact "routerlinkactive=" active ">Contact</a>
  <a routerlink=" crisis "routerlinkactive=" active " >crisis center</a>
  <a routerlink= "Heroes" routerlinkactive= "active" >Heroes</a>
 </ nav>
 <router-outlet></router-outlet>
'

Import {modulewithproviders} from ' @angular/core ';
Import {Routes, routermodule} from ' @angular/router ';

Export const Routes:routes = [
 {path: ', Redirectto: ' Contacts ', Pathmatch: ' Full '},
 {path: ' Crisis ', Loadchi Ldren: ' App/crisis/crisis.module#crisismodule '},
 {path: ' Heroes ', Loadchildren: ' app/hero/hero.module# Heromodule '}
];

Export Const Routing:modulewithproviders = routermodule.forroot (routes);

Where path indicates the paths, Loadchildren indicates the use of deferred loading, ' App/crisis/crisis.module#crisismodule ' indicates the path of the module, and the name of the module.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.