Root module
Each application has at least one root module to boot and run the application. The root module is usually named AppModule.
Example src/app/
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
imports array
Note: Do not include classes other than the NgModule type in the imports array.
If there are two directives with the same name called HighlightDirective, we just need to use the as keyword when importing to create an alias for the second directive.
import {
HighlightDirective as ContactHighlightDirective
} from './contact/';
About BrowserModule
Each application running in a browser requires the BrowserModule in @angular/platform-browser. So each such application contains a BrowserModule in its imports array of its root AppModule.
NgIf is declared in a CommonModule from @angular/common.
CommonModule provides many commonly used instructions in applications, including NgIf and NgFor.
BrowserModule imports CommonModule and re-exports it. The final effect is: as long as you import the BrowserModule, you will automatically obtain the instructions in the CommonModule.
declarations array
You must declare each component in an NgModule class, otherwise the browser console will report an error.
Do not add other types than components, directives, and pipelines in declarations.
Do not add NgModel (or FORMS_DIRECTIVES) to the declarations data of the AppModule metadata! These instructions belong to FormsModule.
Components, instructions, and pipelines can only belong to one module.
Never declare a class belonging to other modules again.
bootstrap array
Start the app by booting the root AppModule. During startup, one of the steps is to create components listed in the bootstrap array and insert each of them into the browser's DOM.
You launch the application by bootstrapping the root AppModule. Among other things, the bootstrapping process creates the component(s) listed in the bootstrap array and inserts each one into the browser DOM.
Each booted component is the root of its own component tree. Inserting a booted component usually triggers the creation of a series of components and forms a component tree.
Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
Although you can insert multiple component trees into the host page, it is not common. Most applications have only one component tree, which boots a single component.
While you can put more than one component tree on a host web page, that's not typical. Most applications have only one component tree and they bootstrap a single root component.
The root component is usually named AppComponent.
Boot in
There are many ways to guide applications. They depend on how you want to compile the application and where it will run.
Dynamic boot through the Instant (JIT) compiler
JIT, just-in-time
Dynamically compile application src/ using the Instant (JIT) compiler
// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// The app module
import { AppModule } from './app/';
// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);
Static boot using a precompiler (AOT)
AOT, ahead-of-time
Static solutions can generate smaller, faster startup applications, and it is recommended to use them first, especially on mobile devices or high-latency networks.
Using static options, the Angular compiler runs ahead of time as part of the build process, generating a set of class factories. At their core is AppModuleNgFactory.
Boot the precompiled AppModuleNgFactory:
// The browser platform without a compiler
import { platformBrowser } from '@angular/platform-browser';
// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from './app/';
// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
Note: Since the entire application is precompiled, we do not need to send the Angular compiler to the browser, nor do we need to compile it in the browser.
Both the JIT and the AOT compiler will generate an AppModuleNgFactory class from the same AppModule source code. The JIT compiler dynamically creates this factory class in the browser's memory. The AOT compiler outputs the factory into a physical file, which is the one we import in the static version.
Typically, AppModule doesn't have to care about how it is booted. AppModule will evolve with the application, but the boot code in it will not change.
Ng Module (NgModule)
Feature Module
A feature module is a class with the @NgModule decorator and its metadata, just like a root module. The properties of the metadata of the characteristic module and the metadata of the root module are the same.
The root module and feature module also share the same execution environment. They share the same dependency injector, which means that services defined in a certain module are also available in all modules.
They have two significant differences in technology:
- We boot the root module to start the application, but import the feature module to extend the application.
- Feature modules can expose or hide their own implementations to other modules.
Feature modules are used to provide a cohesive set of functions. Focus on a business area of the application, user workflow, an infrastructure (form, HTTP, routing), or a collection of related tools.
Although all of these can be done in the root module, the feature module can help us divide the application into different areas with specific concerns and goals.
The current module does not inherit access to components, instructions, or pipelines in other modules. The root module and the feature module's imports are irrelevant. If a module is to be bound to [(ngModel)], a FormsModule must be imported.
Summarize
This chapter has little content, mainly to understand the concept, functions and relationships of Angular module in detail.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.