ANGULAR2 Ngmodule Module Detailed _angularjs

The purpose of the angular module is to organize the logical structure of the app.

The class used by @ngmodule in Ng is considered to be a NG module. Ngmodule can manage components, directives, pipes within the module, introduce service, and control the access of external components to internal members.

ANGULAR2 has the concept of the module, and responds to the call of the backstage program, cohesion well-structured classes the low coupling. Module is used for encapsulation, high cohesion low coupling function.

In fact, everyone thinks that Ng2 's module is similar to. NET's engineering, and if you want to use the functionality defined in the module, the first step is to refer to it, which is called import in Ng2.

Then we see whether the module has a hierarchical concept, at least for now, the module is a peer, no master of the division.

How do you define a module?

Import {Ngmodule} from ' @angular/core ';
Import {Browsermodule} from ' @angular/platform-browser ';

/* APP Root *
/import {appcomponent} from './app.component ';

/* Feature Modules *
/import {contactmodule} from './contact/contact.module ';
Import {Coremodule} from './core/core.module ';
Import {routing} from './app.routing ';
Import {Title} from ' @angular/platform-browser ';
@NgModule ({
 imports: [
  browsermodule,
  contactmodule,/
  *
    coremodule, *
  *
  Coremodule.forroot ({userName: ' Miss Marple '}),
  routing
 ],
 declarations: [appcomponent],// Declares the specified component information required by the current module
 exports:[],
 providers: [Title],
 bootstrap: [Appcomponent]
})
Export Class Appmodule {}

Briefly explain the purpose of each parameter in the module metadata.

Imports: Import other modules, that is, to use the functionality of other modules, you must import.

declarations: Declares, declares the content contained in this module. Some students may encounter, defined a directive, in the component use is always not in effect, the first thing we want to check is whether the statement.

exports: externally visible content. The equivalent of the classes declared as public in. Net.

providers: Service provider, primarily used to define services. It is estimated that the NG2 framework automatically checks the registered service to a dependency injection instance, as is currently the test.

Bootstrap: boot module. Used only in the root module. Modules other than the root module are not available.

2. Question 2

At present, the official term: The boot module is the root module, and other custom modules are called characteristic modules.

Can we import the root module in the feature module?

Experiment is the best way to test truth.

Import {Ngmodule} from      ' @angular/core ';
Import {Sharedmodule} from    ' ... /shared/shared.module ';

Import {contactcomponent} from  './contact.component ';
Import {ContactService} from   './contact.service ';
Import {routing} from      './contact.routing ';
Import{guozhiqimodule}from '.. /directives/guozhiqi.module ';
Import{appmodule}from '.. /app.module ';
@NgModule ({
 imports:   [Sharedmodule, routing,guozhiqimodule,appmodule],//Import module
 declarations: [ contactcomponent],//Declaration Instruction 
 providers:  [contactservice]//service provider registers the service required for the current module in the current module provider
}]
Export Class Contactmodule {}

Appmodule is the root module, we define the Contactmodule is the feature module, now we import the root module through imports.

An error occurred in the execution, Contactmodule imported a undefined module?

Why is there such a problem?

Each one is estimated to be because of 1. The problem that caused the circular reference. Appmodule will load the Contactmodule and import the root module in the Contactmodule, causing a circular reference, resulting in an error.

2. Another explanation is that the root module does not allow import. The NG2 framework does not allow this

Question 3: How do you avoid circular references?

The official gave the answer: https://angular.cn/docs/ts/latest/guide/ngmodule.html#! #prevent-reimport

Constructor (@Optional () @SkipSelf () parentmodule:coremodule) {
  if (parentmodule) {
   throw new Error (
    ' Coremodule is already loaded. Import it in the Appmodule only ');
  }
 

But my local validation does not effectively verify how to avoid duplicate import of a module.

Question 4. The relationship between the module and the route.

Basically each feature module has a separate routing definition, the relationship between the module and the route definition, the next time when it comes to ng2 routing, because the NG2 route is so powerful that it takes a long time to understand.

Best practices for the directory and directory structure of NG2 modules:

1. A separate folder for each module

2. module is high cohesion low coupling

3. Function related or similar in module

4. Each module has a separate routing definition-not necessarily

5. Do not repeat the introduction of some modules, when necessary to add restrictions. Because duplicate imports may affect dependency injection instances

Thank you for reading, I hope to help you, thank you for your support for this site!