Angular 2 – Módulos com NgModule

Curso básico gratuito de Angular 2 | kazale.comO objetivo dessa aula é abordar o NgModule do Angular 2.

 

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você aprenderá o que é e como utilizar o NgModule em um projeto Angular 2.

1. Introdução

O Angular 2 introduziu recentemente o NgModule, que permite organizar a aplicação através de módulos.

Com a modularização do sistema, temos as vantagens de isolarmos melhor nosso código fonte, assim como deixar o código mais fácil para manutenção e implementação de novos recursos.

A seguir será demonstrado suas principais características, assim como será possível vê-lo em ação no projeto template para Angular 2 com WebPack aqui da Kazale.com.

2. NgModule

O NgModule é representado pela diretiva de mesmo nome, que através de suas metadatas, instrui o Angular 2 a como compilar e executar o código de uma aplicação.

Toda aplicação Angular 2 deverá possui ao menos um módulo padrão, onde sua definição ficaria conforme o código a seguir:

O módulo servirá como padrão para inicializar a aplicação conforme o código a seguir:

O NgModule contém uma metadata chamada ‘declarations’, que é onde adicionamos os componentes que fazem parte do módulo em questão.

Ele também possui a metadata ‘imports’, que permite importar um outro módulo que seja dependência de algum recurso utilizado pelo módulo, como o FormModule, que contém diretivas e recursos para a criação de formulários.

3. NgModule e o template de Angular 2 com WebPack

Se você acompanhou a aula sobre o template de Angular 2 com WebPack, viu que ao criar um novo CRUD para a aplicação, era necessário importar todos os componentes (listar, cadastrar, visualizar e editar) no único módulo que a aplicação possuía.

Com o novo refactoring no código do template, agora ao gerar o CRUD, todos os componentes criados passaram a fazer parte de um módulo, e somente esse que agora deverá ser importado como dependência ao módulo principal.

Tal alteração tornou o código mais organizado e de fácil manutenção e configuração.

Apesar do NgModule possuir outros recursos, como lazy loading de módulos, tais recursos serão abordados em aulas futuras, assim que se tornarem mais maduros e estáveis.

É importante salientar que o template de Angular 2 com WebPack está em constante atualização, buscando implementar todos os recursos recomendados pela equipe de desenvolvimento do Angular 2.

Caso você esteja buscando algo similar para iniciar um projeto, recomendo altamente verificar e testar esse template em seu projeto.

4. Conclusão

Como você pode perceber, o NgModule melhorou a organização de projetos Angular 2, e seus recursos permitem modularização e melhor organização e controle do código fonte.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

vinte − 10 =