Primeiras aulas do curso Angular parte 4: lapidando o projeto

Angular parte 4: lapidando o projeto

Alteração do title - O Serviço Title

Olá!

Aqui é Flávio Almeida, e eu serei seu instrutor neste curso de Angular parte 4.

O primeiro detalhe que iremos nos debruçar será: na tela de login do Sign In Component, e perceberemos que o título da aba da página é "Alurapic". Ao efetivarmos o login e acessarmos a timeline da aplicação e aba continua com o mesmo nome. Isso ocorre porque em index.html teremos a tag <title> configurada com o título fixo Alurapic. Como se trata de uma single page application que nunca é recarregada durante seu uso, a única página será o index. Por meio de JavaScript, o centro do sistema de rotas do Angular é trocado, mas o título permanece.

Sabemos que por uma questão de acessibilidade é interessante mudarmos o título de uma página. Além dessa questão, quando uma renderização é feita no server side usando Angular Universal, o título também influência em questões de SEO.

O que devemos trabalhar é: ao navegar entre de componentes por meio do sistema de rotas do Angular, a title da página deve ser alterado. Como isso pode ser realizado?

De uma forma mais simplificada, basta acessarmos a tela de login (signin.component.ts) e injetarmos no construtor um titleService, um artefato do próprio Angular:

constructor(
        private formBuilder: FormBuilder,
        private authService: AuthService,
        private router: Router,
        private platformDetectorService: PlatformDetectorService)
        private titleService: Title) { }

Em ngOnInit(), adicionaremos this.titleService.setTitle('Login')

ngOnInit(): void {
        this.titleService.setTitle('Login');
        this.loginForm = this.formBuilder.group({
            userName: ['', Validators.required],
            password: ['', Validators.required]
        });
        this.platformDetectorService.isPlatformBrowser() && 
        this.userNameInput.nativeElement.focus();        
    } 

Ao acessarmos novamente a página de login, já teremos o título "Login" na aba. Contudo, esse método apresenta um problema de manutenção, pois teremos que injetar essa serviço em todos os componentes de escopo de página, então ela não funciona em aplicações maiores. Nas próximas aulas aprenderemos a "pegar carona" no sistema de rotas do Angular para trocarmos o título da página sem que precisemos alterar qualquer componente.

Alteração do title - Interagindo com o sistema de rotas

O título de cada componente que equivale a uma página será definido no próprio sistema de rotas. Abriremos app.routing.module.ts e teremos nossa série de rotas. Na rota da timeline, inseriremos a propriedade data , em seguida definiremos o título como Timeline.

    path: 'user/:userName', 
        pathMatch: 'full',
        component: PhotoListComponent,
        resolve: {
            photos: PhotoListResolver
        }
        data: { 
            title: 'Timeline'
    },  

Na rota p/add, inseriremos a mesma estrutura, mas dessa vez com o título Photo upload.


        path: 'p/add', 
        component: PhotoFormComponent,
        canActivate: [AuthGuard],
        data: { 
            title: 'Photo upload'
    },

Para a rota p/:photoId inseriremos o título Photo detail; para not-found inseriremos o título Not found. Nos teremos de alterar também home.routing.module.ts, em que inseriremos a mesma estrutura de data e title, e ajustaremos os títulos Sign in e Sign up.

const routes: Routes = [
    { 
        path: '',
        component: HomeComponent,
        canActivate: [LoginGuard],
        children: [
            { 
                path: '',
                component: SignInComponent,
                data: { 
                    title: 'Sign in'
            }, 
            { 
                path: 'signup',
                component: SignUpComponent,
                data: { 
                    title: 'Sign up'
            },            
        ]
    },              
];

Em signin.component.ts removeremos a alteração bruta inicial que realizamos para inserção de título na página. Agora, abriremos o documento app.component.ts, o primeiro componente carregado da nossa aplicação. Precisaremos obter por meio de seu construtor um router, route do tipo Activated, titleService. Dessa maneira poderemos coletar qual a rota está sendo ativada no momento e saber informações sobre ela. Esse código ficará armazenado no ciclo de vida OnInit.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit { 

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title) {

    }

    ngOnInit(): void {
      throw new Error("Method not Implemented.");
    }
 }

Iremos programar o ngOnInit(). Nos inscreveremos no router e acessaremos o events, que terá um subscribe() e estaremos atentos às navegações de rota.

 ngOnInit(): void {
      this.router.events.subscribe()
    }
 }

Porém, nosso interesse não é exatamente esse. O que queremos de fato é nos inscrever apenas na rota NavigationEnd, o momento em que a rota efetivamente chegou ao seu fim e o título do componente será mudado. Escreveremos pipe(filter) o filter é do RXJS e importa de operators. A partir de filter coletaremos event, e estipularemos que só será encadeado ao pipe() o resultado true, isto é, caso seja uma instância de NavigationEnd.

  ngOnInit(): void {
      this.router.events
        .pipe(filter(event => event instanceof NavigationEnd))
        .pipe()
    }
 }

É neste ponto que queremos ter acesso ao conteúdo do activatedRoute. Para melhorar a legibilidade do código, inseriremos em pipe() um map(), em que retornaremos this.activatedRoute, e em seguida vamos tratá-lo na próxima chamada encadeada chamando-o de route. Teremos de subir na hierarquia de rotas para coletar a que está sendo executada. Para tanto, escreveremos while(rout.firstChild) route = route.firstChild e no final retornaremos route.

ngOnInit(): void {
      this.router.events
        .pipe(filter(event => event instanceof NavigationEnd))
        .pipe(map(() => this.activatedRoute))
        .pipe(map(route => {
          while(route.firstChild) route = route.firstChild;
          return route;

        }))
      } 

Uma vez que a rota correta estiver sido capturada, iremos extrair o título. Se escrevermos route.data, teremos acesso à informação que está na rota, mas trata-se de um observable, então precisamos realizar a inscrição. Usaremos o já conhecido switchMap() via pipe() da route.data.

    ngOnInit(): void {
      this.router.events
        .pipe(filter(event => event instanceof NavigationEnd))
        .pipe(map(() => this.activatedRoute))
        .pipe(map(route => {
          while(route.firstChild) route = route.firstChild;
          return route;
        }))
        .pipe(switchMap(route => route.data))
        .subscribe(event => this.titleService.setTitle(event.title));
      } 

Quando retornamos ao navegador, perceberemos que a página de login possui um título, a timeline outro e os detalhes das fotos também acompanha essa mesma lógica.

Upload e progresso - Adequando a camada de serviço

Nesta aula faremos mais uma melhoria voltada para o usuário! Na tela de upload, o usuário pode selecionar uma foto, inserir ela na aplicação e então é redirecionado para a listagem. Alguns pontos precisam ser questionados nesse processo: se essa foto possuísse um tamanho de 10 megas? Ou se não fosse uma imagem propriamente dita, e sim um binário? Não seria interessante o usuário ter acesso a uma barra de progresso para acompanhar o processamento?

A boa notícia é que o HTTPclient já possui esse recurso embutido. Acessaremos o arquivo photo.service.ts. No upload, atualmente, fazemos um post para o endereço da API passando um formData, que por sua vez contém os campos campos da foto e seu arquivo binário. O que faremos é passar mais uma configuração: observe: 'events'. Inseriremos o parâmetroreportProgress: true, dessa maneira além de estarmos observando os eventos durante o upload o Angular fornecerá informações sobre esse progresso.

 upload(description: string, allowComments: boolean, file: File) {

        const formData = new FormData();
        formData.append('description', description);
        formData.append('allowComments', allowComments ? 'true' : 'false');
        formData.append('imageFile', file);

        return this.http.post(
            API + '/photos/upload', 
            formData,
            {
                observe: 'events',
                reportProgress: true
            }
        );

    }

Essa é a alteração que devemos fazer em nossa API, nas próximas aulas iremos lidar com os outros aspectos desse processo.

Sobre o curso Angular parte 4: lapidando o projeto

O curso Angular parte 4: lapidando o projeto possui 162 minutos de vídeos, em um total de 63 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:

Aprenda Angular acessando integralmente esse e outros cursos, comece hoje!

  • 1245 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1245 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1245 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1245 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas