Criando rotas no Angular 4

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: Routes utilizamos para criar as nossas rotas e o RouterModule que iremos utilizar 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 ira na nossa URL e o Component nele nos passamos a chamada que ira no nosso no 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 ira 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 referencias dos nossos componentes.

Para que as nossas rotas funcionem, nos iremos precisar adicionar a diretiva a baixo dentro do nosso arquivo HTML app.componet.html.

<router-outlet></router-outlet>

Para que possamos entender melhor esse passo, nos adicionamos a diretiva no arquivo app.component.html porque esse é o primeiro componente chamado quando a nossa aplicação e 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 a baixo que o projeto já esta 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 ira 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.

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses
SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…
Chansondouce

Chanson douce

Chanson douce () – Drama, Crime – 1h 40min –   Nota: 6/10   Sinopse     Elenco Leïla Bekhti Como – Myriam Karin Viard