Arquitetura Modular no Angular
Para experimentar com segurança com módulos, deve-se criar uma cópia do projeto existente. Essas alterações são apenas para prática e não afetarão o projeto original. Nos capítulos seguintes, o foco retornará para a construção de aplicações utilizando componentes autônomos.
Criando um Módulo para o TaskComponent
Esta etapa envolve a criação de um módulo para o TaskComponent. O módulo irá declarar o componente, uma diretiva relacionada e um pipe.
Para gerar um módulo no Angular, existe um comando específico na CLI:
Agora que o arquivo task.module.ts foi criado dentro da pasta task, podemos implementá-lo
task-module.ts
O array exports em @NgModule especifica quais componentes, diretivas ou pipes devem estar disponíveis para outros módulos que importam este módulo. Neste caso, TaskComponent pode ser utilizado fora do TaskModule.
Este módulo declara o TaskComponent, sua diretiva associada e um pipe personalizado. Ele importa o CommonModule para habilitar diretivas estruturais como *ngIf e *ngFor. O TaskComponent é exportado para que possa ser reutilizado em outros módulos.
Criando um Módulo para o TaskListComponent
Nesta etapa, será criado um módulo para o TaskListComponent. Crie um novo módulo na pasta task-list:
Agora que o arquivo task-list.module.ts foi criado dentro da pasta task-list, podemos implementá-lo
task-list-module.ts
Este módulo declara o TaskListComponent, responsável por exibir uma lista de tarefas. Ele importa o TaskModule para acessar o componente de tarefa e o FormsModule para recursos como formulários de criação de tarefas. O componente é exportado para que possa ser utilizado em outros módulos.
Criando o Módulo Raiz
Nesta etapa, será definido o módulo principal que atua como ponto de partida de toda a aplicação.
Toda aplicação Angular necessita de um módulo raiz que informa ao Angular como iniciar o aplicativo. Este módulo reúne todos os elementos necessários: recursos internos do Angular, módulos personalizados e o componente raiz.
Crie um novo módulo na pasta app:
A flag --flat instrui o Angular CLI a criar o arquivo do módulo sem gerar uma pasta separada.
app-module.ts
Este módulo atua como ponto de entrada do aplicativo. Ele importa o BrowserModule, necessário para executar o Angular no navegador, e o TaskListModule, que contém a funcionalidade principal para gerenciamento de tarefas. O AppComponent é definido como componente raiz para inicializar a aplicação.
Configurando o Ponto de Entrada
Esta etapa atualiza o ponto de entrada do aplicativo para iniciar utilizando o módulo raiz em vez de um componente independente.
Abra o main.ts e substitua seu conteúdo pelo seguinte:
main.ts
Este código inicializa o aplicativo utilizando o AppModule. Esta configuração ilustra a arquitetura modular: a aplicação é dividida em módulos, cada um encapsulando seus componentes, diretivas, pipes, serviços e outros elementos.
A arquitetura modular no Angular auxilia na organização da aplicação em blocos lógicos, tornando o código escalável, bem estruturado e reutilizável.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 3.13Arquitetura Modular no Angular
Deslize para mostrar o menu
Para experimentar com segurança com módulos, deve-se criar uma cópia do projeto existente. Essas alterações são apenas para prática e não afetarão o projeto original. Nos capítulos seguintes, o foco retornará para a construção de aplicações utilizando componentes autônomos.
Criando um Módulo para o TaskComponent
Esta etapa envolve a criação de um módulo para o TaskComponent. O módulo irá declarar o componente, uma diretiva relacionada e um pipe.
Para gerar um módulo no Angular, existe um comando específico na CLI:
Agora que o arquivo task.module.ts foi criado dentro da pasta task, podemos implementá-lo
task-module.ts
O array exports em @NgModule especifica quais componentes, diretivas ou pipes devem estar disponíveis para outros módulos que importam este módulo. Neste caso, TaskComponent pode ser utilizado fora do TaskModule.
Este módulo declara o TaskComponent, sua diretiva associada e um pipe personalizado. Ele importa o CommonModule para habilitar diretivas estruturais como *ngIf e *ngFor. O TaskComponent é exportado para que possa ser reutilizado em outros módulos.
Criando um Módulo para o TaskListComponent
Nesta etapa, será criado um módulo para o TaskListComponent. Crie um novo módulo na pasta task-list:
Agora que o arquivo task-list.module.ts foi criado dentro da pasta task-list, podemos implementá-lo
task-list-module.ts
Este módulo declara o TaskListComponent, responsável por exibir uma lista de tarefas. Ele importa o TaskModule para acessar o componente de tarefa e o FormsModule para recursos como formulários de criação de tarefas. O componente é exportado para que possa ser utilizado em outros módulos.
Criando o Módulo Raiz
Nesta etapa, será definido o módulo principal que atua como ponto de partida de toda a aplicação.
Toda aplicação Angular necessita de um módulo raiz que informa ao Angular como iniciar o aplicativo. Este módulo reúne todos os elementos necessários: recursos internos do Angular, módulos personalizados e o componente raiz.
Crie um novo módulo na pasta app:
A flag --flat instrui o Angular CLI a criar o arquivo do módulo sem gerar uma pasta separada.
app-module.ts
Este módulo atua como ponto de entrada do aplicativo. Ele importa o BrowserModule, necessário para executar o Angular no navegador, e o TaskListModule, que contém a funcionalidade principal para gerenciamento de tarefas. O AppComponent é definido como componente raiz para inicializar a aplicação.
Configurando o Ponto de Entrada
Esta etapa atualiza o ponto de entrada do aplicativo para iniciar utilizando o módulo raiz em vez de um componente independente.
Abra o main.ts e substitua seu conteúdo pelo seguinte:
main.ts
Este código inicializa o aplicativo utilizando o AppModule. Esta configuração ilustra a arquitetura modular: a aplicação é dividida em módulos, cada um encapsulando seus componentes, diretivas, pipes, serviços e outros elementos.
A arquitetura modular no Angular auxilia na organização da aplicação em blocos lógicos, tornando o código escalável, bem estruturado e reutilizável.
Obrigado pelo seu feedback!
