Shulou(Shulou.com)05/31 Report--

This article mainly explains "what are the Angular modules". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the Angular modules"?

Overview

The seventh part of the notes recorded by Angular introduces the relevant concepts of the modules in Angular, understands the relevant usage scenarios, and knows how to organize our Angular applications through feature modules.

Corresponding to the official document address:

Introduction to NgModule

NgModules

Start the application using the root module

Common module

Characteristic module

Contents

Angular from entry to abandonment-introduction to Angular

Angular from entering the pit to digging-eating guide for components

Angular from entering to digging-Overview of form controls

Angular from entering to digging-Overview of HTTP request

Angular from entering to digging-getting started with Router routing points to the north

Angular from entering the pit to digging the hole-Lianliankan by the guards

Angular from entering the pit to digging-introduction to the module

Knowledge GraphStep by Step front-end modularization

Front-end modularization means that a group of related functions in the program are organized together according to certain rules, and the data and function implementation within the whole module are private, and some of the interfaces (methods) are exposed through export to communicate with other modules in the system.

Introduction to NgModule

In an Angular application, there will be at least one NgModule, that is, the root module of the application (AppModule), which can start the entire project by booting it.

Angular built-in libraries such as FormsModule and HttpClientModule, which are used in development, are also NgModule. In development, by aggregating components, instructions, pipes, services or other code files into a cohesive function block, we focus on a certain functional module of the system.

Common NgModule module name module name module file function point BrowserModule@angular/platform-browser basic service for launching and running browser applications CommonModule@angular/common uses built-in instructions such as NgIf and NgFor FormsModule@angular/forms uses NgModel to build template-driven forms ReactiveFormsModule@angular/forms to build responsive forms RouterModule@angular/router uses front-end routing HttpClientModule@angular/common/http to initiate http requests JavaScript module and NgModule

In JavaScript, every js file is a module, and all objects defined in the file are subordinate to that module. Through the export keyword, modules can declare some of these objects public, so that other JavaScript modules can use import statements to access these public objects

For example, in the following sample code, other javascript modules can directly use the exposed getRoles and getUserInfo methods by importing this js file

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

Function getRoles () {

/ /...

}

Function getUserInfo () {

/ /...

}

Export {

GetRoles

GetUserInfo

}

NgModule is a class with @ NgModule decorator, which is described by the parameters of the function, such as CrisisModule created in the notes in the previous section, which defines the components we created in the feature module, as well as other modules that need to be used.

When using the @ NgModule decorator, you usually use the following attributes to define a module

Declarations: components, instructions, pipes in the current module

Imports: other NgModule modules required by the current module

Exports: objects that can be declared by the current module can be used in other modules

Providers: services exposed by the current module to other application modules in the current application

Bootstrap: the root component that defines the entire application, hosts all other views in the application, and exists only in the root module

Root module of the application

The root module is the module used to launch this Angular application, and by convention, it is usually named AppModule

After creating a new application through Angular CLI, the default root module code is as follows. By decorating the AppModule class with @ NgModule decorator, some attribute features of this module are defined, thus telling Angular how to compile and start the application.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

Import {BrowserModule} from'@ angular/platform-browser'

Import {NgModule} from'@ angular/core'

Import {AppRoutingModule} from'. / app-routing.module'

Import {AppComponent} from'. / app.component'

@ NgModule ({

Declarations: [

AppComponent

]

Imports: [

BrowserModule

AppRoutingModule

]

Providers: []

Bootstrap: [AppComponent]

})

Export class AppModule {}

Declarations

The declarations array tells Angular which components belong to the current module. When you create new components, you need to add them to the declarations array. Each component can only be declared in one NgModule class, and if you use an undeclared component, Angular will report an error

Similarly, custom instructions and custom pipes used by the current module need to be declared in the declarations array.

Imports

The imports array shows which modules need to be introduced when the current module is working properly, such as BrowserModule, AppRoutingModule, or FormsModule that we use when we use bidirectional data binding. It shows a dependency of the current module.

Providers

The providers array defines the services that the current module can provide to other modules of the current application, such as a user module, which provides the service of obtaining the currently logged-in user information, because it is also possible to call in other places in the application, so it can be added to the providers array and provided to other modules to use.

Bootstrap

The Angular application starts by booting the root module, because it involves building the component tree to form the actual DOM, so you need to add the root component to the bootstrap array as the root of the component tree.

The feature module is used to separate specific functions or codes with related features from other codes and focus on specific application requirements. The feature module works with the root module and other modules through its services and shared components, instructions, and pipes.

In the previous chapter, a CrisisModule was defined to include crisis-related functional modules, which can be created through the Angular CLI command line when creating feature modules

one

two

Create a feature module named xxx

Ng new component xxx

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

Import {NgModule} from'@ angular/core'

Import {CommonModule} from'@ angular/common'

Import {CrisisRoutingModule} from'. / crisis-routing.module'

Import {FormsModule} from'@ angular/forms'

Import {CrisisListComponent} from'. / crisis-list/crisis-list.component'

Import {CrisisDetailComponent} from'. / crisis-detail/crisis-detail.component'

@ NgModule ({

Declarations: [

CrisisListComponent

CrisisDetailComponent

]

Imports: [

CommonModule

FormsModule

CrisisRoutingModule

]

})

Export class CrisisModule {}

When the creation is completed, in order to include the feature module in the application, like BrowserModule and AppRoutingModule, imports needs to be introduced into the root module.

By default, NgModule is acutely loaded, which means that it loads as soon as the application loads, all modules, whether or not they need to be used immediately. For large applications with many routes, consider using lazy loading mode. Lazy loading can reduce the size of the initial package, thus reducing the first loading time of the program.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

Import {BrowserModule} from'@ angular/platform-browser'

Import {NgModule} from'@ angular/core'

Import {FormsModule} from'@ angular/forms'

Import {AppRoutingModule} from'. / app-routing.module'

Import {AppComponent} from'. / app.component'

/ / add a custom module

Import {CrisisModule} from'. / crisis/crisis.module'

@ NgModule ({

Declarations: [

AppComponent

]

Imports: [

BrowserModule

FormsModule

CrisisModule, / / introduce custom module

AppRoutingModule

]

Providers: []

Bootstrap: [AppComponent]

})

Export class AppModule {}

Thank you for your reading, the above is the content of "what does the Angular module have?" after the study of this article, I believe you have a deeper understanding of what the Angular module has, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.