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

This article mainly introduces what is the use of ngModule in Angular. It is very detailed and has a certain reference value. Interested friends must finish reading it!

As an Angular10 tutorial, in my understanding, angular is more modular than VUE, which makes the code structure clearer. So in this section, we will briefly introduce the angular syntax, the understanding of ngModule. [recommended for related tutorials: "angular tutorial"]

First of all, what is angular module (ngModule)?

My understanding: it is actually an ordinary class decorated by @ NgModule, nothing special.

So the question is, what is @ NgModule?

Let's take a look at the default code in src/app/app.module.ts:

Import {BrowserModule} from'@ angular/platform-browser';import {NgModule} from'@ angular/core';import {AppRoutingModule} from'. / app-routing.module';import {AppComponent} from'. / app.component';// @ NgModule (metadata) @ NgModule ({declarations: [AppComponent], imports: [BrowserModule, AppRoutingModule], providers: [], bootstrap: [AppComponent]}) export class AppModule {} / / Module name AppModule

NgModule gets a metadata object that tells Angular how to compile and start the application. (metadata is more than the above configuration items, but let's talk about these first.)

Declarations array

The word itself means "announcement, announcement", which in this case is a dependency of this module. Includes some components, instructions, and pipes that the module may depend on. Introduce rules:

To use them, you must first introduce them. \

A component, instruction, or pipe can only be introduced (declared) by one module.

Components in declarations can only be used in the current module by default. If you want other modules to use, you must exports out.

Imports array

The imports array only appears in the @ NgModule decorator, and for a module to work properly, you may need dependencies exported by other modules in addition to its own declarations. As long as it is angular module, it can be imported into the imports array, such as custom modules (such as: AppRoutingModule), third-party or ng built-in (@ angular/**)

Providers array

Provide a range of services

Bootstrap array

Each component in the array acts as the root of the component tree (the root component). During startup, the components in the array are parsed one by one and inserted into the browser's DOM.

But usually, there is only one AppComponent in it.

What does the angular component look like?

Let's take a look at the app component, the default code of src/app/app.component.ts:

Import {Component} from'@ angular/core';@Component ({selector: 'app-root', templateUrl:'. / app.component.html', styleUrls: ['. / app.component.scss']}) export class AppComponent {/ / component name AppComponent title = 'hero';}

As you can see, it is still a routine operation: introduction-> configuration-> Export.

Selector:

As the name implies, it is a selector, a selector that can be selected through the native JS (required configuration).

TemplateUrl:

The URL of the Angular component template file. If it is provided, do not use template to provide inline templates (templateUrl and template options choose one of the two, required configuration).

StyleUrls:

It is not difficult to see that the configuration of one or more style paths is introduced (optional configuration)

If the component is relatively simple, we do not have to extract the page and style separately. The configuration item of @ Component can directly use the inline form:

Import {Component} from'@ angular/core';@Component ({selector: 'app-root', template: `{{title}} My favorite hero is: {{myHero}}`, styles: [`h2 {color: red} `]}) export class AppComponent {/ / component name AppComponent title =' Tour of Heroes'; myHero = 'Windstorm';}

So far, we actually briefly talked about the default App module, but as for the app-routing.module.ts file inside, we will talk about it later.

The general idea of angular application should be as follows:

For example, if an angular application is a company, then AppModule is the company. AppComponent is a factory of this company, the company can have many factories. The elements in the declearation array are part of the factory, such as the production workshop, personnel management system, and so on. Imports array is like foreign aid from the factory, which is more professional. Providers arrays are like logistics departments, providing a variety of services.

The above is all the content of this article "what is the use of ngModule in Angular?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.