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.
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.
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!
Você pode estar se perguntando: por que devo modularizar minha aplicação Angular? Vamos responder com uma analogia.
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.
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á!
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.
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>
Agora que você entendeu a estrutura de um módulo em Angular, podemos começar a criar novos módulos no projeto!
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:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas