Shulou(Shulou.com)06/01 Report--

I. Root module, sub-module and lazy loading

Let's start with the root module. A ng2 application must have at least one root module, which contains the BrowserModule that comes with ng2, and is declared to be a boot module, which will be expanded when the application is started.

With the expansion of the application, it is inevitable that everything is done in one module (to some extent, the ng1 application does this, and the controller is subdivided to split the application, which actually wastes the meaning of the top-level module), so it is natural to think that the system can be divided into multiple modules, each module only doing its own things without interfering with each other, so the further idea is The root module is used to guide the program and manage all sub-modules (through routing orientation and providing them with global configuration and service instances), and all specific services are handed over to each sub-module to complete.

Then there will be a problem, that is, since the system has been carved up by so many sub-modules, and it is impossible for all of these sub-modules to be used at the same time, that is, they are only useful when they are activated. Still loading all sub-modules from the root module during application boot will inevitably lead to a waste of performance and slow down execution. At this point, the lazy loading module comes in handy. After defining a submodule as lazy loading, the module will only start loading when it is activated via routing (and ng2 even supports asynchronous preloading, that is, background preloading of lazily loaded modules, so that when the lazy loading module needs to be loaded, it is already loaded, which speeds up the response time).

In addition to the module

Each module has its own things to do, usually including:

The introduction of other modules is described in detail in the third part

Declaration module contains components, instructions, and pipes all components, instructions, or pipes must be attached to a module and are available only in that module.

The service provided by the definition module also has its own module, but because the service is a global singleton, it is universal as long as it is provided in a module. Note: if multiple modules provide services at the same time (usually in the case of chaotic import between modules), ng2 generally recognizes and retains only one instance, but unpredictable errors will occur in lazily loaded modules, so be sure to avoid them.

The definition module uses the exported components, instructions, and pipes (which can also be modules introduced by this module) with (1), which is also detailed in part 3.

Third, the correlation of modules.

There must be a way to share or inherit resources between modules, otherwise each sub-module must implement all the functions that may be used.

For example, for a message pop-up component, it is impossible for each sub-module to declare a message component and then use it, which is a lot of maintenance pressure and a serious waste of code.

At this point, the introduction and export of modules are used--

Module A can introduce another module B, and then A can use the components, pipes, and instructions exported in B.

When we want to use system instructions (such as ngIf, ngFor, etc.), we must also introduce system modules, there is an ingenious way is to implement the above shared module, in the introduction of system modules and export at the same time to export other custom instructions, components or pipes. Then all the sub-modules that introduce this sharing module can use these system instructions and shared instructions.

The basic question is whether the service needs to be exported, and the answer is no. The service does not need to be exported, because the service is a global singleton, and once initialized, it is globally universal. On the contrary, problems may occur if repeated imports provide modules that provide the same service:

B provides the service BachelSMagia An imports BMagol C as well as B. In this case, ng2 will find two blips offerings, but ng2 will still be able to keep it in an instance of breads. But if module C is lazily loaded, when C is created, it will reinitialize an instance of bones, and when it jumps back to A from C, another will be created. This will be the case with each jump back and forth, and the outcome will become chaotic.

A better approach for services is to write a core module that specifically provides global services, ensuring that this module will only be referenced by the root module once, and then all sub-modules can already use these global services.

IV. Ng2 module system

Finally, a set of ng2 project construction system is given, which is also a summary of the ng2 project module system recommended by the ng2 official website.

The general idea is:

> 1. The root module is responsible for global routing.

> 2. The core module is responsible for the global service, and you can also define some components that are only used in the root module, and can only be introduced once by the root module and no longer exported.

> 3. The sharing module does not provide services, but defines the components that are shared globally, and helps the sub-module import the system module, so that the sub-module only needs to import this shared module.

> 4. Within the sub-module, you can subdivide its own sub-routing to specific sub-components, as well as provide its own services.

> 5. In addition to the page entry module (that is, the specific business module except the root module), other sub-modules are considered to be written as lazy loading modules to improve the speed of page booting and reduce performance waste.

> 6. When you need a more generic global service, you can add it to CoreModule, or you can create a feature module that is introduced only by the root module. Further, the module can even be released to npm, which requires stronger coding capabilities and technical accumulation.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.