A brief analysis of what is ngModule in Angular

What is ngModule? This article will give you a brief understanding of angular syntax and introduce ngModule in Angular. I hope it will be helpful to you!

As an Angular10 tutorial, in my understanding, compared to VUE, angular is better modularized, which makes the code structure appear clearer. So in this section, we will briefly introduce angular syntax and understanding of ngModule. [Related tutorial recommendations: "angular tutorial"]

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

My understanding: In fact, it is Ordinary classes decorated with @NgModule, nothing special.

Then the question is, what is @NgModule?

Let’s first 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(元数据)
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } // 模块名AppModule

@NgModule gets a metadata object, which will tell Angular how to compile and start this application. (Metadata is more than the above configuration items, but let’s talk about these first)

declarations array

The word itself means "announcement, announcement" , here are the dependencies of this module. Including some components, directives and pipelines that the module may depend on. Import rules:

• To use them, they must be imported first. \
• A component, directive or pipe can only be introduced (declared) by one module
• The components in declarations can only be used in the current module by default. If you want other modules to use them, they must exports out

imports array

The imports array will only appear in the @NgModule decorator. A module wants to work normally, except for its own dependencies ( declarations) and may also require dependencies exported by other modules. As long as it is an angular module, it can be imported into the imports array, such as custom modules (such as AppRoutingModule), third parties or ng built-in ones (@angular/**)

providers array

Provide a series of services

bootstrap array

Each component in the array is used as a component tree Root (root component), during the startup process, the components inside will be parsed one by one and inserted into the browser's DOM.

But usually, there is only one AppComponent inside.

What does the angular component look like?

Look at the app component first, 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 {// 组件名AppComponent
  title = 'hero';
}

It can be seen that it is still a normal operation: Introduction–>Configuration–>Export

##selector:

As the name suggests, it is a choice It is just a selector that can be selected through 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 (choose one of the templateUrl and template options, required configuration).

styleUrls:

It is not difficult to see that it is the

configuration (optional configuration) that introduces one or more style paths

If the component is relatively simple, we don’t need to extract the page and style separately. The configuration items of @Component can be directly used inline form:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    `,
  styles: [`h1 { color: red }`]
})
export class AppComponent { // 组件名AppComponent
  title = &#39;Tour of Heroes&#39;;
  myHero = &#39;Windstorm&#39;;
}

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

The general idea of ​​angular application should be like this:

For example, if an angular application is a company, then AppModule This is the company. AppComponent is a factory of this company, and a company can have many factories. The elements in the declearation array are parts of the factory, such as production workshops, personnel management systems, etc. The imports array is like foreign aid invited by the factory, and it is relatively professional. The providers array is like a logistics department that provides various services.

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of A brief analysis of what is ngModule in Angular. For more information, please follow other related articles on the PHP Chinese website!