Modulos - Angular

Nos temas anteriores, usamos componentes autônomos que existiam de forma independente. Podíamos importar e usar funcionalidades externas nesses componentes (por exemplo, o módulo FormsModule para trabalhar com elementos de formulário) e carregá-los diretamente na página web. A equipe de desenvolvimento do Angular recomenda seguir essa abordagem para novos projetos. No entanto, há outra abordagem, que foi usada antes do Angular 16 e que ainda pode ser aplicada atualmente: o uso de módulos.

Um módulo serve para agrupar vários componentes que têm uma tarefa em comum em uma única unidade. Uma aplicação Angular pode ser composta por diversos módulos. Nesse caso, um módulo é o principal, ou seja, o módulo raiz (root module). O primeiro módulo a ser carregado é o módulo principal, que, por convenção, é geralmente chamado de AppModule.

Vamos aplicar essa abordagem. Suponha que temos um projeto com a seguinte estrutura:

helloapp/
|-- angular.json
|-- package.json
|-- tsconfig.json
|-- node_modules/
|-- src/
|-- index.html
|-- main.ts  --->  Carrega o AppModule
|-- app/
    |-- app.module.ts  ---> Carrega o AppComponent
    |-- app.component.ts   

Comparado à estrutura padrão do projeto, que foi usada nos temas anteriores, aqui aparece um arquivo chamado app.module.ts. Definimos o seguinte código nele:

import { NgModule }      from "@angular/core";
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }   from './app.component';

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

Para o funcionamento do módulo, é necessário incluir algumas bibliotecas. Por isso, no início do arquivo, ocorre a importação delas. O nome de cada biblioteca Angular começa com o prefixo @angular.

As bibliotecas são instaladas por meio do gerenciador de pacotes npm e importadas usando a diretiva import. Por exemplo, importamos a funcionalidade do decorador NgModule da biblioteca @angular/core:

Ou seja, precisamos importar todos os módulos e classes que este módulo utiliza. Em particular, para o AppModule, são necessários:

• NgModule: funcionalidade do decorador NgModule, sem o qual não podemos criar um módulo.

• BrowserModule: módulo necessário para trabalhar com o navegador.

• FormsModule: módulo necessário para trabalhar com formulários HTML e, em particular, com elementos input. (Como a classe do componente trabalha com esses elementos, somos obrigados a importar também este módulo).

• AppComponent: funcionalidade do componente raiz da aplicação.

O módulo em si é representado pela classe AppModule, que, à primeira vista, não faz nada e não contém nenhuma funcionalidade:

No entanto, no Angular, um módulo não é apenas uma classe. Cada módulo deve ser definido com o decorador @NgModule.

NgModule é uma função decoradora que recebe um objeto, cujas propriedades descrevem os metadados do módulo. As propriedades mais importantes são:

• declarations: classes de visualização (view classes) que pertencem ao módulo. O Angular possui três tipos de classes de visualização: componentes (components), diretivas (directives) e pipes.

• exports: conjunto de classes de visualização que devem ser usadas nos templates dos componentes de outros módulos.

• imports: outros módulos, cujas classes são necessárias para os templates dos componentes do módulo atual.

• providers: classes que criam os serviços utilizados pelo módulo.

• bootstrap: o componente raiz, que é chamado por padrão ao carregar a aplicação.

No exemplo acima, a única classe de visualização é o componente AppComponent. Portanto, ele é especificado nas propriedades declarations e bootstrap. E, como sua funcionalidade depende dos módulos BrowserModule e FormsModule, esses módulos são listados na propriedade imports.

O valor bootstrap: [ AppComponent ] indica que o módulo carregará o AppComponent como o componente principal.

Mas, se necessário, poderíamos utilizar outras propriedades:

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

No arquivo app.component.ts, definimos o seguinte componente AppComponent:

import { Component } from "@angular/core";
      
@Component({
    selector: "my-app",
    template: `<label>Digite seu nome:</label>
                  <input [(ngModel)]="name" placeholder="nome">
                  <h1>Bem-vindo {{name}}!</h1>`
})
export class AppComponent { 
    name= '';
}

Note que este componente não é autônomo. Embora ele utilize a funcionalidade do módulo FormsModule, não é necessário importar explicitamente esse módulo: o AppModule faz isso para todos os seus componentes.

Carregando o Módulo

Ao iniciar a aplicação, o primeiro código a ser executado é o que está definido no arquivo main.ts. Vamos definir o código de carregamento do módulo AppModule:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

A primeira linha importa a funcionalidade do módulo platformBrowserDynamic do pacote @angular/platform-browser-dynamic. O platformBrowserDynamic usa o bootstrapModule para carregar o módulo necessário.

Na prática, o platformBrowserDynamic inicia o módulo AppModule, que foi importado na segunda linha. Após isso, toda a lógica presente no AppModule, que é o módulo principal da aplicação, começa a ser executada.

Ao iniciar a aplicação, o módulo principal AppModule será carregado, e ele utilizará o AppComponent como o componente inicial:

Conclusão

O uso de módulos é uma abordagem alternativa para organizar o código em projetos Angular. No entanto, a equipe de desenvolvimento do Angular recomenda o uso de componentes autônomos, que são mais fáceis de manter e reutilizar. Além disso, a abordagem de módulos é mais complexa e menos flexível.

Portanto, nos próximos artigos, continuaremos utilizando componentes autônomos como a abordagem recomendada.