Agora que temos um sistema em angular rodando e um componente criados, vamos falar sobre dois dos principais conceitos do Angular: Módulos e Rotas. Depois vamos estender o componente com alguns outros elementos.

Utilização de Módulos e Submódulos

Um módulo no angular é um conjunto isolado de funcionalidades, módulos podem ser importados e trazem consigo todos as suas declarações: Serviços, Componentes, Pipes, entre outros.

O angular somente faz a injeção de dependência e outras funcionalidades através de módulos, todos os recursos do angular devem estar declarados em módulos e um mesmo recurso não pode ser declarado em dois módulos simultaneamente. Para reutilizar alguma coisa de um módulo em outro, deve-se exportar o recurso (componente, service, pipe) e importar um módulo no outro módulo desejado.

Deve haver ao menos um módulo no angular que é o módulo principal, por padrão é o app.module.ts. Vamos observar a estrutura do módulo app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Primeiramente devemos exportar uma classe no typescript com anotações @NgModule, essa anotação diz que uma classe representa um módulo. Nosso módulos tem as configurações:

• Declarations – Um array contendo todas as classes que representam componentes de nossa aplicação.
• Imports – Importamos outros módulos aqui, nesse caso estamos importando o módulo de suporte ao navegador (BrowserModule) que sempre será importado em uma aplicação web, e o AppRoutingModule, que é um módulo que nos foi criado quando dizemos que iremos utilizar as rotas do angular
• Providers – Um array dizendo quais são os serviços que criamos, por enquanto está vazio
• Bootstrap – Bootstrap diz que o componente será carregado juntamente com o módulo, assim que o módulo é carregado. Esse componente que será responsável por conter outros para montar nossa aplicação. Ao menos um componente de bootstrap deve haver no módulo root AppModule.

Um módulo também pode exportar outros. Nessa técnica teríamos por exemplo uma biblioteca composta de vários módulos e exportaríamos todos em um módulo principal. Também pode ser usada como no exemplo da classe AppRoutingModule do arquivo app-routing.module.ts para configurar e exportar um módulo de rotas, que será importado pelo módulo principal, fazendo com que o módulo principal fique menos carregado de código. Vejamos o que ele faz:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Podemos ver que é declarado novamente o módulo através da anotação @NgModule, que ele importa um módulo de Rotas, e exporta o mesmo módulo para ser importado no módulo principal.

A utilização do RouterModule.forRoot(routes) significa que as rotas que criamos serão adicionadas no caminho principal da aplicação. Temos também uma técnica em que rotas podem ser criadas para cada módulo e combinadas no módulo principal. Por falar em rotas, vamos criar nossa primeira rota.

Criação de rotas para páginas

Vamos criar um componente que seria uma página, crie uma pasta pages, e dentro dela um componente conforme no último tutorial:

first-page.component.ts