Angular 2 - Cadastro de Clientes - V

 Neste artigo vou mostrar como criar um cadastro de clientes e fazer o CRUD usando o Angular 2 e o Visual Studio Code.

No artigo anterior criamos o nosso o componente de detalhe do cliente e a respectiva página html.

Neste artigo vamos definir as rotas da nossa aplicação para poder permitir a navegação entre páginas e exibir a página de detalhe.

Usamos o roteamento para separar diferentes partes de nossa aplicação, e, geralmente (mas nem sempre) usamos um caminho informado na URL para denotar nossa localização. Ex: /login

Nota: Lembre-se que em aplicações SPA (Single Page Application) não temos um refresh da página mas alterações em partes da página que esta sendo alterada.

Existem três componentes principais que usamos na configuração do roteamento no Angular:

- Routes - descreve as rotas da nossa aplicação que desejamos usar;
- RouterLink - é usado para vincular e navegar entre rotas;
- RouterOutlet - é um componente "marcador de posição" que se expande para exibir o conteúdo de outras rotas;

Definindo o <base href> no arquivo index.html

O router (roteador) usa o history.pushState do navegador para navegação. Graças ao pushState, você pode fazer com que os caminhos das URLs no aplicativo se pareçam da forma como você deseja que eles sejam exibidos, ex: Localhost:3000/login-teste

Você deve adicionar um elemento <base href> no arquivo index.html da aplicação para que o roteamento pushState funcione. O navegador usa o valor href base para prefixar URLs relativas ao referenciar arquivos CSS, scripts e imagens.

Assim se sua aplicação estiver rodando no endereço:  www.macoratti.net o href base vai criar caminhos relativos; assim para ir para a página www.macoratti.net/login basta informar login.

Abra o arquivo index.html e adicione o elemento base href logo após a tag <head>.  Se a pasta app for a raiz do aplicativo, como no nosso caso, defina o valor href em index.html exatamente como mostrado abaixo:(destacado em azul)

<html>
  <head>
    <base href="/">
    <title>Cadastro de Cliente</title>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    ....
    ....
    ....
</html>

Pronto, agora a url localhost:3000 esta roteada para /.

Criando rotas na aplicação com RouterModule

Para adicionar rotas em nossa aplicação, segundo o style guide do Angular, devemos criar um arquivo de Módulo.

Selecione a pasta app e crie o arquivo app-routing.module.ts. A nomenclatura do arquivo é definida assim :  nome-do-modulo-routing.module.ts

A seguir inclua o seguinte código neste arquivo :

import { NgModule } from '@angular/core';
import { RouterModule, Routes} from '@angular/router'
const appRoutes : Routes = [ 
    {
        path: '',
        redirectTo: '/cliente',
        pathMatch: 'full'
    }
]
@NgModule({
     imports : [
         RouterModule.forRoot(appRoutes)
     ],
     exports: [
         RouterModule
     ]
})
export class AppRoutingModule {}

 

Criamos a classe AppRoutingModel e importamos os módulos NgModule, RouterModule e Routes.

A seguir definimos um array de rotas - appRoutes -  usando a classe Routes onde definimos a nossa rota:

const appRoutes : Routes = [
    {
        path: '',
        redirectTo: '/cliente',
        pathMatch: 'full'
    }
]

Aqui usamos o path para especificar a URL, no nosso caso , path: '', indica a raiz da nossa aplicação , no exemplo, localhot:3000/.

Depois usamos redirecTo: '/cliente' ,  para indicar para onde devemos ir quando acessarmos a raiz da aplicação. No exemplo estamos redirecionando para a rota /cliente.

Agora que temos o array de rotas contendo a configuração de roteamento, podemos passar essa matriz de configuração para o método RouterModule.forRoot(appRoutes).  Assim estamos informando que ao roteador para rotear a nossa aplicação a partir do root (raiz) passando as rotas definidas.

Este método retorna um módulo Router que contém nossa configuração. A chamada do método forRoot é colocada dentro do array imports porque queremos importar o módulo resultante em AppRoutingModule.

Nota: O método forRoot() só deve ser usado para criar RouteModules que são usados a nível de aplicativo (no AppModule).

Finalmente estamos exportando o nosso modulo RouterModule para que possamos usar esse roteamento na aplicação.

Agora que terminamos a definição do nosso módulo de roteamento temos que invocar esse módulo no módulo principal da aplicação que é o módulo AppModule.

Abra o arquivo app.module.ts e inclua o código abaixo, destacado em azul, no arquivo :

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule} from './app-routing.module';
import { ClientesModule } from './clientes/clientes.module';
@NgModule({
    imports : [AppRoutingModule, BrowserModule, ClientesModule],
    declarations :[AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

 

No código estamos importando a classe AppRoutingModule para poder usar o roteamento definido.

Ao testar a nossa aplicação veremos o seguinte resultado:

Observe que temos o erro :  Cannot match any routes. URL Segment :  'cliente'.

Ou seja, não foi encontrada nenhuma correspondência para a rota 'cliente'.

Por quê ?

Porque não definimos uma rota cliente ainda.

Definimos uma rota que ao acessar localhot:3000 redireciona para /cliente.

Para que a aplicação volte a funcionar temos que definir a rota cliente, e, temos que fazer isso criando um outro arquivo de roteamento na pasta clientes.

No próximo artigo vamos continuar a definir as rotas da nossa aplicação.

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti