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:
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas