Une brève analyse de ce qu'est ngModule dans Angular

Qu'est-ce que ngModule ? Cet article vous donnera une brève compréhension de la syntaxe de angular et présentera le ngModule dans Angular. J'espère qu'il vous sera utile !

En tant que tutoriel Angular10, à mon avis, par rapport à VUE, Angular est mieux modularisé, ce qui rend la structure du code plus claire. Ainsi, dans cette section, nous présenterons brièvement la syntaxe angulaire et la compréhension de ngModule. [Recommandation de tutoriel connexe : "Tutoriel angulaire"]

Tout d'abord, qu'est-ce que le module angulaire (ngModule) ?

Ma compréhension : c'est en fait une classe ordinaire décorée par @NgModule, rien de spécial.

Alors la question est : qu'est-ce que @NgModule ?

Tout d'abord, jetons un coup d'œil au code par défaut dans 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 obtient un objet de métadonnées, qui indiquera à Angular comment compiler et démarrer cette application. (Les métadonnées sont plus que les éléments de configuration ci-dessus, mais parlons-en d'abord)

tableau de déclarations

Le mot lui-même signifie "annonce, déclaration", ici c'est la dépendance de ce module. Y compris certains composants, directives et pipelines dont le module peut dépendre. Règles d'importation :

• Pour les utiliser, ils doivent d'abord être importés.
• Un composant, une instruction ou un tube ne peut être importé (déclaré) que par un seul module
• Les composants des déclarations ne peuvent être utilisés que dans le module actuel par défaut. S'ils doivent être utilisés par d'autres modules, ils doivent être exportés

.

tableau d'importations

Le tableau d'importations n'apparaîtra que dans le décorateur @NgModule Si un module veut fonctionner correctement, en plus de ses propres dépendances (déclarations), il peut également avoir besoin de dépendances exportées par d'autres modules. Tant qu'il s'agit d'un module angulaire, il peut être importé dans le tableau d'importation, tel que des modules personnalisés (tels que : AppRoutingModule), des tiers ou des modules intégrés (@angular/**)

tableau de fournisseurs

fournit une série de services

tableau bootstrap

Chaque composant du tableau est utilisé comme racine de l'arborescence des composants (composant racine). Pendant le processus de démarrage, les composants à l'intérieur seront analysés un par un. et inséré dans le milieu DOM du navigateur.

Mais généralement, il n'y a qu'un seul AppComponent à l'intérieur.

Qu'en est-il des composants angulaires ?

Premier coup d'œil au composant de l'application, le code par défaut de 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;;
}

On voit que c'est toujours une opération normale :

Introduction– >Configuration

–> ;

Export

sélecteur : Comme son nom l'indique, il s'agit simplement d'un sélecteur, un sélecteur qui peut être sélectionné via JS natif (configuration requise).

templateUrl :

L'URL du fichier de modèle de composant angulaire. S'il est fourni, n'utilisez pas template pour fournir des modèles en ligne (choisissez l'une des options templateUrl et template, configuration requise).

styleUrls :

Ce n'est pas difficile à voir, il s'agit d'introduire une ou plusieurs configurations de chemins de style (configuration facultative)

Si le composant est relativement simple, nous n'avons pas besoin d'extraire la page et le style séparément. Les éléments de configuration @Component peuvent être directement utilisés sous forme en ligne :

🎜rrreee🎜Jusqu'à présent, nous avons brièvement parlé du module App par défaut. Quant au fichier app-routing.module.ts à l'intérieur, nous le ferons. je le rencontrerai plus tard. Répétez-le. 🎜🎜🎜L'idée générale d'une application angulaire devrait être la suivante : 🎜🎜🎜🎜🎜🎜Par exemple, si une application angulaire est une entreprise, alors l'AppModule est l'entreprise. AppComponent est une usine de cette société, et une entreprise peut avoir plusieurs usines. Les éléments du tableau de déclaration font partie de l'usine, tels que les ateliers de production, les systèmes de gestion du personnel, etc. La gamme d'importations est comme l'aide étrangère sollicitée par l'usine, et elle est relativement professionnelle. L’ensemble des prestataires s’apparente à un service logistique qui fournit divers services. 🎜🎜🎜🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!