Angular 6 - Material Design com Angular Material - II

  Hoje vou apresentar o Angular Material e os conceitos básicos de como usar o recurso em um projeto Angular 6.

Continuando a primeira parte deste artigo vamos agora incluir o roteamento e permitir a navegação para outras páginas.

Nossa aplicação já possui um leiaute definido usando o Angular Material vamos então definir novas rotas no arquivo app.module.ts.

Abrindo este arquivo, primeiro temods que inclui uma referência a RouterModule e Routes:

import { RouterModule, Routes } from '@angular/router';

A seguir vamos incluir a configuração das rotas no array de rotas conforme abaixo:

const appRoutes: Routes = [
  { path: 'primeira-pagina', component: PrimeiraPaginaComponent },
  { path: 'segunda-pagina', component: SegundaPaginaComponent },
  { path: 'terceira-pagina', component: TerceiraPaginaComponent }
];

Naturalmente as páginas ainda não estão disponíveis. Vamos criar esses componentes mais adiante.

A fim de ativar a configuração das rotas para nossa aplicação precisamos também adicionar um RouterModule na seção imports do @NgModule:

imports: [
    ...
    RouterModule.forRoot(appRoutes),
    ...
  ],

O código completo a ser incluído no arquivo app.module.ts é visto a seguir:

O próximo passo é incluir um router outlet (o local onde o conteúdo do componente route será inserido) dentro de um elemento <mat-sidenav-content> no arquivo minha-nav.component.html :

<router-outlet></router-outlet>
Comforme mostra a figura abaixo:

E para completar precisamos atualizar os links do menu da barra lateral e usar a diretiva routerLink para apontar para as respectivas rotas no arquivo minha-nav.component.html:

<mat-nav-list>
  <a mat-list-item routerLink="/primeira-pagina">Cadastro</a>
  <a mat-list-item routerLink="/segunda-pagina">Relatórios</a>
  <a mat-list-item routerLink="/terceira-pagina">Contato</a>
</mat-nav-list>

Agora só falta gerar os componentes usando o comando ng generate:

ng generate component PrimeiraPagina
ng generate component SegundaPagina
ng generate component TerceirarPagina

Conforme mostrado a seguir:

Ao final nosso projeto deverá possuir a seguinte estrutura:

A seguir você pode customizar os arquivos html de cada componente para renderizar o conteúdo a seu critério.

Usando o componente MatCard

A título de exemplo eu vou personalizar o componente PrimeiraPaginaComponent usando outros componentes do Angular Material.

Veja os componentes disponíveis neste link : https://material.angular.io/components/categories.

Vou usar o componente MatCard no nosso componente PrimeiraPaginaComponent.

Para isso temos que importar o recurso MatCardModule no arquivo app.module.ts :

import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, 
MatListModule, MatCardModule } from '@angular/material';

Obs:  Na verdade ele já deve ter sido importado.

A seguir inclua o seguinte código no arquivo primeira-pagina.component.html : (baseado no exemplo desta página: https://material.angular.io/components/card/examples )

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Andrômeda</mat-card-title>
    <mat-card-subtitle>Galáxias</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="http://www.macoratti.net/Imagens/andromeda.jpg" alt="Andromeda">
  <mat-card-content>
    <p>
      A galáxia de Andrômeda (Messier 31, NGC 224), é uma galáxia espiral
      localizada a cerca de 2,54 milhões de anos-luz de distância da Terra,
      na direção da constelação de Andrômeda. 
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Gostei</button>
    <button mat-button>Compartilhe</button>
  </mat-card-actions>
</mat-card>

Para testar digite o comando para ng serve para iniciar um servidor HTTP na porta 4200.

Abrindo o navegador em http://localhost:4200 teremos nossa aplicação exibindo o componente de navegação,e , clicando em Cadastro teremos a primeira pagina exibida:

E dessa forma já podemos navegar para as páginas criadas e definidas pelos componentes da nossa aplicação.

Nada mal para um primeiro contato com o Angular Material.

Aguarde mais artigos sobre o assunto...

Pegue o código dos componentes:  Exemplo_AngularMaterial.zip

"Respondeu Jesus: O meu reino não é deste mundo; se o meu reino fosse deste mundo, pelejariam os meus servos, para que eu não fosse entregue aos judeus; mas agora o meu reino não é daqui."
João 18:36

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