Angular 19: autenticação, proteção e manipulação de rotas

Iniciando as rotas - Apresentação

Introdução ao Curso de Rotas no Angular

Olá, estudante! Boas-vindas a este curso de rotas no Angular. Eu sou Mônica Hillman e serei a instrutora que irá guiar durante toda essa jornada de aprendizado.

Audiodescrição: Mônica é uma mulher branca, de cabelos loiros longos. Ela está utilizando uma camiseta azul marinho com a palavra "Alura" escrita nela.

Apresentação do Projeto CodeConnect

Durante o curso, nós iremos receber o projeto CodeConnect com todos os seus componentes e telas prontas. Partiremos da problemática de inserir as rotas para que essas páginas se comuniquem entre si.

Demonstração do Resultado Final

Vamos testar o resultado final? Estamos com o projeto aberto no navegador. A tela inicial é a de registro, que contém um formulário onde inseriremos o nome "gatobonifácil", o e-mail "gato.com" e uma senha composta por alguns caracteres aleatórios.

Após clicarmos em cadastrar, seremos redirecionados à lista de postagens, onde podemos selecionar uma postagem para visualizar os detalhes.

Conteúdos do Curso

Para implementar a navegação entre as telas, aprenderemos mais sobre o Angular Router, incluindo a utilização de Guards (guardas) para criar rotas privadas. Também utilizaremos o Router Outlet, que permite a utilização de um template (modelo) reutilizável em cada uma dessas telas. Além disso, exploraremos o Lazy Loading (carregamento preguiçoso) e os Resolvers (resolvedores).

Importância do Aprendizado de Rotas

Por que precisamos aprender tudo isso? Porque é muito provável que, ao iniciar um projeto em Angular, seja em uma empresa ou pessoalmente, tenhamos diversas telas e precisemos navegar entre elas. Para aproveitar ao máximo este curso, é importante já ter conhecimento em Angular e TypeScript, pois focaremos apenas na parte das rotas.

Conclusão e Próximos Passos

Se estiver interessado em aprender sobre tudo isso, não deixe de se matricular. Nos vemos no próximo vídeo. Até lá!

Como este vídeo é apenas uma introdução e demonstração da aplicação final, não há snippets de código a serem integrados neste momento. Nos próximos vídeos, começaremos a explorar o código necessário para implementar as funcionalidades discutidas.

Iniciando as rotas - Objeto Route

Introdução ao Projeto CodeConnect

Estamos desenvolvendo uma aplicação chamada CodeConnect, que é uma rede social para pessoas desenvolvedoras compartilharem projetos entre si. É como se fosse uma combinação de GitHub com Instagram. Atualmente, já possuímos alguns elementos nesse projeto, como o layout das páginas e dos componentes. Estamos utilizando Angular, TypeScript e CSS.

Conectando Páginas e Definindo Rotas

Agora, precisamos conectar essas páginas já existentes entre si. Temos, por exemplo, a tela inicial, que é acessada ao executar o projeto, e que corresponde à tela de cadastro. A tela de cadastro consiste em duas colunas: uma com uma imagem e a outra com um formulário. O formulário solicita as informações de nome, e-mail e senha. Vamos inserir algumas informações, como o nome "teste", o e-mail "teste@email.com" e uma senha com caracteres aleatórios. Ao clicar em cadastrar, o esperado seria ser redirecionado para outra tela ou que esses dados fossem enviados para algum local. Atualmente, não acontece nada, e é a partir dessa etapa que iniciaremos este curso.

Precisamos definir rotas para possibilitar a movimentação entre as diferentes telas dessa aplicação. Para obter o projeto inicial, como estamos testando aqui, é possível acessar a atividade "preparando o ambiente", baixar o projeto, instalar as dependências e executá-las. Caso já tenha feito isso, vamos dar continuidade.

Configuração de Rotas no Angular

Vamos abrir o Visual Studio Code e acessar a pasta "src", depois a pasta "app". Dentro da pasta "app", já existem alguns arquivos construídos, como app.routes.server.ts e app.routes.ts. No Angular 19, ao construir um novo projeto, ele já sugere iniciar com rotas. Se essa opção for selecionada, os arquivos já virão construídos. Caso o projeto tenha sido iniciado sem rotas, deixaremos na atividade "para saber mais" os passos que podem ser seguidos.

Dando sequência, podemos acessar o app.routes.ts. Dentro dele, já temos uma variável chamada routes, que é do tipo Routes. Nela, podemos definir algumas rotas. Cada rota será um objeto. Para construir um objeto, utilizamos chaves. Na linha 2, pressionamos "Enter" e abrimos chaves. Dentro das chaves, para cada rota, precisamos de, no mínimo, duas propriedades: o path, que é o caminho da rota, e o component, que é o que queremos renderizar ao acessá-la.

Definindo a Primeira Rota

Primeiro, vamos definir a estrutura básica para as rotas:

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

export const routes: Routes = [

];

Agora, vamos adicionar a primeira rota, que será para o registro:

export const routes: Routes = [
    {path: "registro"}
];

Em seguida, precisamos especificar qual componente será renderizado quando essa rota for acessada:

export const routes: Routes = [
    {path: "registro", component: RegistroComponent}
];

É necessário fazer o import. Aqui, foi feito o autoimport. Caso não tenha ocorrido o autoimport, podemos ir na linha 2 e colocar o import:

import { RegistroComponent } from './paginas/registro/registro.component';

Essa é a sintaxe para cada rota que definirmos neste projeto e que desejarmos importar alguma das nossas páginas, que estão dentro da pasta "páginas".

Configuração do Componente Principal

No projeto Angular, temos um arquivo chamado app.component.html, que é responsável por renderizar o que aparece na nossa tela. Atualmente, ele consiste na nossa componente app.registro, apresentando uma tela fixa:

<app-registro></app-registro>

No entanto, desejamos que, ao iniciar a aplicação, as rotas sejam renderizadas de acordo com o que está na URL. Para isso, utilizaremos o router-outlet. Com o router-outlet, tudo o que queremos renderizar da rota será exibido dentro dessa tag:

<router-outlet></router-outlet>

Além disso, precisamos modificar o arquivo app.component.ts para importar o router-outlet. Atualmente, na linha 6, ele está utilizando o registro do componente, que não está mais presente no nosso HTML. Portanto, devemos remover essa importação tanto da linha 6 quanto da linha 2. Em seguida, importamos o router-outlet, colocando-o na linha 6 dentro de imports, e na linha 2, adicionamos a importação do nosso novo termo, o outlet:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = '4460-angular';
}

Caso o auto-import não tenha sido feito, a importação deve ser:

import { RouterOutlet } from '@angular/router';

Testando as Rotas

Após realizar essas alterações, vamos testar. No navegador, ao reiniciar a aplicação, percebemos que não conseguimos acessar a rota /. Isso ocorre porque, nas rotas que construímos, não há uma rota específica para /, mas sim para /registro. Ao acessar /registro, inicialmente aparece um erro, mas ao atualizar a tela, ele desaparece. Verificamos também que não há erros no terminal da aplicação nem no Visual Studio Code. O formulário aparece novamente dentro da rota /registro.

Adicionando Novas Rotas

Para criar uma nova rota, vamos abrir o Visual Studio Code e acessar o arquivo app.routes.ts. Dentro da lista de rotas, após a rota da linha 4, adicionamos um novo objeto com o path definido como "posts" e o component que desejamos renderizar. Podemos verificar o nome do componente dentro de src/app/páginas, que será o nosso lista-postagem.component:

import { ListaPostagemComponent } from '././paginas/lista-postagem/lista-postagem.component';

export const routes: Routes = [
    {path: "registro", component: RegistroComponent},
    {path: "posts", component: ListaPostagemComponent}
];

Vamos testar novamente. Após minimizar o Visual Studio Code e atualizar a tela, ao acessar a URL /posts, a aplicação exibe vários cards com diversos posts, conforme esperado pela tela de lista de postagens.

Conclusão e Próximos Passos

Daremos continuidade ao projeto, permitindo que essa tela seja acessada a partir do envio do formulário de registro. Nos vemos no próximo vídeo para continuar. Até lá!

Iniciando as rotas - Navegação

Introdução ao Redirecionamento Após Envio de Formulário

Para implementar o redirecionamento após o envio do formulário de registro na nossa aplicação CodeConnect, vamos seguir um passo a passo detalhado. Primeiro, precisamos criar um método que será responsável por essa lógica. Vamos começar abrindo o arquivo registro.componente.ts e adicionando um novo método chamado aoEnviar.

aoEnviar() {}

Verificação da Validade do Formulário

Este método será responsável por verificar se o formulário é válido. Utilizamos validações no formulário, então é importante garantir que o e-mail, nome e senha estejam corretos antes de prosseguir. Vamos adicionar uma condicional para verificar a validade do formulário.

if (this.registroForm.valid) {
  // Lógica de redirecionamento será adicionada aqui
}

Injeção do Router no Componente

Para realizar o redirecionamento, precisamos acessar o objeto router do Angular. Vamos injetá-lo no construtor do nosso componente, assim como fizemos com o FormBuilder.

private router: Router

Não se esqueça de importar o Router do Angular para que possamos utilizá-lo.

import { Router } from '@angular/router';

Implementação do Redirecionamento

Agora que temos acesso ao router, podemos utilizá-lo dentro do nosso método aoEnviar para redirecionar o usuário para a página de postagens (/posts) caso o formulário seja válido.

this.router.navigate(['/posts']);

Configuração do Evento de Envio no Formulário

Com o método aoEnviar configurado, precisamos garantir que ele seja chamado no momento certo, ou seja, quando o formulário for enviado. Para isso, vamos editar o arquivo registro.componente.html e adicionar o evento (ngSubmit) ao formulário.

(ngSubmit)="aoEnviar()"

O uso de (ngSubmit) é preferível ao onSubmit padrão do HTML, pois ele evita o comportamento padrão de recarregar a página ao enviar o formulário.

Teste e Conclusão

Agora, com tudo configurado, podemos testar a aplicação. Reinicie a aplicação, preencha o formulário com dados de teste e clique em cadastrar. Se tudo estiver correto, você será redirecionado para a página de postagens (/posts), confirmando que o redirecionamento foi implementado com sucesso.

Com isso, concluímos a implementação do redirecionamento após o envio do formulário de registro. Na próxima aula, continuaremos a explorar mais funcionalidades e conceitos importantes do Angular. Até lá!

Sobre o curso Angular 19: autenticação, proteção e manipulação de rotas

O curso Angular 19: autenticação, proteção e manipulação de rotas possui 87 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Iniciando as rotas
• Implementando rotas privadas
• Construindo um layout
• Utilizando parâmetros na rota
• Conhecendo lazy loading e resolvers