Angular7 - Módulos

Módulo em Angular refere-se a um local onde você pode agrupar os componentes, diretivas, tubos e serviços relacionados ao aplicativo.

No caso de você estar desenvolvendo um site, o cabeçalho, rodapé, esquerda, centro e seção direita passam a fazer parte de um módulo.

Para definir o módulo, podemos usar o NgModule. Quando você cria um novo projeto usando o comando Angular –cli, o ngmodule é criado noapp.module.ts arquivo por padrão e parece o seguinte -

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

O NgModule precisa ser importado da seguinte forma -

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

A estrutura do ngmodule é mostrada abaixo -

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

Começa com @NgModule e contém um objeto que possui declarações, importações, provedores e bootstrap.

Declaração

É uma série de componentes criados. Se algum novo componente for criado, ele será importado primeiro e a referência será incluída nas declarações conforme mostrado abaixo -

declarations: [ 
   AppComponent,  
   NewCmpComponent 
]

Importar

É um conjunto de módulos necessários para uso no aplicativo. Ele também pode ser usado pelos componentes na matriz de declaração. Por exemplo, agora no @NgModule, vemos o Módulo do navegador importado. Caso sua aplicação necessite de formulários, você pode incluir o módulo com o código abaixo -

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

A importação no @NgModule será como o seguinte -

imports: [ 
   BrowserModule, 
   FormsModule 
]

Provedores

Isso incluirá os serviços criados.

Bootstrap

Isso inclui o componente principal do aplicativo para iniciar a execução.