Angular: boas práticas de desenvolvimento com Modularização, Lazy Loading e Interceptors

Entendendo a arquitetura modular - Apresentação

Que tal aprender como aplicar boas práticas no seu projeto Angular? Eu sou a Nayanne Batista, mas você pode me chamar de Nay, e quero te dar as boas-vindas a mais este curso de Angular!

Audiodescrição: Nay se descreve como uma mulher de olhos castanhos e cabelo castanho-escuro liso e longo. Ela veste uma camisa preta com a logo do Angular, usa brincos prateados, e está sentada em frente a um microfone, em um cenário iluminado em gradiente azul, com estantes brancas ao fundo contendo livros e enfeites.

O que vamos aprender?

Neste curso, iremos utilizar o projeto Jornada Milhas para aplicar os conceitos de modularização. Você entenderá por que é extremamente importante utilizar a arquitetura modular do Angular. Além disso, conseguiremos carregar sob demanda os módulos, utilizando o conceito de Lazy Loading.

Também vamos aprender a lidar com erros na aplicação. Criaremos uma nova tela para quando nenhuma rota for encontrada.

Utilizaremos também uma ferramenta de análise estática de código, o ESLint, para melhorar a qualidade geral do projeto.

Pré-requisitos

Para aproveitar ao máximo este curso, é importante que você já possua conhecimento sobre o Angular, e seria ideal que já tivesse realizado os cursos anteriores desta formação.

Se você topa esse desafio, então venha mergulhar no Angular!

Entendendo a arquitetura modular - Por que modularizar?

Você pode estar se perguntando: por que devo modularizar minha aplicação Angular? Vamos responder com uma analogia.

Por que modularizar?

Imagine que você tem em sua casa uma estante de livros que está muito cheia e não comporta mais nenhum livro novo. Essa é uma situação comum. Por conta disso, decide comprar uma nova estante e se aventurar para montá-la.

Assim, você pega a sua caixa de ferramentas, que ao longo do tempo foi colecionando diversas ferramentas e as guardou sem nenhum critério de ordenação. Esta grande caixa de ferramentas pode ser comparada ao arquivo app.module.ts no VS Code.

Esse arquivo é o módulo principal da nossa aplicação e, por enquanto, o único módulo existente. É como se fosse a caixa de ferramentas, onde criamos componentes e importamos tudo nessa mesma estrutura, sem critério ou organização lógica.

Em razão disso, quando você começa a montar a estante, percebe que não é tão fácil encontrar as ferramentas certas. Além disso, você não consegue pedir ajuda a outra pessoa, porque para ajudar, essa pessoa necessita encontrar as coisas.

Por isso, você decide adicionar algumas divisórias nessa caixa e organizar as ferramentas de acordo com a funcionalidade delas. Ou seja, uma divisória para chaves de fenda, uma divisória para parafusos, uma divisória para martelos. Isso facilita a organização das ferramentas com base em suas funcionalidades.

Essa é a mesma lógica que aplicaremos em nossa aplicação. Vamos criar novos módulos para conseguir dividir e organizar o código. Esses módulos serão organizados de acordo com a funcionalidade. Portanto, cada módulo será um agrupamento de componentes, serviços e recursos que têm uma funcionalidade relacionada.

A modularização da aplicação vai facilitar os testes, melhorar a organização e também a colaboração entre os times. Utilizar a arquitetura modular do Angular vai auxiliar na manutenção e na escalabilidade, porque adicionar novas funcionalidades será muito mais fácil, fazendo com que nosso projeto cresça de forma mais sustentável.

Conclusão

Agora que você compreende a necessidade e a importância de criar módulos na sua aplicação, no próximo vídeo, vamos explicar detalhadamente a estrutura de um módulo em Angular. Te encontramos lá!

Entendendo a arquitetura modular - A estrutura do módulo

Antes de começarmos a criar nossos próprios módulos, vamos examinar o arquivo app.module.ts e entender a estrutura de um módulo em Angular.

A estrutura do módulo

Já vimos que o módulo é um bloco de código independente que agrupa diversos componentes, pipes, diretivas e outros módulos dos quais precisa para funcionar.

No Angular, para informar que uma classe é um módulo, precisamos decorá-la com o decorator @NgModule. Esse é o indicativo para o Angular de que a classe é um módulo, assim como quando adicionamos o decorator @Component para sinalizar que a classe é um componente.

Dentro do @NgModule, podemos ter uma ou mais propriedades. No caso do arquivo app.module.ts, temos as propriedades: declarations, imports, providers e bootstrap. Vamos entender um pouco mais sobre cada uma delas.

No bloco declarations, temos todos os componentes que compõem o módulo.

app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    BannerComponent,
    CardComponent,
    ContainerComponent,
    HomeComponent,
    FooterComponent,
    CardBuscaComponent,
    CardDepoimentoComponent,
    FormBuscaComponent,
    ModalComponent,
    BotaoControleComponent,
    PromocoesComponent,
    DropdownUfComponent,
    SeletorPassageiroComponent,
    DepoimentosComponent,
    LoginComponent,
    FormBaseComponent,
    CadastroComponent,
    PerfilComponent,
    BuscaComponent,
    PassagemComponent,
    ParadasComponent,
    CompanhiasComponent,
    PrecosComponent,
    LabelComponent,
    FiltrosComplementaresComponent,
    PassagemDestaqueComponent
  ],

  // código omitido

Neste array, precisamos informar os componentes, diretivas e pipes que o módulo contém. É preciso adicionar tudo. Fazendo uma analogia com a declaração de imposto de renda, da mesma forma que precisamos declarar todos os bens, no array de declarations, precisamos declarar tudo o que o módulo possui.

Se por acaso deixarmos de declarar algum componente, por exemplo, vamos remover o CardBuscaComponent na linha 64 e abrir o terminal, surgirá um erro. Então, certamente, você cairá na malha fina do Angular. Vamos fechar o terminal e usar "Ctrl + Z" para restaurar o CardBuscaComponent.

Uma observação importante é que não podemos declarar um componente em mais de um módulo simultaneamente. Isso também levará a erros e conflitos.

Agora que já falamos das declarations, vamos para a próxima propriedade, os imports.

  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatButtonModule,
    MatCardModule,
    MatButtonToggleModule,
    MatIconModule,
    MatChipsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatDialogModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatAutocompleteModule,
    MatRadioModule,
    MatDividerModule,
    MatCheckboxModule,
    MatSliderModule
  ],

Dentro de imports, precisamos adicionar todos os módulos que o módulo precisa para funcionar. No caso do app.module.ts, importamos vários módulos do Angular Material, a biblioteca de componentes que estamos utilizando, como o módulo de formulários reativos (ReactiveFormsModule) na linha 102, o módulo do HTTP (HttpClientModule) na linha 101 para realizar as requisições. Portanto, tudo que o módulo precisa para funcionar, declaramos em imports.

A próxima propriedade é providers. Neste array, declaramos todos os serviços que o módulo utiliza.

  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: AutenticacaoInterceptor,
    multi: true
  }],

Da mesma forma que na declaração de imposto de renda, nas declarations, declaramos o que temos e algum serviço que foi prestado, por exemplo, caso tenhamos ido a um hospital ou clínica, isso é declarado em outro local. No app.module.ts, declaramos no array de providers. Então, são os serviços que foram fornecidos para nós, isto é, os provedores.

A última propriedade, específica do app.module.ts, é a bootstrap, que se refere à inicialização e não ao framework CSS. Essa propriedade indica para o Angular qual componente é o ponto de partida. No caso, na linha 114, o componente que será iniciado é o AppComponent.

  bootstrap: [AppComponent]

Se acessarmos esse componente, na linha 4, o seletor dele é o app-root.

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'jornada-milhas';
}

Acessando pelo menu lateral à esquerda o arquivo index.html, que é como se fosse a única página da nossa SPA, o app-root está declarado dentro do <body>. Então, é ele quem será renderizado primeiro em nossa aplicação.

index.html:

<body class="mat-typography">
  <app-root></app-root>
</body>

Conclusão

Agora que você entendeu a estrutura de um módulo em Angular, podemos começar a criar novos módulos no projeto!

Sobre o curso Angular: boas práticas de desenvolvimento com Modularização, Lazy Loading e Interceptors

O curso Angular: boas práticas de desenvolvimento com Modularização, Lazy Loading e Interceptors possui 123 minutos de vídeos, em um total de 49 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Modularização #1
• Modularização #2
• Roteamento e Lazy Loading
• Gerenciamento de erros
• Análise estática de código