Fala, pessoal!
Chegamos à Parte 03 da nossa série de artigos para o Training Center. Caso tenha perdido a primeira e a segunda parte, não deixe de acompanhar clicando nos links abaixo:
Você também poderá baixar o projeto que está no GitHub clicando neste link.
Não poderia deixar também de agradecer o carinho dos leitores e o feedback positivo que tenho recebido. Eles são muito importantes para que eu continue motivado a escrever.
Onde paramos
No exato momento nossa aplicação está assim:
Incrível! Estou curtindo muito, e vocês? Neste artigo criaremos o roteamento da aplicação com um módulo do Angular nativo chamado Router. Entenda como roteamento sendo a criação das rotas da aplicação (como se fosse o menu: home, produtos, categorias). Essas rotas, quando são clicadas, chamam os components correspondentes de cada rota.
Exemplo: ao clicar no botão “Crie sua conta“, ativamos o component cadastro-conta, que é exibido no lugar do component content.
Observe que a imagem mostra uma parte chamada router-outlet, onde estiver sido declarado essa tag, os components aparecerão. Portanto, vamos editar nosso app.component.html com o código abaixo.
Código do arquivo app.component.html:
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
Apenas substituímos a tag do component app-content pela tag router-outlet.
Para usar o router-outlet precisamos declará-lo no app.module.ts e realizar algumas configurações básicas. Então, abra o arquivo app.module.ts e siga os passos:
1 – Importe o CUSTOM_ELEMENTS_SCHEMA:
CUSTOM_ELEMENTS_SCHEMA2 – Declare em “@NgModule” um schema com o valor: “schemas: [CUSTOM_ELEMENTS_SCHEMA]”:
schemas: [CUSTOM_ELEMENTS_SCHEMA]
Veja como ficou nossa aplicação:
Repare na renderização dos components:
Nosso component content sumiu, mas temos o router-outlet que se encarregará de renderizar quaisquer components que quisermos ali. Sabendo disso, vamos criar a rota default da aplicação.
Criando o App Routing Module
No seu terminal, cole o comando abaixo:
ng generate module app-routing — flat — module=app
Abra o arquivo app.module.ts e importe o routing que acabamos de criar:
import do app-routing.module.ts.
import { AppRoutingModule } from ‘./app-routing/app-routing.module’;Declaração do módulo AppRoutingModule no app.module.ts.
imports: [
...
AppRoutingModule
]
Configurando as rotas para navegação
Abra o arquivo app-routing.module.ts e atualize com o código abaixo.
Importe os módulos RouterModule e Routes do pacote “@angular/router”.
import { RouterModule, Routes } from ‘@angular/router’;Exporte o RouterModule:
@NgModule({
..
exports: [RouterModule]
})
Criando as rotas da aplicação
Chegou a melhor parte: criar as rotas da nossa aplicação. Primeiro, importe o component que você deseja usar no roteador, em nosso caso o content.component.ts.
import { ContentComponent } from ‘./../content/content.component’;
E agora, crie uma contante chamada routes e diga que seu tipo é Routes. Esse cara nada mais é do que um Array de objetos com os principais atributos “path” (caminho da rota) e “component” (component) que será renderizado quando o path for chamado.
const routes: Routes = [
{ path: 'cadastro', component: ContentComponent }
];Declare em “@NgModule” o RouterModule.forRoot(routes) como abaixo:
@NgModule({
imports: [
…
RouterModule.forRoot(routes)
],
});
Testando a rota
Chegou o momento mais bacana do artigo. No navegador, acesse o endereço: http://localhost:4300/cadastro e vamos ver no que vai dar.
Sucesso! Repare no inspect do navegador que abaixo do router-outlet, temos o o componet content. Isso é uma prova de que nosso roteador está funcionando.
Não para por ai!
Vamos voltar para a home da aplicação e veremos no que vai dar:
Não se assuste, é simples entender! Nosso roteador ainda está funcionando, mas agora nossa url mudou e está assim: http://localhost:4300. Em nosso arquivo app-routing.module.ts não configuramos nenhum path para essa url.
Criando path para a home
Ainda no arquivo app-routing.module.ts, adicione um novo path em branco, chamando o component Content. Assim, quando iniciarmos a aplicação, por default já teremos nosso banner.
const routes: Routes = [
{ path: '', component: ContentComponent },
{ path: 'cadastro', component: ContentComponent }
];
Funcionamento da aplicação:
Cadastro de usuários no Banco
Gere um component para cadastro de novos usuários:
ng g c cadastro-clientes
Agora vamos criar a rota de cadastro de clientes. Siga os passos:
1 – No arquivo app-rounting.module.ts, importe o component que acabamos de criar:
import { CadastroClientesComponent } from './../cadastro-clientes/cadastro-clientes.component';2 – Atualize a constante routes com um novo path para o component que acabamos de importar:
const routes: Routes = [
{ path: '', component: ContentComponent },
{ path: 'cadastro-clientes', component: CadastroClientesComponent },
];
Pouca coisa mudou. Agora, quando acessarmos no nevegador o endereço http://localhost:4300/cadastro-clientes, teremos o resultado:
Atualizando a página de cadastro de clientes
Vamos criar o formulário de cadastro de clientes do banco. Como se trata de um projeto de teste, ignore os dados requeridos na aplicação.
Abra o arquivo cadastro-clientes.component.html e atualize com a marcação abaixo:
<div class="container">
<div class="row box-cadastro">
<div class="col-12">
<h3 class="text-center">Você está a um passo de criar sua conta Training Banking</h3>
<form class="mt-5">
<div class="form-group">
<input type="text" class="form-control cadastro" id="exampleInputEmail1" aria-
describedby="emailHelp" placeholder="Nome">
</div>
<div class="form-group">
<input type="number" class="form-control cadastro" id="exampleInputPassword1" placeholder="CPF">
</div>
<div class="form-group">
<input type="email" class="form-control cadastro" id="exampleInputPassword1"
placeholder="E-mail">
</div>
<div class="form-group">
<input type="tel" class="form-control cadastro" id="exampleInputPassword1" placeholder="Telefone">
</div>
<div class="form-group">
<input type="text" class="form-control cadastro" id="exampleInputPassword1" placeholder="Endereço">
</div>
<button type="submit" class="btn btn-cadastro btn-lg">Cadastrar</button>
</form>
</div>
</div>
</div>Atualize também o estilo do formulário. Abra o arquivo cadastro-clientes.component.css:
.box-cadastro {
margin: 30px;
padding: 30px;
}
.cadastro {
padding: 10px;
border: none;
border-bottom: 2px solid #ddd;
border-radius: 0;
outline: none;
height: 50px;
}
.btn-cadastro {
width: 30%;
display: block;
margin: 0 auto;
padding: 10px;
background-color: #dcbc81;
font-weight: bold;
}
Testando a aplicação:
Ótimo! Estamos quase finalizando. Agora só precisamos de um botão na home convidando o usuário a criar sua conta. Para isso siga, os passos:
1 – No arquivo content.component.html, crie um botão html com um evento de click, disparando um método:
<button class=”btn btn-home-cadastro-clientes” (click)=”gotoCadastroClientes()”>Crie sua conta</button>
2 – Adicione o estilo do botão de cadastro no arquivo content.component.css:
.btn-home-cadastro-clientes {
position: absolute !important;
top: 390px;
padding: 20px;
font-size: 25px;
width: 40%;
background: #000;
color: #fff;
border: 2px solid;
}
3 – Repare que em nosso botão html no evento de click adicionamos um método chamado gotoCadastroClientes. Abra o content.component.ts e inicie esse método.
gotoCadastroClientes() {
this.router.navigate(['cadastro-clientes'];
}
4 – No constructor, declare o router como privado:
constructor(private router: Router) { }5 – Importe o Router do pacote “@angular/router”:
import { Router } from '@angular/router';
Agora tudo indica que, ao clicarmos no botão “Crie sua conta”, seremos levados à rota /cadastro-clientes.
Vamos ver:
Sucesso!
Nosso artigo vai ficando por aqui. Espero ter ajudado vocês. Nos próximos artigos criaremos o cadastro dos novos usuários e autenticaremos a aplicação.
Ficou com alguma dúvida? Deixe nos comentários. Aproveite também pra sugerir features para os próximos artigos lá no Twitter. Siga: @danilodev_silva.
Grande abraço!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?