Angular7 - Moduli

Il modulo in angolare si riferisce a un luogo in cui è possibile raggruppare i componenti, le direttive, i tubi e i servizi correlati all'applicazione.

Nel caso in cui si stia sviluppando un sito Web, le sezioni di intestazione, piè di pagina, sinistra, centro e destra diventano parte di un modulo.

Per definire il modulo, possiamo usare NgModule. Quando crei un nuovo progetto usando il comando Angular –cli, il ngmodule viene creato nel fileapp.module.ts file per impostazione predefinita e ha il seguente aspetto:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Il NgModule deve essere importato come segue:

import { NgModule } from '@angular/core';

La struttura per il modulo ng è come mostrato di seguito:

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})

Inizia con @NgModule e contiene un oggetto che ha dichiarazioni, importazioni, provider e bootstrap.

Dichiarazione

È una serie di componenti creati. Se viene creato un nuovo componente, verrà prima importato e il riferimento verrà incluso nelle dichiarazioni come mostrato di seguito -

declarations: [ 
   AppComponent,  
   NewCmpComponent 
]

Importare

È un array di moduli necessari per essere utilizzati nell'applicazione. Può essere utilizzato anche dai componenti nell'array di dichiarazione. Ad esempio, in questo momento nel @NgModule, vediamo il modulo del browser importato. Nel caso in cui la tua domanda abbia bisogno di moduli, puoi includere il modulo con il codice seguente:

import { FormsModule } from '@angular/forms';

L'importazione in @NgModule sarà come il seguente -

imports: [ 
   BrowserModule, 
   FormsModule 
]

Fornitori

Ciò includerà i servizi creati.

Bootstrap

Ciò include il componente principale dell'app per l'avvio dell'esecuzione.