Era uma vez, o desenvolvimento de front-end era simples porque a maior parte do trabalho pesado era feito no back-end. Hoje, grande parte da lógica de um aplicativo reside no front-end, exigindo uma arquitetura inteligente que ofereça suporte à reutilização, extensibilidade e manutenção.
Neste tutorial, mostraremos como estruturar seu aplicativo em uma série de blocos menores, ou módulos, de funcionalidade. Percorreremos o processo de construção de um aplicativo Angular bem estruturado que impõe separação de interesses e capacidade de reutilização usando módulos. Também revisaremos algumas práticas recomendadas para usar módulos angulares .
Aqui está o que vamos cobrir:
- O que são módulos angulares?
- Por que usar módulos no Angular?
- Tipos de módulos em Angular
- Exemplo prático: Criação de um aplicativo de comércio eletrônico
Para acompanhar, você deve ter o Node.js V10.x instalado em sua máquina e conhecimento prévio de Angular.
O que são módulos angulares?
Em aplicativos angulares, os módulos são pequenos pedaços de código com funcionalidades de programa independentes.
Para obter um exemplo simples de como os módulos Angular funcionam, digamos que você esteja criando um site ou aplicativo de comércio eletrônico. Você pode ter um módulo para sua seção de carrinho, outro para sua seção de produtos, outro para clientes e assim por diante. Cada módulo representa uma parte independente do seu aplicativo de comércio eletrônico.
Por que usar módulos no Angular?
Se você não prestar muita atenção à arquitetura de software adequada, partes do seu aplicativo podem se tornar profundamente emaranhadas e desorganizadas, tornando mais difícil reutilizar o código ou testar qualquer parte do código isoladamente.
Os módulos permitem que você:
- Desenvolva uma determinada funcionalidade independentemente das outras
- Gerencie equipes com mais facilidade, permitindo que cada equipe de desenvolvimento trabalhe em um recurso separado
- Defina explicitamente a lista de módulos que o atual requer para funcionar
- Implante recursos gradualmente
- Crie aplicativos escaláveis
- Escreva testes facilmente
Tipos de módulos em Angular
Os tipos de módulos disponíveis no Angular incluem módulos raiz, principais, compartilhados e de recursos. Vamos examinar cada tipo de módulo Angular em mais detalhes.
Módulo raiz
O módulo raiz é o módulo principal em um aplicativo Angular. Ele é gerado pelo A ngular CLI como AppModule e inicializado quando o aplicativo é iniciado.
Todos os outros módulos Angular dependem direta ou indiretamente do módulo raiz. Apenas um módulo raiz pode existir em um aplicativo Angular.
Módulo principal
O módulo principal geralmente contém componentes que são usados uma vez em um aplicativo Angular, como uma barra de navegação, carregador, rodapé, etc. Este módulo deve ser carregado globalmente em AppModule .
Módulo compartilhado
Um módulo compartilhado é feito de diretivas, canais e componentes que podem ser reutilizados em módulos de recursos.
Por exemplo, digamos que você escreveu uma grade ou filtro personalizado que é reutilizado em vários módulos de seu aplicativo Angular. Você pode identificá-los como módulos compartilhados.
Módulos de recursos
Módulos de recursos hospedam os principais recursos de seu aplicativo Angular.
Se você estiver criando um aplicativo de comércio eletrônico, por exemplo, pode ter conjuntos específicos de funcionalidades, como pedidos, produtos, carrinho, clientes, etc. Dividir essas funcionalidades em módulos de recursos ajuda a dividir o aplicativo em áreas dedicadas. Isso permite que vários desenvolvedores ou equipes de desenvolvedores trabalhem em recursos independentes sem quebrar outras partes do aplicativo.
Exemplo prático: construção de um aplicativo de comércio eletrônico
Para mostrar como os módulos Angular funcionam na prática, orientaremos você no processo de construção de um aplicativo de comércio eletrônico no Angular. Usaremos a ferramenta Angular CLI para estruturar nosso novo projeto.
Para verificar se você tem a ferramenta Angular CLI instalada, execute o seguinte comando em seu terminal:
ng--version //ou ng v
Instale a ferramenta Angular CLI com o seguinte comando:
npm install-g @ angular/cli @ 10.0.0
Agora podemos criar um novo projeto Angular com o seguinte comando:
ng novos módulos angulares
Isso geralmente leva algum tempo, dependendo da sua conexão com a Internet. Quando for bem-sucedido, ele criará uma pasta chamada angular-modules . Navegue até a pasta recém-criada e inicie seu aplicativo com o seguinte comando:
ng servir
Criação de um módulo em Angular
Ao configurar um novo aplicativo Angular, a primeira etapa é definir todos os recursos de que seu aplicativo precisa e, em seguida, separar esses recursos nos tipos de módulo que discutimos anteriormente. Cada módulo pode ser preenchido com os componentes, diretivas, canais e serviços que dão forma ao recurso que o módulo representa.
Para criar um módulo, execute o seguinte comando Angular CLI:
ng gerar produtos de módulo
No diretório raiz do seu projeto Angular, execute o comando acima para criar um módulo de produtos. Isso cria um diretório de produtos dentro do diretório do aplicativo. O diretório de produtos contém um arquivo TypeScript que é responsável por definir o módulo.
Registrando componentes com um módulo
Para criar um componente e registrá-lo em um módulo ao mesmo tempo, use o seguinte comando CLI Angular:
ng gerar produtos de componentes/productItem--module=produtos
O sinalizador --module indica o módulo com o qual o componente está registrado-em nosso caso, o módulo produtos . Também pode ser usado ao gerar diretivas e canais.
Ao criar o componente, o Angular CLI converte a caixa camel em caixa kebab ao criar pastas e arquivos. Portanto, a pasta do componente productItem , junto com seus arquivos correspondentes, é convertida de productItem em product-item .
Atualize products/product-item/product-item.component.html com o seguinte:
Olá, o componente item do produto está funcionando!
Acessando módulos
Na seção anterior, criamos nosso componente productItem em um módulo separado. Agora, vamos renderizar esse componente no navegador.
Por padrão, o componente App é renderizado no navegador. Para que o componente productItem seja renderizado no navegador, ele deve ser acessado pelo componente App .
Primeiro, o módulo de produtos deve exportar o componente productItem para que possa estar disponível em qualquer módulo Angular que precise dele. Podemos fazer isso por meio das propriedades de exportação de ProductsModule .
Atualize o arquivo products.module.ts com o seguinte:
//src/apps/products/products.module.ts
importar {NgModule} de'@ angular/core';
import {CommonModule} de'@ angular/common';
importar {ProductItemComponent} de'./product-item/product-item.component'; @NgModule ({ declarações: [ProductItemComponent], importações: [ CommonModule ], exportações: [ProductItemComponent]
})
export class ProductsModule {}
Com isso, qualquer módulo Angular agora pode importar o ProductsModule para acessar todos os seus módulos, componentes, diretivas e canais exportados.
Atualize o arquivo app.component.html da seguinte maneira:
Em seguida, use as propriedades de importação de AppModule para registrar ProductModule globalmente em AppModule .
Atualize o arquivo app.module.ts da seguinte maneira:
import {NgModule} de'@ angular/core';
importar {BrowserModule} de'@ angular/platform-browser';
importe {AppComponent} de'./app.component';
importar {ProductsModule} de"./products/products.module"
@NgModule ({ declarações: [ AppComponent, ], importações: [ BrowserModule, ProductsModule ], provedores: [], bootstrap: [AppComponent]
})
exportar classe AppModule {}
Agora você pode acessar o ProductItemComponent em qualquer lugar do seu aplicativo.
Se tentar executar nosso aplicativo Angular usando ng serve , você obterá o seguinte:
Olá, o componente item do produto está funcionando!
É isso! Como uma próxima etapa, você pode praticar mais criando módulos e seus componentes correspondentes para os clientes, pedidos e recursos do carrinho.
Conclusão
Neste tutorial, exploramos os módulos Angular, revisamos os tipos de módulos no Angular e demonstramos alguns dos benefícios de usar módulos para estruturar seus aplicativos Angular.
Os módulos angulares permitem que você melhore a organização e a estrutura de seu aplicativo. Isso melhora a capacidade de reutilização e teste do código e proporciona uma excelente experiência para o desenvolvedor ao escalar seus aplicativos Angular.
A postagem Módulos angulares: práticas recomendadas para estruturação seu aplicativo apareceu primeiro no LogRocket Blog .
