Entendo o @NgModule do Angular

Uma das principais dificuldades para quem está começando a aprender Angular, é compreender o conceito de módulo do Angular o uso do @NgModule. Nesse artigo tentarei explica-lo de uma forma que os desenvolvedores JavaScript, possa entende-lo de mais fácil.

No site do Angular, temos a seguinte explicação do que é um módulo Angular:

NgModules são contêineres para um bloco coeso de código dedicado a um domínio de aplicativo, um fluxo de trabalho ou um conjunto de recursos intimamente relacionado. Eles podem conter componentes, provedores de serviços e outros arquivos de código cujo escopo é definido pelo NgModule que os contém. Eles podem importar funcionalidades exportadas de outros NgModules e exportar funcionalidades selecionadas para uso por outros NgModules.

Essa explicação pode ser um pouco confusa para quem está tendo o seu primeiro contato com o framework.

No JavaScript temos os módulos, que são arquivos JavaScript que compartilham informações (se ainda não sabe o que são módulo JavaScript, clique aqui), e os módulos do Angular são uma abstração desses módulos, de forma a possibilitar que o compilador Angular consiga construir e renderizar a sua aplicação. Veja as semelhanças:

// app.module.ts

@NgModule({
 imports:   [ BrowserModule ],
 providers:  [ Logger ],
 declarations: [ AppComponent ],
 exports:   [ AppComponent ],
})
export class AppModule { }

// app.js

/* imports: [ BrowserModule ] */
import { BrowserModule } from '@angular/platform-browser';


/*
providers:    [ Logger ],
declarations: [ AppComponent ]
*/
class Logger {}
class AppComponent {}


/*exports: [ AppComponent ]*/
export { AppComponent }

Como pode ser observado no exemplo acima os dois são bem parecidos. Assim como nos módulos JavaScript você consegue separar e organizar o código de sua aplicação de uma maneira mais coesa, ainda mais se utilizar o Barrel Pattern. Com os módulos Angular você separa e organiza o seu código tornando o mais fácil de manter.

Mas pode sugir a seguinte pergunta, o que são providers e declarations?

• Providers: são classes/funções que adicionam regras de negócios ou funcionalidades auxiliares à aplicação, mas que não adicionam elementos no DOM e nem interagem com ele. Os elementos de providers são utilizados pelo compilador Angular, na injeção de dependência;
• Declarations: são classes/funções que adicionam elementos no DOM e/ou interagem com ele. Os elementos de declarations utilizados diretamente nos templates da aplicação (arquivos html) como elementos ou atributos, e o compilador do Angular os utilizam para renderizar a página.

Em outro artigo falarei um pouco mais sobre os elementos do Angular. Espero ter ajudado você em seu aprendizado do Angular.