Eine kurze Analyse dessen, was ngModule in Angular ist

Was ist ngModule? Dieser Artikel gibt Ihnen einen kurzen Überblick über die Syntax von Angular und stellt das ngModule in Angular vor. Ich hoffe, es wird Ihnen hilfreich sein!

Als Angular10-Tutorial ist Angular nach meinem Verständnis im Vergleich zu VUE besser modularisiert, wodurch die Codestruktur klarer erscheint. In diesem Abschnitt werden wir daher kurz die Winkelsyntax und das Verständnis von ngModule vorstellen. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

Was ist zunächst ein Winkelmodul (ngModule)?

Mein Verständnis: Es handelt sich tatsächlich um eine gewöhnliche Klasse, die von @NgModule dekoriert wurde, nichts Besonderes.

Dann ist die Frage: Was ist @NgModule?

Werfen wir zunächst einen Blick auf den Standardcode 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 erhält ein Metadatenobjekt, das Angular mitteilt, wie diese Anwendung kompiliert und gestartet werden soll. (Metadaten sind mehr als die oben genannten Konfigurationselemente, aber lassen Sie uns zuerst über diese sprechen)

Declarations-Array

Das Wort selbst bedeutet „Ankündigung, Erklärung“, hier ist es die Abhängigkeit dieses Moduls. Einschließlich einiger Komponenten, Anweisungen und Pipelines, von denen das Modul abhängen kann. Importregeln:

• Um sie zu verwenden, müssen sie zuerst importiert werden.
• Eine Komponente, Anweisung oder Pipe kann nur von einem Modul importiert (deklariert) werden
• Komponenten in Deklarationen können standardmäßig nur im aktuellen Modul verwendet werden. Sollen sie von anderen Modulen verwendet werden, müssen sie exportiert werden

imports-Array

Das imports-Array erscheint nur im @NgModule-Dekorator. Wenn ein Modul ordnungsgemäß funktionieren möchte, benötigt es möglicherweise zusätzlich zu seinen eigenen Abhängigkeiten (Deklarationen) auch Abhängigkeiten, die von anderen Modulen exportiert wurden. Solange es sich um ein Angular-Modul handelt, kann es in das Imports-Array importiert werden, z. B. benutzerdefinierte Module (z. B. AppRoutingModule), Module von Drittanbietern oder integrierte NG-Module (@angular/**)

providers-Array

stellt eine Reihe von Diensten bereit

Bootstrap-Array

Jede Komponente im Array wird als Wurzel des Komponentenbaums (Stammkomponente) verwendet. Während des Startvorgangs werden die darin enthaltenen Komponenten einzeln analysiert und in die DOM-Mitte des Browsers eingefügt.

Aber normalerweise ist nur eine AppComponent darin enthalten.

Was ist mit eckigen Bauteilen?

Erster Blick auf die App-Komponente, der Standardcode von src/app/app.component.ts: 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';
}

可以看出，还是常规操作：引入–>配置–>导出

selector：

顾名思义，就是个选择器，一个能通过原生JS选中的选择器而已（必填配置）。

templateUrl：

Angular 组件模板文件的 URL。如果提供了它，就不要再用 template来提供内联模板了（templateUrl和template

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;;
}

Man sieht, dass es sich immer noch um einen normalen Vorgang handelt:

Einführung– >Konfiguration

–> ;

Export

Selektor:Wie der Name schon sagt, handelt es sich nur um einen Selektor, einen Selektor, der über natives JS ausgewählt werden kann (erforderliche Konfiguration).

templateUrl:

Die URL der Angular-Komponentenvorlagendatei. Wenn es bereitgestellt wird, verwenden Sie template nicht, um Inline-Vorlagen bereitzustellen (wählen Sie eine der Optionen templateUrl und template, erforderliche Konfiguration).

styleUrls:

Das ist nicht schwer zu erkennen, es geht darum, eine oder mehrere Konfigurationen von Stilpfaden einzuführen (optionale Konfiguration)

Wenn die Komponente relativ einfach ist, müssen wir sie nicht extrahieren Die Seite und der Stil separat. @Component-Konfigurationselemente können direkt inline-Formular verwendet werden:

🎜rrreee🎜Bisher haben wir kurz über die darin enthaltene Datei app-routing.module.ts gesprochen stoße später darauf. Sag es noch einmal. 🎜🎜🎜Die allgemeine Idee einer Angular-Anwendung sollte wie folgt aussehen: 🎜🎜🎜🎜🎜🎜Wenn beispielsweise eine Angular-Anwendung ein Unternehmen ist, dann ist das AppModule das Unternehmen. AppComponent ist eine Fabrik dieses Unternehmens, und ein Unternehmen kann viele Fabriken haben. Die Elemente im Deklarationsfeld sind Teile der Fabrik, wie Produktionswerkstätten, Personalmanagementsysteme usw. Das Importangebot ähnelt der von der Fabrik angeforderten Auslandshilfe und ist relativ professionell. Das Angebot an Anbietern gleicht einer Logistikabteilung, die verschiedene Dienstleistungen erbringt. 🎜🎜🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse dessen, was ngModule in Angular ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!