Criando rotas no Angular 4

Nesse artigo, veremos como podemos trabalhar com rotas em um projeto Angular 4. Nosso primeiro passo sera a criação de um novo projeto. Para isso, abra o seu Terminal ou Cmd no caso do Windows, selecione um diretório onde você deseja criar o seu projeto e execute o comando a baixo.

ng new angular-route

Assim que o seu projeto tiver sido criado e ainda no seu terminal, execute o comando cd angular-route. Em seguida, baixe os pacotes necessários para que possamos rodar o nosso projeto. Para isso, execute o comando a baixo no seu terminal dentro do diretório do seu projeto:

npm install

A execução desse comando ira criar um novo diretório na nossa Solution chamado node_modules.

Agora, com o seu código aberto em um editor de texto de sua preferência, vamos criar o arquivo que será responsável pelas nossas rotas. Vá em src/app/ e crie o arquivo app.router.ts. Em seguida, cole o código a baixo nele:

import { Routes, RouterModule } from '@angular/router'
const routes: Routes = [
    //home
    {
        path: '',
        component: HomePageComponent
    },
    //Products
    {
        path: 'about',
        component: AboutPageComponent
    }   
];
export const RoutingModule = RouterModule.forRoot(routes);

Analisando o código acima, na primeira linha nós estamos importando dois pacotes. O Routes utilizamos para criar as nossas rotas e o RouterModule, para configurar a nossa rota e passar para o nosso module. Em seguida, temos uma constante com o valor Routes passando um array com as nossas primeiras rotas. Notem que temos dois atributos: path, para passar o valor que irá na nossa URL e o Component. Nele, nós passamos a chamada que irá no nosso navegador.

Vamos, agora, criar os nossos componentes HomePage e AboutPage. Como uma boa prática e pensando em deixar o nosso código organizado, eu gosto de criar as páginas dentro de um diretório chamado pages. Para isso, execute o comando ng g c pages/HomePage, assim que ele finalizar, execute o comando: ng g c pages/AboutPage. A execução deles irá criar um novo diretório dentro da nossa solução com dois novos arquivos: HomePageComponent e AboutPageComponent.

Agora, volte no seu arquivo app.router.ts e adicione as referências dos nossos componentes.

Para que as nossas rotas funcionem, nós iremos precisar adicionar a diretiva abaixo dentro do nosso arquivo HTML app.componet.html.

<router-outlet></router-outlet>

Para que possamos entender melhor esse passo, adicionamos a diretiva no arquivo app.component.html porque esse é o primeiro componente chamado quando a nossa aplicação é executada. Agora, nos precisamos importar a nossa rota dentro do nosso arquivo module.ts. Precisamos desse passo para que o nosso componente AppComponent possa trabalhar com o roteamento. Adicione RoutingModule em imports, no seu arquivo module.ts, e execute o comando ng serve para rodar o seu projeto.

Podemos ver na imagem abaixo que o projeto já está direcionando corretamente para nossa rota default configurada no arquivo routing.ts com path:”” passando o componente HomePageComponent.

Agora, para que possamos testar a nossa segunda rota, digite na Url /about. Ela irá nos direcionar para o componente AboutPageComponent. Para finalizar esse artigo, podemos ver o resultado dessa chamada da nossa segunda rota na imagem a baixo:

Bom, caso tenha interesse no código utilizado nesse artigo, segue o link dele no GitHub.