Blog em Angular – Parte II

Na primeira parte, nós finalizamos o layout do nosso blog. Contudo, nossos links, presentes na barra de navegação, não funcionam. Vamos resolver isso.

• Artigos – Deve mostrar uma lista dos artigos publicados no site
• Contato – Deve mostrar informações a respeito do autor do Blog

Ao criar um blog em Angular, leve sempre em consideração a ideia de transformar cada link em um módulo.

Contato

O módulo Contato será responsável pela funcionalidade da página Contato. Lembra como é criado um módulo no Angular?

ng g m contato

Neste caso em específico, vamos criar um componente único para este módulo, sendo assim a flag --flat deve ser usada. Assim, não será criado uma pasta nova para o componente.

ng g c contato --path=src/app/contato --module=contato --export --flat

Tudo bem aqui, nada ainda visível. Vamos acertar isso, abra o arquivo app-routing.module.ts, e configure a nova rota.

import { ContatoComponent } from './contato/contato.component';

const routes: Routes = [
  {
    path: 'contato',
    component: ContatoComponent,
  },
];

O código anterior indica que quando a URL do navegador apontar para o caminho de Contato, nosso app deve ativar a rota e exibir o ContatoComponent na tela. A propriedade rota no módulo articula as rotas com os componentes. Este array/vetor define através de chave/valor a URL e o componente a ser ativado.

Agora importe o módulo ContatoModule em AppModule:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule,
    SharedModule,
    ContatoModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Lembre-se da sentença de importação do módulo no inicio do arquivo.

Componentes roteados, como ContatoComponent, precisam de um lugar para ser carregado. Abra app.component.html e adicione a diretiva router-outlet:

<app-header></app-header>
<div class="container">
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

Agora precisamos conectar a rota configurada ao atual link disponível no componente header.

<li class="nav-item">
        <a routerLink="/contato" routerLinkActive="active" class="navlink" >Contato</a>
      </li>

O código anterior, a diretiva routerLink aponta para a propriedade path no objeto de configuração da rota. Também adicionamos a diretiva routerLinkActive, que define a classe ativa no elemento âncora quando a rota específica é ativada. Observe que na propriedade omitimos “\”, mas na rota ela se faz necessário.

As diretivas routerLink e routerLinkActive fazem parte do pacote de rotas do Angular. Nó precisamos importar o módulo RouterModule no módulo core para usá-lo.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [HeaderComponent],
  imports: [CommonModule, RouterModule],
  exports: [HeaderComponent],
})
export class CoreModule {}

Pronto! Navegue para localhost:4200 e clique em Contato, se estiver tudo certo, o novo conteúdo deve ser apresentado.

O módulo responsável por mostrar os artigos em nosso blog será o módulo artigos [óbvio não!?]. Este módulo será conectado ao Scully.

ng g m artigos --route=artigos --module=app-routing

No comando anterior, nós passamos alguns parâmetros adicionais: –route e –module.

• -- route: Define o caminho da URL para esta funcionalidade
• --module: Indica o módulo a ser ativado para a URL definida.

O Angular CLI realiza mais atividades além de criar o módulo.

• Ele cria um componente roteado na pasta src\app\artigos que será ativado por padrão pela rota.
• Ele cria um módulo de roteamento, chamado artigos-routing.module.ts, que contém a configuração de roteamento do módulo de artigos.
• Ele adiciona um novo objeto de configuração de rota na configuração de rota do módulo principal de aplicação que ativa o módulo de artigos.

Ele importa o RouterModule usando o método forChild para passar a configuração de roteamento para o roteador Angular. Se dermos uma olhada no módulo de roteamento principal da aplicação, veremos que ele segue uma abordagem ligeiramente diferente:

import { NgModule, Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ContatoComponent } from './contato/contato.component';

const routes: Routes = [
  {
    path: 'contato',
    component: ContatoComponent,
  },
  { path: 'artigos', loadChildren: () => import('./artigos/artigos.module').then(m => m.ArtigosModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

O método forChild é usado em módulos, enquanto o método forRoot deve ser usado apenas no módulo principal de aplicação. A configuração de rota do módulo de artigos contém apenas uma rota que ativa o ArtigosComponent. O caminho da rota é definido como uma sequência vazia para indicar que é a rota padrão do módulo de roteamento. Significa essencialmente que o ArtigosComponent será ativado sempre que esse módulo estiver carregado. Mas como o módulo de artigos é carregado em nossa aplicação? A segunda rota do módulo de roteamento principal contém um objeto de configuração de rota que não ativa um componente, mas sim um módulo. Ele usa o método loadChildren para carregar o ArtigoModule dinamicamente quando a navegação aciona o caminho dos artigos.

A abordagem anterior é chamada de carregamento preguiçoso – lazy loading e melhora a inicialização e o desempenho geral de um aplicativo Angular. Ele cria um pacote separado para cada módulo carregado de forma preguiçosa – lazy, que é carregado mediante solicitação, reduzindo o tamanho final do pacote e o consumo de memória do seu aplicativo. Vamos ligar a nova rota para o nosso componente de cabeçalho.

Abra o arquivo header.component.html e adicione as diretivas routerLink e routerLinkActive no link HTML:

<li class="nav-item">
        <a routerLink="/contato" routerLinkActive="active" class="nav-link">Contato</a>
      </li>
      <li>
        <a routerLink="/artigos" routerLinkActive="active" class="nav-link">Artigos</a>
      </li>

Para continuar a transformação deste app Angular em Blog, precisamos adicionar algumas rotas em app-routing.module.ts. Adicionamos uma rota padrão para redirecionar automaticamente os usuários do nosso blog para a rota de artigos ao visitar o blog.

const routes: Routes = [
  {
    path: 'contato',
    component: ContatoComponent,
  },
  {
    path: 'artigos',
    loadChildren: () =>
      import('./artigos/artigos.module').then((m) => m.ArtigosModule),
  },
  { path: '', pathMatch: 'todos', redirectTo: 'artigos' },
  {
    path: 'blog',
    loadChildren: () => import('./blog/blog.module').then((m) => m.BlogModule),
  },
  { path: '**', redirectTo: 'artigos' },
];

Além disso, criamos um novo objeto de configuração { … }, com o caminho ** definido para a rota de artigos. A sintaxe ** é chamada de wildcard route, ou rota curinga, e é acionada quando o roteador não pode corresponder a um URL solicitado.

Ao trabalhar com rotas, defina as rotas mais específicas primeiro e, em seguida, adicione as genéricas, como as rotas padrão e curinga. O roteador Angular analisa a configuração da rota na ordem em que definimos e retorna a primeira que corresponder primeiro – first match wins.

Já habilitamos e configuramos o roteamento em nosso aplicativo Angular. No próximo post, estabeleceremos a infraestrutura necessária para adicionar recursos de blog ao nosso aplicativo.

Até lá!
🖖