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.