Angular - freeCodeCamp.org

Melhores práticas para uma aplicação em Angular limpa e de elevado desempenho

Afonso Branco — Wed, 12 Jun 2024 21:00:00 +0000

Artigo original: Best practices for a clean and performant Angular application

Tradução em português europeu

Escrito por: Vamsi Vempati

Tenho vindo a trabalhar numa aplicação de grande escala em Angular na Trade Me, na Nova Zelândia, há um par de anos. Ao longo dos últimos anos, a nossa equipa tem vindo a refinar a nossa aplicação tanto em termos de normas de programação como em desempenho, para que esteja no melhor estado possível.

Este artigo descreve as práticas que utilizamos na nossa aplicação e está relacionado com Angular, Typescript, RxJs e @ngrx/store. Também vamos abordar algumas diretrizes gerais de programação para ajudar a aplicação a ficar mais limpa.

1) trackBy

Ao utilizar ngFor para iterar sobre um array em templates, utiliza-o com uma função trackBy, que retornará um identificador único por cada item.

Por quê?

Quando um array muda, o Angular renderiza novamente toda a árvore do DOM. Se, no entanto, utilizares trackBy, o Angular saberá que elemento foi alterado e realizará alterações à árvore do DOM apenas para esse elemento em particular.

Para uma explicação detalhada sobre isso, consulta este artigo por Netanel Basal (em inglês).

Antes

{{ item }}

Depois

// no template

{{ item }}

// no componente

trackByFn(index, item) {    
   return item.id; // correspondência de id único do item
}

2) const x let

Ao declarar variáveis, utiliza const nos casos em que o valor não será redefinido.

Por quê?

Utilizar let e const quando for adequado clarifica a intenção das declarações. Também ajudará a identificar problemas quando um valor é acidentalmente reatribuído a uma constante, ao gerar um erro de compilação. Também ajuda a melhorar a legibilidade do código.

Antes

let car = 'ludicrous car';

let myCar = `My ${car}`;
let yourCar = `Your ${car};

if (iHaveMoreThanOneCar) {
   myCar = `${myCar}s`;
}

if (youHaveMoreThanOneCar) {
   yourCar = `${youCar}s`;
}

Depois

// o valor de car não é redefinido, por isso podemos torná-lo numa const
const car = 'ludicrous car';

let myCar = `My ${car}`;
let yourCar = `Your ${car};

if (iHaveMoreThanOneCar) {
   myCar = `${myCar}s`;
}

if (youHaveMoreThanOneCar) {
   yourCar = `${youCar}s`;
}

3) Operadores canalizáveis

Utiliza operadores canalizáveis ao utilizar operadores RxJs.

Por quê?

Os operadores canalizáveis são "tree-shakeable", o que significa que apenas o código de cuja execução precisamos será incluído quando os operadores são importados.

Isso também faz com que seja mais fácil identificar operadores inutilizados nos ficheiros.

Nota: isso requer a versão 5.5+ do Angular.

Antes

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

iAmAnObservable
    .map(value => value.item)
    .take(1);

Depois

import { map, take } from 'rxjs/operators';

iAmAnObservable
    .pipe(
       map(value => value.item),
       take(1)
     );

4) Truques isolados de API

Nem todas as APIs são à prova de bala — por vezes, precisamos de adicionar alguma lógica no código para compensar os erros nas APIs. Em vez de ter os truques em componentes onde eles são necessários, é melhor isolá-los num local — como, por exemplo, um serviço e utilizar o servido a partir do componente.

Por quê?

Isso ajuda a manter os truques "mais próximos da API", ou seja, tão próximo do local onde o pedido de rede é realizado quanto possível. Desse modo, existe menos código a lidar com erros. Além disso, existe um local onde residem todos os truques e é mais fácil encontrá-los. Ao corrigir erros nas APIs, é mais fácil procurar os truques num ficheiro, em vez de procurar os truques que poderiam estar espalhados pela base de código.

Também podes criar tags personalizadas, como API_FIX, semelhante a TODO e anexar as correções à tag para que seja mais fácil de encontrar.

5) Subscrever em template

Evita subscrever a observáveis a partir de componente. Em vez disso, subscreve aos observáveis a partir do template.

Por quê?

Os canais async removem a sua subscrição automaticamente e tornam o código mais simples ao eliminar a necessidade de gerir manualmente subscrições. Também reduz o risco de acidentalmente esquecer a remoção da subscrição no componente, que causaria uma fuga de memória. Esse risco também pode ser mitigado ao utilizar uma regra de lint para detetar observáveis não subscritos.

Isto também impede que os componentes tenham estado e introduzam erros onde os dados são alterados fora da subscrição.

Antes

// template

{{ textToDisplay }}

// componente

iAmAnObservable
    .pipe(
       map(value => value.item),
       takeUntil(this._destroyed$)
     )
    .subscribe(item => this.textToDisplay = item);

Depois

// template

{{ textToDisplay$ | async }}

// componente

this.textToDisplay$ = iAmAnObservable
    .pipe(
       map(value => value.item)
     );

6) Limpar subscrições

Ao fazer subscrição a observáveis, certifica-te sempre que removes a subscrição a eles adequadamente ao utilizar operadores como take, takeUntil etc.

Por quê?

Não remover a subscrição a observáveis causará fugas de memória indesejáveis, pois o fluxo de observáveis é deixado aberto, potencialmente, até mesmo após a destruição de um componente/o utilizador ter navegado para outra página.

Melhor ainda, cria uma regra lint para detetar observáveis cuja subscrição não tenha sido removida.

Antes

iAmAnObservable
    .pipe(
       map(value => value.item)     
     )
    .subscribe(item => this.textToDisplay = item);

Depois

Utilizar takeUntil quando desejas aguardar por alterações até que outro observável emita um valor:

private _destroyed$ = new Subject();

public ngOnInit (): void {
    iAmAnObservable
    .pipe(
       map(value => value.item)
      // Queremos aguardar por iAmAnObservable até que o componente seja destruído,
       takeUntil(this._destroyed$)
     )
    .subscribe(item => this.textToDisplay = item);
}

public ngOnDestroy (): void {
    this._destroyed$.next();
    this._destroyed$.complete();
}

Utilizar um sujeito privado como esse é um padrão para gerir a remoção da subscrição de vários observáveis no componente.

Utilizar take quando queres apenas o primeiro valor emitido pelo observável:

iAmAnObservable
    .pipe(
       map(value => value.item),
       take(1),
       takeUntil(this._destroyed$)
    )
    .subscribe(item => this.textToDisplay = item);

Observa aqui a utilização de takeUntil com take. Isso é para evitar fugas de memória quando a subscrição não tiver recebido um valor antes do componente ter sido destruído. Sem takeUntil aqui, a subscrição ainda permaneceria até obter o primeiro valor, mas visto que o componente já foi destruído, ele nunca obterá um valor — levando a uma fuga de memória.

7) Utilizar operadores apropriados

Ao utilizar operadores de flattening com os teus observáveis, utiliza o operador adequado para a situação.

switchMap: quando desejas ignorar as emissões anteriores quando existe uma nova emissão.

mergeMap: quando desejas lidar simultaneamente com todas as emissões.

concatMap: quando desejas lidar com as emissões uma após a outra, à medida que são emitidas.

exhaustMap: quando desejas cancelar todas as emissões novas enquanto processas a emissão anterior.

Para uma explicação detalhada disso, observa este artigo de Nicholas Jamieson (em inglês).

Por quê?

Utilizar um único operador quando possível, em vez de encadear vários outros operadores para alcançar o mesmo efeito, pode fazer com que seja enviado menos código para o client. Utilizar os operadores errados pode levar a comportamentos indesejados, visto que operadores diferentes lidam com observáveis de maneiras diferentes.

**8) Carregamento lento (lazy loading)**

Quando possível, tenta carregar lentamente os módulos na tua aplicação em Angular. Carregamento lento é quando carregas algo apenas quando é utilizado – por exemplo, carregar um componente apenas quando ele tiver de ser visto.

Por quê?

Isso reduzirá o tamanho da aplicação a ser carregada e pode melhorar o tempo de iniciação da aplicação ao não carregar os módulos que não são utilizados.

Antes

// app.routing.ts

{ path: 'not-lazy-loaded', component: NotLazyLoadedComponent }

Depois

// app.routing.ts

{ 
  path: 'lazy-load',
  loadChildren: 'lazy-load.module#LazyLoadModule' 
}

// lazy-load.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LazyLoadComponent }   from './lazy-load.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
         { 
             path: '',
             component: LazyLoadComponent 
         }
    ])
  ],
  declarations: [
    LazyLoadComponent
  ]
})
export class LazyModule {}

9) Evitar ter subscrições dentro de subscrições

Por vezes, podes querer que os valores de mais do que um observável realizem uma ação. Nesse caso, evita subscrever um observável no bloco de subscrição de outro observável. Em vez disso, utiliza operadores de encadeamento adequados. Os operadores de encadeamento correm nos observáveis do operador antes deles. Alguns operadores são: withLatestFrom, combineLatest etc.

Antes

firstObservable$.pipe(
   take(1)
)
.subscribe(firstValue => {
    secondObservable$.pipe(
        take(1)
    )
    .subscribe(secondValue => {
        console.log(`Os valores combinados são: ${firstValue} e ${secondValue}`);
    });
});

Depois

firstObservable$.pipe(
    withLatestFrom(secondObservable$),
    first()
)
.subscribe(([firstValue, secondValue]) => {
    console.log(`Os valores combinados são: ${firstValue} e ${secondValue}`);
});

Por quê?

"Code smell"/legibilidade/complexidade: não utilizar RxJs em toda a sua extensão, sugere que o programador não está familiarizado com a área de superfície da API RxJs API.

Desempenho: se os observáveis estiverem inativos, o código subscreverá para firstObservable, esperará que ele termine e DEPOIS iniciará o trabalho com o segundo observável. Se esses fossem pedidos de rede, seria mostrado como assíncrono/cascata.

10) Evitar "any" e atribuir tipo a tudo

Declara sempre variáveis ou constantes com um tipo diferente de any.

Por quê?

Ao declarar variáveis ou constantes em Typescript sem uma tipologia, o tipo da variável/constante será deduzido pelo valor que lhe é atribuído. Isso causará problemas não pretendidos. Um exemplo clássico é:

const x = 1;
const y = 'a';
const z = x + y;

console.log(`O valor de z é: ${z}`

// Resultado
O valor de z é 1a

Isso pode causar problemas indesejados quando esperas que y também seja um número. Esses problemas podem ser evitados ao escrever as variáveis de maneira apropriada.

const x: number = 1;
const y: number = 'a';
const z: number = x + y;

// Isto gerará um erro de compilação a dizer:

Type '"a"' is not assignable to type 'number'.

const y:number

Dessa forma, podemos evitar erros causados pela ausência de tipos.

Outra vantagem de ter boas tipologias na tua aplicação é que torna a refatorização mais fácil e segura.

Considera estes exemplos:

public ngOnInit (): void {
    let myFlashObject = {
        name: 'My cool name',
        age: 'My cool age',
        loc: 'My cool location'
    }
    this.processObject(myFlashObject);
}

public processObject(myObject: any): void {
    console.log(`Name: ${myObject.name}`);
    console.log(`Age: ${myObject.age}`);
    console.log(`Location: ${myObject.loc}`);
}

// Resultado
Name: My cool name
Age: My cool age
Location: My cool location

Digamos que queremos renomear a propriedade loc para location em myFlashObject:

public ngOnInit (): void {
    let myFlashObject = {
        name: 'My cool name',
        age: 'My cool age',
        location: 'My cool location'
    }
    this.processObject(myFlashObject);
}

public processObject(myObject: any): void {
    console.log(`Name: ${myObject.name}`);
    console.log(`Age: ${myObject.age}`);
    console.log(`Location: ${myObject.loc}`);
}

// Resultado
Name: My cool name
Age: My cool age
Location: undefined

Se não tivermos um tipo no myFlashObject, este pensará que a propriedade loc em myFlashObject é apenas indefinida, em vez de não ser uma propriedade válida.

Se tivéssemos um tipo para myFlashObject, obteríamos um bom erro de tempo de compilação como mostrado abaixo:

type FlashObject = {
    name: string,
    age: string,
    location: string
}

public ngOnInit (): void {
    let myFlashObject: FlashObject = {
        name: 'My cool name',
        age: 'My cool age',
        // Erro de compilação
        Type '{ name: string; age: string; loc: string; }' is not assignable to type 'FlashObjectType'.
        Object literal may only specify known properties, and 'loc' does not exist in type 'FlashObjectType'.
        loc: 'My cool location'
    }
    this.processObject(myFlashObject);
}

public processObject(myObject: FlashObject): void {
    console.log(`Name: ${myObject.name}`);
    console.log(`Age: ${myObject.age}`)
    // Erro de compilação
    Property 'loc' does not exist on type 'FlashObjectType'.
    console.log(`Location: ${myObject.loc}`);
}

Se estiveres a iniciar um novo projeto, vale a pena definir strict:true no ficheiro tsconfig.json para ativar todas as opções rigorosas de verificação de tipo.

11) Faz uso das regras de lint

O tslint tem várias opções já incorporadas como no-any, no-magic-numbers, no-console etc, que podes configurar no teu tslint.json para impor certas regras na tua base de código.

Por quê?

Ter regras de lint aplicadas significa que obterás um erro útil caso estejas a fazer algo que não deverias estar a fazer. Isso garantirá consistência e legibilidade. Por favor, consulta aqui (em inglês) mais regras que podes configurar.

Alguma regras de lint até têm correções para resolver o erro de lint. Se desejares configurar a tua própria regra de lint personalizada, também podes fazê-lo. Consulta, por favor, este artigo de Craig Spence (em inglês) sobre como escrever as tuas próprias regras de lint personalizadas utilizando o TSQuery.

Antes

public ngOnInit (): void {
    console.log('Eu sou uma mensagem do console');
    console.warn('Eu sou uma mensagem de aviso do console');
    console.error('Eu sou uma mensagem de erro do console');
}

// Resultado - sem erros, imprimirá o que vemos abaixo na janela do console:
Eu sou uma mensagem do console
Eu sou uma mensagem de aviso do console
Eu sou uma mensagem de erro do console

Depois

// tslint.json
{
    "rules": {
        .......
        "no-console": [
             true,
             "log",    // console.log não é permitido
             "warn"    // console.warn não é permitido
        ]
   }
}

// ..component.ts

public ngOnInit (): void {
    console.log('Eu sou uma mensagem do console');
    console.warn('Eu sou uma mensagem de aviso do console');
    console.error('Eu sou uma mensagem de erro do console');
}

// Resultado - erros de lint para as instruções de console.log e console.warn, mas sem erro para console.error, já que não foi mencionado no config

Calls to 'console.log' are not allowed.
Calls to 'console.warn' are not allowed.

12) Pequenos componentes reutilizáveis

Extrai as partes que podem ser reutilizadas num componente e cria outro. Torna o componente tão "burro" quanto possível, visto que isso fará com que funcione em mais cenários. Tornar um componente "burro" quer dizer que o componente não tem nenhuma lógica em especial e opera puramente com base nos inputs e outputs que lhe forem fornecidos.

Como regra geral, o último descendente na árvore de componentes será o mais burro de todos.

Por quê?

Os componentes reutilizáveis reduzem a repetição de código, tornando-o assim mais fácil de gerir e de receber alterações.

Os componentes "burros" são mais simples e, por isso, têm menos probabilidade de terem erros. Os componentes "burros" fazem-te pensar mais sobre a API de componente pública e ajudam-te a detetar preocupações contraditórias.

13) Os componentes devem lidar apenas com lógica de exibição

Evita ter qualquer outra lógica para além da lógica de exibição no teu componente sempre que puderes e faz com que o componente lide apenas com a lógica de exibição.

Por quê?

Os componentes são projetados para fins de exibição e controlam o que a vista deve fazer. Qualquer lógica empresarial deve ser extraída nos seus próprios métodos/serviços, onde for apropriado, separando a lógica empresarial da lógica de exibição.

A lógica empresarial é geralmente mais fácil de testar quando é extraída para um serviço. Ela pode ser reutilizada por quaisquer outros componentes que precisem da mesma lógica empresarial aplicada.

14) Evita métodos longos

Métodos longos geralmente indicam que estão a fazer muitas coisas. Tenta utilizar o Princípio de Responsabilidade Única. O método por si só pode estar a fazer uma coisa, mas, dentro dele, existem algumas operações que podem estar a acontecer. Podemos extrair esses métodos para o seu próprio método e fazer com que façam cada um uma coisa e utilizá-los.

Por quê?

Os métodos longos são difíceis de ler, compreender e manter. Também são susceptíveis a erros, visto que alterar uma coisa pode afetar diversas outras coisas nesse método. Também tornam a refatorização (que é uma coisa essencial em qualquer aplicação) difícil.

Isso é por vezes medido como "complexidade ciclomática". Também existem algumas regras do TSLint para detetar complexidade ciclomática/cognitiva, que podes utilizar no teu projeto para evitar erros e detetar "code smells" e problemas de manutenção.

15) DRY (Não te repitas)

Do not Repeat Yourself (Não te repitas). Certifica-te de que não tens o mesmo código copiado para locais diferentes na base de código. Extrai o código repetido e utiliza isso em vez do código repetido.

Por quê?

Ter o mesmo código em vários locais significa que, se quisermos fazer uma alteração à lógica nesse código, temos de fazê-la em vários locais. Isso torna-o difícil de gerir e também é susceptível a erros. Podemos falhar e não alterar em todas as ocorrências. É mais demorado realizar alterações à lógica e testar o código também é um processo demorado.

Nesses casos, extrai o código repetido e utiliza essa alternativa em vez disso. Isso quer dizer que existe apenas um local para alterar e uma coisa para testar. Ter menos código duplicado enviado para os utilizadores quer dizer que a aplicação será mais rápida.

16) Adicionar mecanismos de cache

Ao realizar chamadas de API, as respostas delas não mudam com frequência. Nesses casos, podes adicionar um mecanismo de cache e armazenar o valor da API. Quando for realizado outro pedido à mesma API, verifica se existe um valor para ele na cache. Caso exista, utiliza-o. Caso contrário, realiza a chamada da API e coloca o resultado em cache.

Se os valores alterarem, mas não regularmente, podes introduzir uma cache de tempo onde podes verificar quando foi colocado algo em cache pela última vez e decidir se chamas ou não a API.

Por quê?

Ter um mecanismo de cache significa evitar chamadas de API indesejadas. Ao realizar apenas as chamadas de API quando necessário e evitar código duplicado, a velocidade da aplicação melhora pois não temos de esperar pela rede. Também significa que não descarregamos a mesma informação vezes sem conta.

17) Evitar lógica em templates

Se tiveres qualquer tipo de lógica nos teus templates, mesmo que seja uma simples cláusula &&, é bom extraí-la para o seu próprio componente.

Por quê?

Ter lógica no template significa que não é possível realizar testes unitários ao template e é, então, mais susceptível a erros quando alteramos o código do template.

Antes

// template
 Status: Developer 

// component
public ngOnInit (): void {
    this.role = 'developer';
}

Depois

// template
 Status: Developer 

// componente
public ngOnInit (): void {
    this.role = 'developer';
    this.showDeveloperStatus = true;
}

18) Strings devem ser seguras

Se tiveres uma variável do tipo string que possa ter apenas um conjunto de valores, em vez de declará-la com o tipo string, podes declarar a lista de valores possíveis como o tipo.

Por quê?

Ao declarar o tipo da variável adequadamente, podemos evitar erros ao escrever o código durante a compilação em vez de durante a execução.

Antes

private myStringValue: string;

if (itShouldHaveFirstValue) {
   myStringValue = 'First';
} else {
   myStringValue = 'Second'
}

Depois

private myStringValue: 'First' | 'Second';

if (itShouldHaveFirstValue) {
   myStringValue = 'First';
} else {
   myStringValue = 'Other'
}

// Isso gerará o erro abaixo
Type '"Other"' is not assignable to type '"First" | "Second"'
(property) AppComponent.myValue: "First" | "Second"

Visão geral

Gestão de estado

Considera utilizar @ngrx/store para gerir o estado da tua aplicação e @ngrx/effects como modelo de efeito secundário para armazenamento. As alterações de estados são descritas pelas ações e as alterações são realizadas por funções puras chamadas reducers(redutores).

Por quê?

@ngrx/store isola toda a lógica relacionada com estados num só local e torna-a consistente ao longo da aplicação. Também tem um mecanismo de memorização ao aceder à informação armazenada, levando a uma aplicação com melhor desempenho. @ngrx/store combinado com a estratégia de deteção de alterações do Angular resulta numa aplicação mais rápida.

Estado imutável

Ao utilizar @ngrx/store, considera utilizar ngrx-store-freeze para tornar o estado imutável. ngrx-store-freeze impede que o estado seja alterado ao lançar uma excepção. Isso evita alterações acidentais do estado, o que leva a consequências indesejadas.

Por quê?

Alterar o estado em componentes faz com que a aplicação se comporte de modo inconsistente com base na ordem de carregamento dos componentes. Quebra o modelo mental do padrão redux. As alterações podem acabar sobrepostas caso o estado de armazenamento altere e seja emitido novamente. Separa as responsabilidades/preocupações — componentes são camadas de vista, não devem saber como alterar o estado.

Jest

O Jest é uma framework de testes unitários da Facebook para JavaScript. Torna os testes unitários mais rápidos ao colocar em paralelo as execuções de testes ao longo da base de código. Com o seu modo de observação, são executados apenas os testes relacionados com as alterações, o que torna o ciclo de resposta para os testes muito mais curto. Ele também fornece cobertura de código dos testes e é suportado no VS Code e Webstorm.

Podias utilizar um preset (texto em inglês) para Jest que fará a maior parte do trabalho por ti quando estiveres a configurar a Jest no teu projeto.

Karma

Karma é um executante de testes desenvolvido pela equipa do AngularJS. Este requer um browser real/DOM para executar os testes. Também pode ser executado em browsers diferentes. O Jest não precisa do Chrome headless/phantomjs para executar os testes e é executado em Node puro.

Universal

Se não tiveres tornado a tua aplicação numa aplicação Universal, agora é uma boa altura para fazê-lo. O Angular Universal (link em inglês) permite-te executar a tua aplicação do Angular no servidor e faz renderização no lado do servidor (SSR), que serve páginas html estáticas pré-renderizadas. Isso torna a aplicação muito rápida, pois apresenta o conteúdo no ecrã quase instantaneamente, sem ter de esperar que os JS bundles carreguem e analisem, ou pela iniciação do Angular.

Também é bom em termos de SEO, visto que o Angular Universal gera conteúdo estático e torna mais fácil a indexação da aplicação por parte dos rastreadores da web e tornam a aplicação pesquisável sem executar JavaScript.

Por quê?

O Universal melhora drasticamente o desempenho da tua aplicação. Atualizamos recentemente a nossa aplicação para realizar renderização do lado do servidor e o tempo de carregamento do site passou de vários segundos para dezenas de milésimos de segundo!

Também permite que o teu site apareça corretamente nos modelos de pré-visualização das redes sociais. O primeiro carregamento significativo é muito rápido e torna o conteúdo visível aos utilizadores sem quaisquer atrasos indesejados.

Conclusão

Criar aplicações é uma jornada constante e existe sempre espaço para melhorar coisas. Esta lista de optimizações é um bom local para começar, e aplicar de maneira consistente esses padrões fará a tua equipa feliz. Os teus utilizadores também vão adorar-te pela boa experiência na tua aplicação com menos problemas e com melhor desempenho.

Obrigada pela leitura! Se gostaste deste artigo, fica à vontade para partilhar e ajudar outras pessoas a encontrá-lo. Segue a autora no Medium ou Twitter para ver mais artigos. Boa programação, pessoal! ☕️

Como validar formulários do Angular orientados a templates

Luiz Nison Filler — Thu, 05 Oct 2023 21:00:00 +0000

Artigo original: How to Validate Angular Template-Driven Forms

Introdução

Neste artigo, aprenderemos sobre validações em formulários do Angular orientados a templates. Criaremos um formulário simples de registro de usuário e implementaremos algumas validações embutidas nele. Junto às validações embutidas, implementaremos algumas validações customizadas para o formulário orientado a templates.

Consideraremos as seguintes validações customizadas para essa demonstração:

Verificação de disponibilidade do nome de usuário;
Validação de padrão de senha;
Correspondência da senha inserida em dois campos diferentes.

Dê uma olhada na aplicação funcionando:

Pré-requisitos

Instale o Visual Studio Code aqui;
Instale a última versão da Angular CLI por aqui;
Instale a última versão LTS do Node.js aqui.

Código fonte

Você pode acessar o código fonte pelo GitHub.

Crie a aplicação do Angular

Navegue até o diretório no qual deseja criar o seu projeto. Abra uma janela de comando e execute o comando mostrado abaixo:

ng new angular-forms-validation --routing=false --style=scss

Estamos especificando o comando para criar uma aplicação do Angular. A opção para criar o módulo de roteamento é definida como false e a extensão de arquivos de estilização é definida como SCSS. Esse comando criará o projeto do Angular com o nome angular-forms-validation.

Dirija-se ao diretório do novo projeto e abra-o no VS Code usando o conjunto de comandos abaixo.

cd angular-forms-validation
code .

Instale o Bootstrap

Execute o seguinte comando para instalar o Bootstrap:

npm install bootstrap --save

Adicione a seguinte definição de importação no arquivo styles.scss :

@import "~bootstrap/dist/css/bootstrap.css";

Crie o serviço de validação

Execute o seguinte comando para criar um serviço:

ng g s services\customvalidation

Esse comando criará um subdiretório chamado services, que possui dois arquivos dentro dele – customvalidation.service.ts e customvalidation.service.spec.ts. Abra customvalidation.service.ts e insira o seguinte código dentro dele.

import { Injectable } from '@angular/core';
import { ValidatorFn, AbstractControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class CustomvalidationService {

  patternValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      if (!control.value) {
        return null;
      }
      const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$');
      const valid = regex.test(control.value);
      return valid ? null : { invalidPassword: true };
    };
  }

  MatchPassword(password: string, confirmPassword: string) {
    return (formGroup: FormGroup) => {
      const passwordControl = formGroup.controls[password];
      const confirmPasswordControl = formGroup.controls[confirmPassword];

      if (!passwordControl || !confirmPasswordControl) {
        return null;
      }

      if (confirmPasswordControl.errors && !confirmPasswordControl.errors.passwordMismatch) {
        return null;
      }

      if (passwordControl.value !== confirmPasswordControl.value) {
        confirmPasswordControl.setErrors({ passwordMismatch: true });
      } else {
        confirmPasswordControl.setErrors(null);
      }
    }
  }

  userNameValidator(userControl: AbstractControl) {
    return new Promise(resolve => {
      setTimeout(() => {
        if (this.validateUserName(userControl.value)) {
          resolve({ userNameNotAvailable: true });
        } else {
          resolve(null);
        }
      }, 1000);
    });
  }

  validateUserName(userName: string) {
    const UserList = ['ankit', 'admin', 'user', 'superuser'];
    return (UserList.indexOf(userName) > -1);
  }
}

O método patternValidator é usado para validar o padrão de senha no seu formulário. O parâmetro para esse método é do tipo AbstractControl, que é uma classe base para oFormControl.

Usaremos uma expressão regular para validar a senha. Ela verificará as seguintes quatro condições na senha:

A senha deve ter, no mínimo, oito caracteres;
Deve possuir pelo menos uma letra minúscula;
Deve conter, no mínimo, uma letra maiúscula;
Deve ter, ao menos, um número.

Se a senha falhar na verificação da regex, definiremos a propriedade invalidPassword como sendo verdadeira (true).

O método MatchPassword é usado para comparar as senhas em dois campos. Esse método receberá dois parâmetros do tipo string, os quais representam os nomes dos campos a serem comparados. Utilizaremos o FormControl para esses dois campos e, em seguida, compararemos os valores contidos neles. Se os valores não corresponderem, definiremos a propriedade passwordMismatch como verdadeira (true).

O método userNameValidator é utilizado para verificar se o nome de usuário já foi utilizado ou não. Esse método receberá um parâmetro do tipo AbstractControl.

Verificaremos se o valor deste campo está presente em um array estático, UserList. Se o valor inserido pelo usuário já estiver presente, definiremos a propriedade userNameNotAvailable como verdadeira (true).

Estamos utilizando a função setTimeout para invocar essa verificação a cada dois segundos. Isso assegurará que o erro seja disparado após dois segundos a partir do momento em que o usuário parar de digitar no campo.

Por questão de simplicidade deste artigo, estamos fazendo o uso de um array estático para buscar a disponibilidade de nomes de usuário. Idealmente, essa deveria ser uma chamada de serviço ao servidor para procurar pelo valor em um banco de dados.

Crie o modelo de usuário

Crie uma pasta chamada models dentro de src/app. Adicione um novo arquivo dentro do diretório models, chamado user.ts. Insira o seguinte código dentro do arquivo user.ts.

export class User {
    public name: string;
    public email: string;
    public username: string;
    public password: string;
    public confirmPassword: string;
}

Crie diretivas customizadas

Criaremos diretivas customizadas para implementar validators customizados para o formulário orientado a templates.

Execute o comando exibido abaixo para criar a diretiva passwordPattern.

ng g d directives\passwordPattern

Este comando criará uma pasta chamada directives, que possui dois arquivos dentro de si – passwordPattern.directive.ts e passwordPattern.directive.spec.ts. Abra o passwordPattern.directive.ts e insira o seguinte código dentro dele.

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';

@Directive({
  selector: '[appPasswordPattern]',
  providers: [{ provide: NG_VALIDATORS, useExisting: PasswordPatternDirective, multi: true }]
})
export class PasswordPatternDirective implements Validator {

  constructor(private customValidator: CustomvalidationService) { }

  validate(control: AbstractControl): { [key: string]: any } | null {
    return this.customValidator.patternValidator()(control);
  }
}

Essa diretiva é usada para validar o padrão da senha. Implementaremos a interface Validator na classe PasswordPatternDirective. Sobrescreveremos o método validate, o qual recebe um parâmetro do tipo AbstractControl, que é o controle que desejamos validar. Em seguida, invocaremos o método patternValidator do serviço.

Execute o comando mostrado abaixo para criar a diretiva matchPassword:

ng g d directives\matchPassword

Abra o arquivo matchPassword.directive.ts e insira o seguinte código dentro dele:

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, ValidationErrors, FormGroup } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';

@Directive({
  selector: '[appMatchPassword]',
  providers: [{ provide: NG_VALIDATORS, useExisting: MatchPasswordDirective, multi: true }]
})
export class MatchPasswordDirective implements Validator {
  @Input('appMatchPassword') MatchPassword: string[] = [];

  constructor(private customValidator: CustomvalidationService) { }

  validate(formGroup: FormGroup): ValidationErrors {
    return this.customValidator.MatchPassword(this.MatchPassword[0], this.MatchPassword[1])(formGroup);
  }
}

Essa diretiva é usada para validar se as senhas inseridas nos dois campos correspondem ou não. Essa diretiva receberá uma entrada do tipo array de strings, o qual contém os campos a serem comparados. Sobrescreveremos o método validate e passaremos o parâmetro do tipo FormGroup. Em seguida, invocaremos o método MatchPassword do serviço.

Execute o comando abaixo para criar a diretiva validateUserName:

ng g d directives\validateUserName

Abra o arquivo validateUserName.directive.ts e introduza o seguinte código nele:

import { Directive, forwardRef } from '@angular/core';
import { Validator, AbstractControl, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';
import { Observable } from 'rxjs';

@Directive({
  selector: '[appValidateUserName]',
  providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => ValidateUserNameDirective), multi: true }]

})
export class ValidateUserNameDirective implements Validator {

  constructor(private customValidator: CustomvalidationService) { }

  validate(control: AbstractControl): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }> {
    return this.customValidator.userNameValidator(control);
  }
}

Essa diretiva é usada para validar a disponibilidade do nome de usuário. Sobrescreveremos o método validate e passaremos um parâmetro do tipo AbstractControl. Em seguida, invocaremos o método userNameValidator do serviço. Esse método retornará uma promise.

Crie o componente do formulário orientado a templates

Execute o comando apresentado abaixo para criar o componente do formulário orientado a templates:

ng g c template-driven-form

Abra o arquivo template-driven-form.component.ts e insira o seguinte código nele:

import { Component } from '@angular/core';
import { User } from '../models/user';

@Component({
  selector: 'app-template-driven-form',
  templateUrl: './template-driven-form.component.html',
  styleUrls: ['./template-driven-form.component.scss']
})
export class TemplateDrivenFormComponent {

  userModal = new User();

  constructor() { }

  onSubmit() {
    alert('Form Submitted succesfully!!!\n Check the values in browser console.');
    console.table(this.userModal);
  }
}

Criamos um objeto userModal do tipo User. Vincularemos os campos do formulário com a propriedade desse objeto. O método onSubmit mostrará a mensagem de sucesso na tela e exibirá os conteúdos do formulário no console.

Abra o arquivo template-driven-form.component.html e introduza o seguinte código nele:


    
        
            
                
                    Angular Template-driven Form
                
                
                    
                        
                            Name
                            
                            
                                Name is required
                            
                        
                        
                            Email
                            
                            
                                Email is required
                            
                            
                                Enter a valid email address
                            
                        
                        
                            User Name
                            
                            
                                User Name is required
                            
                            
                                User Name not available
                            
                        
                        
                            Password
                            
                            
                                Password is required
                            
                            
                                Password should have minimum 8 characters, at least 1 uppercase letter, 1 lowercase
                                letter and 1 number
                            
                        
                        
                            Confirm Password
                            
                            
                                Confirm Password is required
                            
                            
                                Passwords doesnot match

Criaremos um formulário orientado a templates e usaremos o card do Bootstrap para estilização. O card-header conterá um título, enquanto o card-body terá os campos do formulário.

Usaremos a diretiva appMatchPassword em nosso formulário e passaremos para validação os campos de senha e confirmPassword. A propriedade ngModel é usada para vincular o controle do formulário ao modelo.

Para validar a disponibilidade do nome de usuário, usaremos a diretiva appValidateUserName no campo username. Do mesmo modo, utilizaremos a diretiva appPasswordPattern no campo de senha para validar o padrão da senha.

Verificaremos os erros nos controles do formulário e, então, exibiremos na tela a mensagem de erro de validação apropriada.

Execute o comando abaixo para criar um componente nav-bar:

ng g c nav-bar

Abra o arquivo nav-bar.component.html e insira nele o seguinte código:


    Form Validation Demo
    
        
            
                Template Form

Aqui, estamos adicionando o link de navegação para o componente de formulário orientado a templates.

Atualize o componente app

Abra o arquivo app.component.html e introduza nele o código a seguir:

Atualize o módulo de app

Importaremos o módulo de formulários e, também, configuraremos o roteamento para nossa aplicação no módulo do app. Adicione o seguinte código no arquivo app.module.ts. Você pode consultar o GitHub para obter o código fonte completo deste arquivo:

import { RouterModule } from '@angular/router';
import { FormsModule } from  '@angular/forms';

@NgModule({
  ...    
  imports: [
    ...
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: TemplateDrivenFormComponent },
      { path: 'template-form', component: TemplateDrivenFormComponent }
    ]),
  ],
})

Execução de demonstração

Use o comando a seguir para iniciar o servidor da web:

ng serve -o

Este comando iniciará a aplicação em seu navegador padrão no http://localhost:4200/. Você pode realizar todas as validações de formulário que discutimos aqui.

Resumo

Criamos um formulário de registro de usuário de exemplo usando a abordagem de formulário orientado a templates no Angular. Implementamos no formulário as validações nativas, assim como as validações customizadas. A biblioteca do Bootstrap foi usada para estilização do formulário.

Acesse o código-fonte pelo GitHub e explore o repositório para ter um melhor entendimento.

Veja também (recursos em inglês)

Você pode encontrar este artigo em inglês, Template-Driven Form Validation In Angular, e outros artigos semelhantes no blog do autor.

Os melhores exemplos do Angular

Afonso Branco — Tue, 08 Aug 2023 21:00:00 +0000

Artigo original: The Best Angular Examples

Tradução realizada em português europeu

Angular é um framework de código-livre com base no TypeScript, utilizado para desenvolver aplicações de front-end para a web. É o sucessor do AngularJS e todas as menções ao Angular referem-se à versão 2 ou superior. O Angular tem funcionalidades como generics, static-typing e algumas outras funcionalidades do ES6.

Histórico de versões

A Google lançou a versão inicial do AngularJS a 20 de outubro de 2010. A versão estável do AngularJS foi lançada a 18 de dezembro de 2017, com a versão 1.6.8. A última atualização significativa do AngularJS, a versão 1.7, ocorreu a 1 de julho de 2018, e está, atualmente, num período de 3 anos de Suporte a Longo Prazo. O Angular 2.0 foi anunciado pela primeira vez a 22 de setembro de 2014, na conferência ng-Europe. Uma das novas funcionalidades do Angular 2.0 é o carregamento dinâmico. A maior parte das principais funcionalidades foram movidas para módulos.

Após algumas modificações, o Angular 4.0 foi lançado em dezembro de 2016. O Angular 4 tem compatibilidade com a versão mais antiga do Angular 2.0. Algumas das novas funcionalidades são a biblioteca HttpClient e os novos eventos de ciclo de vida do router. O Angular 5 foi lançado a 1 de novembro de 2017, tendo uma funcionalidade muito importante que é o suporte para aplicações web progressivas. O Angular 6 foi lançado em maio de 2018, enquanto o Angular 7 foi lançado em outubro de 2018. A versão estável mais recente é a 7.0.0.

Nota da tradução: o texto que estás a ler é de 2018. A versão mais recente do Angular, no momento desta tradução, é a versão 16.1.2, de 21 de junho de 2023, compatível com as versões 16.14.0 a 18.10.0 do NodeJS, 4.9.3 a 5.2.0 do TypeScript e 6.5.3 a 7.4.0 do RxJS.

Instalação

A forma mais fácil de instalar o Angular é através da Angular CLI. Esta ferramenta permite a criação de projetos e a geração de componentes, serviços, módulos e assim adiante. Como padrão, a equipa do Angular considera que esta seja a melhor prática.

Angular 2.x e versões mais recentes

Instalar a Angular CLI

npm install -g @angular/cli

Criar um espaço de trabalho e a aplicação inicial

Vais desenvolver aplicações no contexto de um espaço de trabalho do Angular. Um espaço de trabalho contém os ficheiros para um ou mais projetos. Um projeto é o conjunto de ficheiros que compõe uma aplicação, uma biblioteca, ou testes end-to-end (e2e).

ng new my-app

Servir a aplicação

O Angular inclui um servidor para que consigas criar e servir facilmente a tua aplicação localmente.

Navega até à pasta do espaço de trabalho (my-app)

Inicia o servidor ao utilizar o comando CLI ng serve com a opção --open

cd my-app
ng serve --open

Boa, criaste a tua primeira aplicação em Angular!!!

O Angular contém muitos esquemas para criar aplicações. Os componentes são um desses esquemas. Eles englobam uma única unidade de lógica relacionada com uma única parte da aplicação. Os componentes fazem geralmente parceria com outros esquemas para operar de maneira mais eficiente.

Os componentes simplificam a aplicação. Canalizar a lógica para uma única secção da interface visível é o seu principal objetivo. Para criar aplicações passo a passo, precisas de criar componente a componente. No final de contas, os componentes funcionam como blocos de construção do Angular.

Classe de componente e metadados

O comando da CLI ng generate component [nome-do-componente] produz o seguinte:

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

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

  ngOnInit() { }
}

Esta é a estrutura básica da qual todos os grandes componentes se originam. O decorator @Component é a parte mais importante. Sem ele, o exemplo acima torna-se uma classe genérica. O Angular depende dos decorators para distinguir o tipo esquemático da classe.

@Component recebe metadados como um único objeto. Os decorators são apenas funções JavaScript em segundo plano. Eles recebem argumentos assim como o objeto de metadados. O objeto de metadados configura as dependências básicas do componente. Cada campo tem o seu papel.

selector: indica ao Angular para associar o componente a um determinado elemento no template HTML da aplicação.
templateUrl: aceita a localização do ficheiro do template HTML do componente (é também aqui que a informação é exibida).
styleUrls: aceita um array de localizações de ficheiros das folhas de estilos (strings). Estas folhas de estilos focam o template atribuído ao componente.

Pensa em metadados como uma grande bolha de configuração. O decorator recebe-os de maneira a que possa gerar a informação específica ao componente. O decorator decora a classe subjacente com informação necessária para o comportamento da sua classe, ou seja, uma classe de componente.

A assinatura da classe é exportada por padrão, de maneira a que o componente possa ser importado. ngOnInit é também implementado. implements indica à classe para definir certos métodos de acordo com a definição da interface. ngOnInit é um hook de ciclo de vida.

Informações de componente

A informação comanda tudo. Os componentes não são exceção. Os componentes englobam toda a informação. Para receber dados externamente, um componente deve declarar isso explicitamente. Este modo de privacidade impede que a informação entre em conflito ao longo da árvore de componentes.

A informação determina o que é exibido da classe de componente para o teu template. Qualquer atualização à informação da classe atualizará (ou, pelo menos, deverá atualizar) a visualização do template.

Os componentes, geralmente, vão inicializar um conjunto de membros (ou variáveis) que armazenam informação. São utilizados ao longo da lógica da classe de componente por conveniência. Essa informação alimenta a lógica resultante no template e o seu comportamento. Observa o seguinte exemplo:

// ./components/example/example.component.ts

import { Component, OnInit } from '@angular/core';
import { Post, DATA } from '../../data/posts.data';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  username: string;
  totalPosts: number;
  allPosts: Post[];

  deletePost(index: number): void {
    this.allPosts.splice(index, 1);
    this.totalPosts = this.allPosts.length;
  }

  ngOnInit(): void {
    this.username = DATA.author;
    this.totalPosts = DATA.thePosts.length;
    this.allPosts = DATA.thePosts;
  }
}



{{ username }}
Alterar o nome: 
Publicações: {{ totalPosts }}



  
  {{ post.title }}
  {{ post.body }}

Repara nas formas como o componente interage com a informação. Primeiro, vai buscar a ../../data/posts.data antes de começar a encaminhar para o template para exibir.

A informação aparece ao longo do template. Dentro de chavetas, o valor de uma variável é mapeado da classe de componente para as chavetas. O *ngFor itera pela classe de array allPosts. Clicar no botão remove um elemento específico de allPosts pelo seu índice. Podes até alterar o username mais acima ao escrever na caixa de input.

As interações acima alteram a informação da classe de componente que, por sua vez, altera o template HTML do componente. Os componentes fornecem a lógica principal, que facilita o fluxo da informação. O template HTML torna essa informação legível para o utilizador.

Ligação (binding) dos dados

A informação define geralmente o aspeto de uma aplicação. Interpretar essa informação para a interface de utilizador envolve a lógica de classe (*.component.ts) e uma vista de template (*.component.html) . O Angular conecta-os através da ligação (do inglês, binding) dos dados. Pensa na ligação dos dados como uma ferramenta para interação de componentes.

Componente e template

O componente armazena maior parte da sua lógica e informação dentro da sua classe decorada com @Component. Esse decorator define a classe como um componente com template HTML. O template do componente representa a classe dentro da aplicação. Aqui, o foco deve ser entre a classe do componente e o template HTML.

É aqui que a ligação de dados ocorre. As propriedades de elementos e eventos recebem valores. Esses valores, definidos pela classe de componente, servem um de dois propósitos. Um é produzir informação que o template receberá. O outro é lidar com os eventos emitidos pelo elemento de template.

Propriedades de elemento

Para reconhecer propriedades de elemento vinculadas aos dados, o Angular utiliza uma sintaxe especial de chavetas.

// my.component.ts
@Component({
  templateUrl: './my.component.html'
})

export class MyComponent {
  value:type = /* algum valor de tipo */;
}


innerHTML

Tem paciência comigo aqui.

[property] espelha a propriedade no nó do objeto do elemento no Domain Object Model (DOM). Não confundas propriedades de objeto com um atributo de elemento do DOM. As propriedades e os atributos partilham por vezes o mesmo nome e fazem a mesma coisa. No entanto, existe uma clara distinção.

Lembra-te de que attr (atributos) é uma única propriedade do objeto do DOM subjacente. A declaração é feita na instanciação do DOM, com valores de atributo correspondentes à definição do elemento. O elemento mantém o mesmo valor após isso. Cada propriedade tem o seu próprio campo chave-valor num nó de objeto do DOM. Essas propriedades são mutáveis após a instanciação.

Compreende a diferença entre atributos e propriedades. Isso levará a uma melhor compreensão de como o Angular vincula a informação às propriedades (vinculação de propriedade). O Angular raramente vinculará a informação ao atributo de um elemento. As excepções a isso são muito raras. Uma última vez: o Angular vincula a informação de componente às propriedades, não aos atributos!

Voltando ao exemplo, o [ … ] na atribuição da propriedade do elemento tem um significado especial. Os parênteses retos mostram que property está vinculado ao "value" à direita da atribuição.

value também tem significado especial no contexto dos parênteses retos. O próprio value é uma string literal. O Angular faz a leitura e compara o seu valor ao dos membros da classe. O Angular substituirá o valor do atributo de membro correspondente. Claro que isto refere-se à mesma classe de componente que hospeda o template HTML.

O fluxo unidirecional de informação do componente para o template está completo. O membro correspondente à atribuição correta da propriedade entre parênteses retos fornece o value. Nota que alterações ao valor do membro na classe do componente filtram para baixo para o template. Essa é a deteção de alteração do Angular em funcionamento. Alterações dentro do âmbito do template não tem efeito no membro da classe do componente.

Informação principal: a classe de componente fornece a informação enquanto que o template a exibe.

Não mencionei que os valores da informação também podem aparecer num innerHTML de um componente. Este último exemplo implementa chavetas duplas. O Angular reconhece essas chavetas e interpola a classe de dados de componente correspondente para o innerHTML da div.

O valor do membro 'value', da classe de componente, é {{value}}.

Lidar com eventos

Se o componente fornece dados, então o template fornece eventos.

// my.component.ts
@Component({
  templateUrl: './my.component.html'
})

export class MyComponent {
  handler(event):void {
      // a função faz algo
  }
}

// my.component.html
innerHTML

Isto funciona de maneira semelhante à vinculação de propriedades.

O (event) refere-se a qualquer tipo de evento válido. Por exemplo, um dos tipos de eventos mais comum é o click. Ele emite quando clicas com o rato. Independentemente do tipo, o event está vinculado ao "handler" no exemplo. Os gestores de eventos são geralmente funções de membro da classe de componente.

Os ( … ) são especiais para o Angular. Os parênteses indicam ao Angular que um evento está vinculado à atribuição correta do handler. O próprio evento origina a partir do elemento hospedeiro.

Quando o evento emite, ele passa o objeto Event sob a forma de $event. O handler mapeia para a função que tem o mesmo nome do handler da classe de componente. A troca unidirecional do elemento vinculado ao evento para a classe de componente está finalizada.

Os eventos de emissão do gestor, enquanto possível, não causam impacto no elemento de template. Afinal, a vinculação é unidirecional.

Diretrizes

Diretrizes são elementos de componente e atributos criados e reconhecidos pelo Angular. O Angular associa o elemento ou atributo com a sua definição de classe correspondente. @Directive ou @Component decora essas classes. Ambos são indicativos para o Angular que a classe funciona como uma diretriz.

Algumas diretrizes modificam o estilo do elemento hospedeiro. Outras diretrizes exibem vistas ou inserem em vistas já existentes como vistas incorporadas. Por outras palavras, elas alteram o layout HTML.

De qualquer forma, as diretrizes sinalizam o compilador do Angular. Elas marcam componentes para modificação, dependendo da lógica da classe da diretriz.

Diretriz estrutural

Aqui estão três exemplos de diretrizes estruturais. Cada uma tem uma contrapartida lógica (if, for e switch).

*ngIf
*ngFor
*ngSwitchCase e *ngSwitchDefault

Nota importante: todas as três estão disponíveis através da importação do CommonModule, que está disponível a partir de @angular/common para importação dentro do módulo raiz da aplicação.

*ngIf

*ngIf testa um determinado valor para ver se é verdadeiro ou falso com base na avaliação booleana geral em JavaScript. Em caso de ser verdadeiro, o elemento e o seu innerHTML vão ser exibidos. Caso contrário, nunca vão renderizar para o Domain Object Model (DOM).



  Olá!




  Alô!

Esse é um exemplo fictício. Qualquer valor de membro da classe de componente do template pode ser substituído por true ou false.

Nota: também podes fazer o seguinte com *ngIf para obter acesso ao valor observável:


  {{ oNomeQueQuiseres }}

*ngFor

*ngFor itera com base numa expressão, microssintática, atribuída à direita. A microssintaxe vai para além do âmbito deste artigo. Fica apenas a saber que a microssintaxe é uma forma abreviada de uma expressão lógica. Ocorre como uma única string capaz de referenciar valores de membro de classe. Podes iterar através de valores iteráveis, o que os torna úteis para *ngFor.


  
      Potato {{ i + 1 }}: {{ potato }}

['Russet', 'Doce', 'Rosalinda'] é um valor iterável. Os arrays são uns dos valores iteráveis mais comuns. O *ngFor cria um

por cada elemento do array. É atribuído a cada elemento do array a variável potato (em português, batata). Isto é feito ao utilizar a microssintaxe. O *ngFor define o conteúdo estrutural do elemento ul. Isso é característico de uma diretriz estrutural.

Nota: também podes fazer o seguinte com a diretriz *ngFor para obter acesso ao valor observável (atalho):


  {{  oNomeQueQuiseres }}

ngSwitchCase e ngSwitchDefault

Estas duas diretrizes estruturais trabalham em conjunto para fornecer a funcionalidade switch ao template HTML.


  {{ potato }} é uma batata Russet.
  {{ potato }} é uma batata doce.
  {{ potato }} é uma batata Rosalinda.
  {{ potato }} é um tipo diferente de batata.

Apenas uma das expressões *ngSwitch… é renderizada. Repara no atributo [ngSwitch] dentro do elemento div a envolver o switch. Ele passa o valor de potato ao longo da cadeia *ngSwitch.... Essa cadeia de diretrizes estruturais determina que elemento h1 renderiza.

Como tal, [ngSwitch] não é uma diretriz estrutural ao contrário das instruções *ngSwitch…. Ele passa o valor enquanto que o bloco determina o layout final do HTML.

Lembra-te de que a estilização e passagem de valores não são da responsabilidade das diretrizes estruturais. Isto é responsabilidade das diretrizes de atributos. As diretrizes estruturais determinam apenas o layout.

As transformações à informação resultante garantem que a informação esteja num formato adequado quando chega a hora de carregar para o ecrã do utilizador. Normalmente, as transformações de informação ocorrem em segundo plano. Com pipes, a transformação de informação pode ocorrer no template HTML. Os pipes transformam a informação de template diretamente.

Os pipes têm bom aspeto e são convenientes. Eles ajudam a manter a classe de componente com poucas transformações básicas. Tecnicamente, os pipes expressam a lógica da transformação de informação.

Casos de utilização

O Angular vem carregado com um conjunto básico de pipes. Trabalhar com um par deles desenvolverá a intuição para lidar com os restantes. A lista a seguir fornece três exemplos:

AsyncPipe
DatePipe
TitleCasePipe

AsyncPipe

Essas secções requerem uma compreensão básica de Promises ou Observables para apreciar totalmente. O AsyncPipe opera num dos dois. O AsyncPipe extrai informação das Promises/Observables como resultado para o que vier a seguir.

No caso dos Observables, o AsyncPipe subscreve automaticamente para a fonte de informação. Independentemente de onde vier a informação, o AsyncPipe subscreve para a fonte observável. O async é o nome sintático do AsyncPipe, tal como apresentado abaixo.


  Batata {{i + 1}}: {{potato}}

No exemplo, o potatoSack$ é um Observable a aguardar um carregamento de batatas. Assim que as batatas chegarem, quer de maneira síncrona, quer assíncrona, o AsyncPipe recebe-as como um array iterável. O elemento de lista é, então, preenchido por batatas.

DatePipe

Formatar strings de data requer um pouco de manipulação com o objeto de JavaScript Date. O DatePipe fornece uma forma potente de formatar datas assumindo que o input fornecido está num formato válido de data.

TitleCasePipe

Transforma texto para estilo de título. Coloca em maiúscula a primeira letra de cada palavra e transforma as letras restantes da palavra em minúsculas. As palavras são delimitadas por qualquer caracter de espaço em branco, tal como um espaço, um tab ou caracter de avanço de linha.

// example.component.ts

@Component({
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  timestamp:string = ‘2018-05-24T19:38:11.103Z’;
}



Hora atual: {{timestamp | date:‘short’}}

O formato do timestamp acima é ISO 8601¹ — não é o mais fácil de ler. O DatePipe (date) transforma o formato de data ISO no formato mais convencional mm/dd/yy, hh:mm AM|PM. Existem muitas outras opções de formatação. Todas estas opções estão na documentação oficial.

Criar pipes

Embora o Angular tenha apenas um determinado número de pipes, o decorator @Pipe permite aos programadores criarem os seus próprios. O processo começa com ng generate pipe [nome-do-pipe], substituindo [nome-do-pipe] por um nome de ficheiro preferível. Este comando produz o seguinte:

import { Pipe, PipeTransform } from ‘@angular/core’;

@Pipe({
  name: 'example'
})
export class ExamplePipe implements PipeTransform {
  transform(value: any, args?: any): any {
      return null;
  }
}

Este template de pipe simplifica a criação de um pipe personalizado. O decorator @Pipe indica ao Angular que a classe é um pipe. O valor de name: ‘example’, sendo neste caso example, é o valor que o Angular reconhece quando procura no template HTML por pipes personalizados.

Avancemos para a lógica da classe. A implementação PipeTransform fornece as instruções para a função transform. Esta função tem significado especial dentro do contexto do decorator @Pipe. Ela recebe dois parâmetros de início.

value: any é o resultado que o pipe recebe. Pensa no

{{ umValor | example }}

. O valor de umValor é passado para o parâmetro value: any da função transform. Esta é a mesma função transform definida na classe ExamplePipe.

args?: any é qualquer argumento que o pipe recebe opcionalmente. Pensa em

{{ umValor | example:[um-argumento] }}

. [um-argumento] pode ser substituído por qualquer valor. Esse valor é passado para o parâmetro args?: any da função transform. Isto é, a função transform definida na classe do ExamplePipe.

O que quer que a função retorne, (return null;) passa a ser o resultado da operação de pipe. Observa o próximo exemplo para ver um exemplo completo de ExamplePipe. Dependendo da variável que o pipe recebe, ele passa o valor de entrada ou para maiúscula ou para minúscula no novo resultado. Um argumento inválido ou inexistente fará com que o pipe retorne o mesmo valor de entrada como resultado.

// example.pipe.ts

@Pipe({
  name: 'example'
})
export class ExamplePipe implements PipeTransform {
  transform(value:string, args?:string): any {
    switch(args || null) {
      case 'uppercase':
        return value.toUpperCase();
      case 'lowercase':
        return value.toLowerCase();
      default:
        return value;
    }
  }
}

// app.component.ts

@Component({
  templateUrl: 'app.component.html'
})
export class AppComponent {
  someValue:string = "HeLlO WoRlD!";
}




{{ someValue | example }}


{{ someValue | example:‘uppercase’ }}


{{ someValue | example:‘lowercase’ }}

Hooks do ciclo de vida

Os hooks do ciclo de vida são métodos temporizados. Eles diferem no tempo e na razão pela qual são executados. A alteração de deteção aciona estes métodos. Eles executam dependendo das condições do ciclo atual. O Angular executa constantemente deteção de alterações nos seus dados. Os hooks do ciclo de vida ajudam a gerir os seus efeitos.

Um aspeto importante destes hooks é a sua ordem de execução. Ela nunca se altera. Eles executam com base numa série previsível de eventos de carregamento produzidos a partir de um ciclo de deteção. Isto torna-os previsíveis. Alguns ativos estão apenas disponíveis depois da execução de um determinado hook. Claro, um hook executa apenas sob determinadas condições definidas na alteração atual do ciclo de deteção.

Por ordem de execução:

ngOnChanges

ngOnChanges é acionado seguindo a modificação do @Input vinculado aos membros da classe. Dados vinculados pelo decorator @Input() vêm de uma fonte externa. Quando uma fonte externa altera os dados numa forma detetável, eles são passados novamente pela propriedade @Input.

Com essa atualização, ngOnChanges aciona imediatamente. Também é acionado na inicialização dos dados de entrada. O hook recebe um parâmetro opcional do tipo SimpleChanges. Este valor contém informação das propriedades alteradas vinculadas ao valor de entrada.

ngOnInit

ngOnInit é acionado uma vez na inicialização da propriedade (@Input) de um componente vinculado aos dados. O próximo exemplo terá um aspeto semelhante ao anterior. O hook não aciona porque o ChildComponent recebe os dados de entrada. Em vez disso, ele aciona logo após a renderização da informação para o template do ChildComponent.

ngDoCheck

ngDoCheck é acionado a cada ciclo de deteção de alteração. O Angular executa frequentemente a deteção de alterações. Realizar qualquer ação fará com que faça mais um ciclo. O ngDoCheck é acionado com esses ciclos. Utiliza-o com precaução. Ele pode causar problemas de performance quando implementado incorretamente.

O ngDoCheck permite aos programadores verificarem os seus dados manualmente. Eles podem acionar uma nova data de aplicação condicionalmente. Juntamente com ChangeDetectorRef, os programadores podem criar as suas próprias verificações para a deteção de mudanças.

ngAfterContentInit

ngAfterContentInit é acionado depois da inicialização do DOM do conteúdo do componente (quando ele é carregado pela primeira vez). Esperar por queries @ContentChild(ren) é o principal caso de utilização do hook.

As queries @ContentChild(ren) produzem referências de elemento para o conteúdo do DOM. Como tal, elas não estão disponíveis até que o conteúdo do DOM carregue. É por isso que ngAfterContentInit e sua contrapartida, ngAfterContentChecked, são utilizados.

ngAfterContentChecked

ngAfterContentChecked é acionado depois de cada ciclo de deteção de alteração focado no DOM do conteúdo. Isto permite aos programadores facilitar como o DOM do conteúdo reage a deteção de alterações. O ngAfterContentChecked pode ser acionado frequentemente e causar problemas de performance se for mal implementado.

ngAfterContentChecked também é acionado durante as etapas de inicialização de um componente. Vem logo após o ngAfterContentInit.

ngAfterViewInit

ngAfterViewInit é acionado uma vez depois da vista do DOM terminar a inicialização. A vista carrega sempre logo após o conteúdo. O ngAfterViewInit espera pela resolução das queries @ViewChild(ren). Estes elementos são consultados a partir de dentro da mesma vista do componente.

ngAfterViewChecked

ngAfterViewChecked é acionado depois de qualquer ciclo de deteção de alterações focado na vista do componente. O hook ngAfterViewChecked permite aos programadores facilitar como a deteção de alterações afeta a vista do DOM.

ngOnDestroy

ngOnDestroy é acionado quando um componente é removido da vista e do DOM subsequente. Este hook fornece uma oportunidade para limpar qualquer ponta solta antes de remover um componente.

Vistas

As vistas são quase como o seu próprio DOM virtual. Cada vista contém uma referência para uma secção correspondente do DOM. Dentro de uma vista estão nós que espelham o que está nesta secção. O Angular atribui um nó de vista por cada elemento DOM. Cada nó tem uma referência para um elemento correspondente.

Quando o Angular procura por alterações, este verifica as vistas. O Angular evita o DOM em segundo plano. As vistas referenciam o DOM em seu nome. Existem outros mecanismos para garantir que as alterações de vista renderizem no DOM. Por outro lado, alterações ao DOM não afetam as vistas.

Novamente, as vistas são comuns ao longo de todas as plataformas de desenvolvimento para além do DOM. Mesmo no desenvolvimento para uma plataforma, as vistas ainda são consideradas melhor prática. Elas garantem que o Angular tenha uma interpretação correta do DOM.

As vistas podem não existir em bibliotecas externas. A manipulação direta do DOM é uma saída de emergência para este tipo de cenário. Certamente, não esperes que a aplicação funcione em várias plataformas.

Tipos de vistas

Existem dois tipos principais de vistas: incorporada e de anfitrião.

Também existem recipientes de vista. Eles armazenam vistas incorporadas e de anfitrião e são geralmente referidos como "vistas" simples.

Qualquer classe @Component regista um recipiente de vista (vista) com Angular. Novos componentes geram um seletor personalizado focado num determinado elemento do DOM. A vista anexa-se a esse elemento quando ele aparecer. O Angular sabe agora que o componente existe ao olhar para o modelo de vista.

Vistas de anfitrião e recipientes

Vistas de anfitrião hospedam componentes dinâmicos. Recipientes de vista (vistas) são anexados automaticamente a elementos já existentes no template. As vistas podem ser anexadas a qualquer elemento para além do que é único em classes de componente.

Pensa no método tradicional da geração de componente. Ele começa por criar uma classe, decorá-la com @Component, e preenchê-la com metadados. Esta abordagem ocorre em qualquer elemento de componente predefinido do template.

Tenta utilizar o comando da interface da linha de comandos do Angular (CLI): ng generate component [name-of-component]. Ele produz o seguinte:

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

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

  ngOnInit() { }
}

Isso cria o componente com o seletor app-example. Ele anexa um recipiente de vista a no template. Se essa for a raiz da aplicação, a sua vista encapsularia todas as outras vistas. A vista raiz marca o início da aplicação na perspetiva do Angular.

Criar componentes dinamicamente e registá-los no modelo de vista do Angular requer mais alguns passos. As diretrizes estruturais ajudam a gerir conteúdo dinâmico (*ngIf, *ngFor, e *ngSwitch…). No entanto, as diretrizes não escalam para aplicações maiores. Demasiadas diretrizes estruturais complicam o template.

É aqui que instanciar componentes a partir de lógicas de classe existentes vem a calhar. Estes componentes precisam de criar uma vista de anfitrião que pode inserir no modelo de vista. As vistas de anfitrião armazenam dados para componentes de maneira a que o Angular reconheça o seu propósito estrutural.

Vistas incorporadas

Diretrizes estruturais criam um ng-template à volta de um pedaço de conteúdo do HTML. O elemento anfitrião da diretriz tem um recipiente de vista anexado. Isto faz com que o conteúdo possa renderizar à condição no seu layout pretendido.

O ng-template armazena nós de vista incorporados a representar cada elemento dentro do seu innerHTML. ng-template não é de todo um elemento do DOM. Ele comenta-se a si próprio. As tags definem a extensão da sua vista incorporada.

Instanciar uma vista incorporada não requer recursos externos para além da sua própria referência. A query @ViewChild pode ir buscar isso.

Com a referência do template, chamar createEmbeddedView a partir dele dá conta do recado. O innerHTML da referência passa a ser a sua própria instância de vista incorporada.

No próximo exemplo, é um recipiente de vista. O ng-container é comentado durante a compilação, tal como o ng-template. Por isso, ele fornece uma saída para inserir a vista incorporada mantendo o DOM leve.

O template de vista incorporada é inserido na localização de layout do ng-container. Esta vista recentemente inserida não tem encapsulamento de vista adicional para além do recipiente de vista. Lembra-te de como isto é diferente das vistas de anfitrião (as vistas de anfitrião são anexadas ao seu invólucro de elemento ng-component).

import { Component, AfterViewInit, ViewChild,
ViewContainerRef, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
  Application Content
   
  End of Application

  
    Template Content
    Dynamically Generated!
  
  `
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild("template", { read: TemplateRef }) tpl: TemplateRef;
  @ViewChild("container", { read: ViewContainerRef }) ctr: ViewContainerRef;

  constructor() { }

  ngAfterViewInit() {
    const view =  this.tpl.createEmbeddedView(null);
    this.ctr.insert(view);
  }
}

As queries @ViewChild para o template fazem referência à variável #template. Isto fornece uma referência de template do tipo TemplateRef. TemplateRef armazena a função createEmbeddedView. Esta instancia o template como uma vista incorporada.

O único argumento de createEmbeddedView é para contexto. Se desejares passar metadados adicionais, podes fazê-lo aqui como um objeto. Os campos devem corresponder aos atributos de ng-template (let-[context-field-key-name]=“value”). Passar null indica que não são necessários mais metadados.

Uma segunda query @ViewChild fornece uma referência a ng-container como um ViewContainerRef. As vistas incorporadas são apenas anexadas a outras vistas, nunca ao DOM. O ViewContainerRef referencia a vista que recebe a vista incorporada.

Uma vista incorporada também pode ser inserida na vista de componente do . Esta abordagem posiciona a vista no final da vista do ExampleComponent. No entanto, neste exemplo, queremos que o conteúdo apareça mesmo no meio, onde está ng-container.

A função insert do ViewContainerRef insere a vista incorporada no ng-container. O conteúdo da vista aparece no local pretendido, no centro da vista do ExampleComponent.

Redirecionamento

O redirecionamento é essencial. Muitas aplicações da web modernas hospedam demasiada informação para uma página. Os utilizadores também não devem ter de percorrer todo o conteúdo de uma página. Uma aplicação precisa de se dividir em secções distintas. Uma boa prática do Angular é carregar e configurar o redirecionamento num módulo separado, de nível superior, que é dedicado ao redirecionamento e importado pela raiz, AppModule.

Os utilizadores dão prioridade a informações necessárias. O redirecionamento ajuda-os a encontrar a secção da aplicação com tal informação. Qualquer outra informação útil para outros utilizadores pode existir num caminho totalmente diferente. Com redirecionamento, ambos os utilizadores podem encontrar o que precisam rapidamente. Detalhes irrelevantes permanecem escondidos atrás de caminhos irrelevantes.

O redirecionamento funciona muito bem ao ordenar e restringir acesso a dados da aplicação. Informação sensível nunca deve ser exibida a utilizadores não autorizados. A aplicação pode intervir entre cada caminho. Ela pode examinar a sessão de um utilizador por questões de autenticação. Este exame determina que caminho deve ser renderizado. O redirecionamento dá aos programadores a oportunidade perfeita para validar um utilizador antes de proceder.

Quanto ao Angular, o redirecionamento ocupa toda a sua própria biblioteca dentro do framework. Todos os frameworks modernos de front-end suportam redirecionamento – o Angular não é exceção. O redirecionamento acontece no lado do client utilizando quer redirecionamento de hash, quer de localização. Ambos os estilos permitem ao client gerir os seus próprios caminhos. Não é necessária assistência adicional por parte do servidor após o pedido inicial.

Redirecionamento básico

Os utilitários de redirecionamento exportam com o RouterModule disponível em @angular/router. Não faz parte da biblioteca principal, visto que nem todas as aplicações requerem redirecionamento. A forma mais convencional de introduzir redirecionamento é com o seu próprio módulo de recursos.

À medida que a complexidade cresce, ter o seu próprio módulo irá promover a simplicidade do módulo raiz. Mantê-lo estupidamente simples, sem comprometer a funcionalidade, constitui um bom design para os módulos.

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

import { AComponent } from '../../components/a/a.component';
import { BComponent } from '../../components/b/b.component';

// um array de futuros caminhos!
const routes: Routes = [];

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

.forRoot(...) é uma função de classe disponível a partir da classe RouterModule. A função aceita um array de objetos Route como Routes. O .forRoot(...) configura caminhos para eager-loading, enquanto que a sua alternativa, .forChild(...), configura para lazy-loading.

Eager-loading significa que os caminhos carregam o seu conteúdo para a aplicação logo no início. Lazy-loading acontece por pedido. O foco deste artigo é o eager-loading. É a abordagem predefinida para carregar uma aplicação. A definição da classe RouterModule tem um aspeto semelhante ao próximo bloco de código.

@NgModule({
  // … montes de metadados ...
})
export class RouterModule {
  forRoot(routes: Routes) {
    // … configuração para caminhos eagerly loaded …
  }

  forChild(routes: Routes) {
    // … configuração para caminhos lazily loaded …
  }
}

Não te preocupes com a configuração dos detalhes que o exemplo omite com comentários. Ter uma compreensão geral é suficiente por enquanto.

Observa como o AppRoutingModule importa o RouterModule enquanto também o exporta. Isto faz sentido visto que o AppRoutingModule é um módulo de recursos. Ele importa para o módulo raiz como um módulo de recursos. Ele expõe diretrizes RouterModule, interfaces e serviços para a árvore de componente raiz.

Isto explica a razão para o AppRoutingModule ter de exportar o RouterModule. Ele faz isto em prol da árvore de componentes subjacente da raiz do módulo. Ele precisa de ter acesso a essas funcionalidades de redirecionamento!

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AComponent } from './components/a/a.component';
import { BComponent } from './components/b/b.component';
import { AppRoutingModule } from './modules/app-routing/app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    AComponent,
    BComponent
  ],
  imports: [
    AppRoutingModule, // redirecionamento de módulo de funcionalidades
    BrowserModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

O token AppRoutingModule importa a partir do topo. O seu token é inserido na raiz do array de importação do módulo. A árvore de componente raiz pode agora utilizar a biblioteca RouterModule. Isto inclui as suas diretrizes, interfaces e serviços tal como já foi mencionado. Um grande agradecimento ao AppRoutingModule por exportar o RouterModule!

As funcionalidades do RouterModule vão dar jeito para os componentes da raiz. O HTML básico para o AppComponent utiliza uma diretriz: router-outlet.

routerLink é uma diretriz de atributo do RouterModule. Vai ser anexada a cada elemento do

assim que os caminhos estejam configurados. router-outlet é uma diretriz de componente com um comportamento interessante. Funciona mais como um marcador para exibir conteúdo redirecionado. O conteúdo redirecionado é resultante da navegação para um caminho específico. Geralmente, isto significa um único componente, conforme configurado no AppRoutingModule.

O conteúdo redirecionado é renderizado logo após . Nada é renderizado dentro dele. Isto não faz grande diferença. Dito isto, não esperes que o router-outlet se comporte como um recipiente para conteúdo redirecionado. É simplesmente um marcador para anexar conteúdo redirecionado ao Modelo de Objeto de Documento (DOM).

A primeira questão a ser abordada é que caminhos esta aplicação irá consumir? Bem, existem dois componentes: AComponent e BComponent. Cada um deve ter o seu próprio caminho. Estes podem renderizar a partir do router-outlet do AppComponent, dependendo da localização atual do caminho.

A localização do caminho (ou caminhos) define o que é anexado à origem de um website (por exemplo, http://localhost:4200), através de uma série de barras (/).

// … mesmas importações de antes …

const routes: Routes = [
  {
    path: 'A',
    component: AComponent
  },
  {
    path: 'B',
    component: BComponent
  }
];

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

http://localhost:4200/A renderiza AComponent a partir do router-outlet do AppComponent. http://localhost:4200/B renderiza BComponent. No entanto, precisas de uma maneira de encaminhar para essas localizações sem utilizar a barra de endereços. Uma aplicação não deve depender da barra de navegação de um browser para a navegação.

O CSS (do inglês, Cascading Stylesheets) global suplementa o HTML abaixo dele. Um link de redirecionamento da aplicação deve ter uma boa aparência. O CSS abaixo também é aplicado a todos os outros exemplos.

/* styles.css global */

ul li {
  cursor: pointer;
  display: inline-block;
  padding: 20px;
  margin: 5px;
  background-color: whitesmoke;
  border-radius: 5px;
  border: 1px solid black;
}

ul li:hover {
  background-color: lightgrey;
}




  Vá para A!
  Vá para B!

Isto é redirecionamento básico! Clicar em qualquer um dos elementos routerLink encaminha para o endereço web. Isto redefine-o sem atualizar o browser. O Router do Angular mapeia o endereço encaminhado para o Routes configurado no AppRoutingModule. Ele faz a correspondência com a propriedade path de um único objeto Route dentro do array. A primeira correspondência vence sempre, por isso, caminhos de correspondência total devem estar no final do array Routes.

Caminhos de correspondência total previnem que a aplicação pare de funcionar se não conseguir corresponder a nenhum caminho atual. Isto pode acontecer a partir da barra de endereços, onde o utilizador pode escrever outro caminho. Para isso, o Angular fornece um valor de caminho **, que aceita todos os caminhos. Esse caminho geralmente renderiza um componente PageNotFoundComponent, que exibe "Error 404: Page not found" (Erro 404: página não encontrada).

// … PageNotFoundComponent importado juntamente com todo o resto …

const routes: Routes = [
  {
    path: 'A',
    component: AComponent
  },
  {
    path: 'B',
    component: BComponent
  },
  {
    path: '',
    redirectTo: 'A',
    pathMatch: 'full'
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

O objeto Route que contém redirectTo impede que o PageNotFoundComponent renderize como resultado de http://localhost:4200. Este é o caminho principal da aplicação. Para corrigir isto, o redirectTo redireciona o caminho principal para http://localhost:4200/A. O http://localhost:4200/A torna-se indiretamente o novo caminho principal da aplicação.

O pathMatch: 'full' indica ao objeto Route para fazer correspondência com o caminho principal (http://localhost:4200). Isto corresponde a um caminho vazio.

Estes dois novos objetos Route ficam no final do array, visto que a primeira correspondência vence. O último elemento do array (path: '**') corresponde sempre, por isso fica no final.

Existe mais uma coisa que vale a pena abordar antes de avançarmos. Como é que o utilizador sabe onde ele ou ela está na aplicação, em relação ao caminho atual? Claro que pode existir conteúdo específico para o caminho, mas como se supõe que um utilizador fará essa ligação? Deve existir algum tipo de destaque aplicado ao routerLinks. Deste modo, o utilizador saberá que caminho está ativo para a página da web fornecida.

Esta é uma solução simples. Quando clicas num elemento routerLink, o Router do Angular atribui-lhe foco. Esse foco pode acionar determinados estilos que fornecem feedback útil ao utilizador. A diretriz routerLinkActive pode rastrear este foco para o programador.




  Vá para A!
  Vá para B!

A atribuição correta de routerLinkActive representa uma string de classes. Este exemplo retrata apenas uma classe (.active), mas qualquer número de classes com espaço delimitado pode ser aplicado. Quando o Router atribui foco a um routerLink, as classes de espaço delimitado são aplicadas ao elemento anfitrião. Quando o foco desaparece, as classes são removidas automaticamente.

/* styles.css global */

.active {
  background-color: lightgrey !important;
}

Os utilizadores podem agora facilmente reconhecer como o caminho atual e o conteúdo da página coincidem. O destaque lightgrey aplica-se à correspondência do routerLink com o caminho atual. !important garante que o destaque se sobrepõe a estilo em linha.

Hooks do ciclo de vida do Angular: ngOnChanges, ngOnInit e muito mais

Carlos Silva. — Wed, 05 Jul 2023 21:00:00 +0000

Artigo original: Angular Lifecycle Hooks: ngOnChanges, ngOnInit, and more

**Por que precisamos de hooks do ciclo de vida?**

Os frameworks modernos de front-end movem a aplicação de um estado para outro. Os dados alimentam essas atualizações. Essas tecnologias interagem com os dados que, por sua vez, fazem a transição do estado. A cada mudança de estado, há muitos momentos específicos em que determinados ativos ficam disponíveis.

Em um momento, o modelo pode estar pronto. Em outro, os dados terão terminado de ser carregados. A programação de cada exemplo requer um meio de detecção. Os hooks de ciclo de vida atendem a essa necessidade. Os frameworks modernos de front-end vêm com uma variedade de hooks de ciclo de vida. O Angular não é uma exceção.

Hooks de ciclo de vida explicados

Os hooks de ciclo de vida são métodos programados para serem executados em determinado momento. Eles diferem em quando e por que são executados. A detecção de alterações aciona esses métodos. Eles são executados de acordo com as condições do ciclo atual. O Angular executa a detecção de alterações constantemente em seus dados. Os hooks de ciclo de vida ajudam a gerenciar seus efeitos.

Um aspecto importante desses hooks é sua ordem de execução. Ela nunca muda. Eles são executados com base em uma série previsível de eventos de carregamento produzidos a partir de um ciclo de detecção. Isso os torna previsíveis.

Alguns ativos só estão disponíveis após a execução de um determinado hook. Obviamente, um hook só é executado sob determinadas condições definidas no ciclo de detecção de alterações atual.

Este artigo apresenta os hooks de ciclo de vida na ordem de sua execução (se todos forem executados). Certas condições merecem a ativação de um hook. Há alguns que são executados apenas uma vez, após a inicialização do componente.

Todos os métodos do ciclo de vida estão disponíveis em @angular/core. Embora não seja obrigatório, o Angular recomenda a implementação de todos os hooks (texto em inglês). Essa prática resulta em mensagens de erro mais relacionadas ao componente.

**Ordem de execução dos hooks de ciclo de vida**

ngOnChanges

O ngOnChanges é acionado após a modificação dos membros da classe vinculada @Input. Os dados vinculados pelo decorador @Input() são provenientes de uma fonte externa. Quando a fonte externa altera esses dados de maneira detectável, eles passam novamente pela propriedade @Input.

Com essa atualização, o ngOnChanges é acionado imediatamente. Ele também é acionado na inicialização dos dados de entrada. O hook recebe um parâmetro opcional do tipo SimpleChanges. Esse valor contém informações sobre as propriedades de limite de entrada alteradas.

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
  Child Component
  TICKS: {{ lifecycleTicks }}
  DATA: {{ data }}
  `
})
export class ChildComponent implements OnChanges {
  @Input() data: string;
  lifecycleTicks: number = 0;

  ngOnChanges() {
    this.lifecycleTicks++;
  }
}

@Component({
  selector: 'app-parent',
  template: `
  ngOnChanges Example
  
  `
})
export class ParentComponent {
  arbitraryData: string = 'initial';

  constructor() {
    setTimeout(() => {
      this.arbitraryData = 'final';
    }, 5000);
  }
}

Resumo: o ParentComponent (componente pai) vincula os dados de entrada ao ChildComponent (componente filho). O componente recebe esses dados por meio de sua propriedade @Input e ngOnChanges é acionado. Após cinco segundos, a chamada de retorno setTimeout é acionada. O ParentComponent altera a fonte de dados da propriedade do limite de entrada do ChildComponent. Os novos dados fluem pela propriedade de entrada. O ngOnChanges é acionado mais uma vez.

ngOnInit

O ngOnInit é acionado uma vez na inicialização das propriedades vinculadas à entrada (@Input) de um componente. O próximo exemplo será semelhante ao anterior. O hook não é acionado quando o ChildComponent recebe os dados de entrada. Em vez disso, ele é acionado logo após os dados serem renderizados no modelo ChildComponent.

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
  Child Component
  TICKS: {{ lifecycleTicks }}
  DATA: {{ data }}
  `
})
export class ChildComponent implements OnInit {
  @Input() data: string;
  lifecycleTicks: number = 0;

  ngOnInit() {
    this.lifecycleTicks++;
  }
}

@Component({
  selector: 'app-parent',
  template: `
  ngOnInit Example
  
  `
})
export class ParentComponent {
  arbitraryData: string = 'initial';

  constructor() {
    setTimeout(() => {
      this.arbitraryData = 'final';
    }, 5000);
  }
}

Resumo: o ParentComponent vincula os dados de entrada ao ChildComponent. O ChildComponent recebe esses dados por meio de sua propriedade @Input. Os dados são renderizados para o modelo e o ngOnInit é acionado. Após cinco segundos, a chamada de retorno setTimeout é acionada. O ParentComponent muda a fonte de dados da propriedade vinculada à entrada de ChildComponent e ngOnInit NÃO É ACIONADO.

ngOnInit é um hook de uso único. A inicialização é sua única preocupação.

ngDoCheck

O ngDoCheck é acionado a cada ciclo de detecção de alterações. O Angular executa a detecção de alterações com frequência. O desempenho de qualquer ação fará com que ele entre em ciclo e ngDoCheck é acionado com esses ciclos. Use-o com cautela. Ele pode criar problemas de desempenho quando implementado incorretamente.

ngDoCheck permite que os desenvolvedores verifiquem seus dados manualmente. Eles podem acionar uma nova data de aplicação condicionalmente. Em conjunto com ChangeDetectorRef, os desenvolvedores podem criar suas próprias verificações para detecção de alterações.

import { Component, DoCheck, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
  ngDoCheck Example
  DATA: {{ data[data.length - 1] }}
  `
})
export class ExampleComponent implements DoCheck {
  lifecycleTicks: number = 0;
  oldTheData: string;
  data: string[] = ['initial'];

  constructor(private changeDetector: ChangeDetectorRef) {
    this.changeDetector.detach(); // lets the class perform its own change detection

    setTimeout(() => {
      this.oldTheData = 'final'; // intentional error
      this.data.push('intermediate');
    }, 3000);

    setTimeout(() => {
      this.data.push('final');
      this.changeDetector.markForCheck();
    }, 6000);
  }

  ngDoCheck() {
    console.log(++this.lifecycleTicks);

    if (this.data[this.data.length - 1] !== this.oldTheData) {
      this.changeDetector.detectChanges();
    }
  }
}

Preste atenção no console e contrate-o com o que aparece na tela. Os dados progridem até "intermediário" antes de congelar. Três rodadas de detecção de mudanças ocorrem durante esse período, conforme indicado no console. Mais uma rodada de detecção de alterações ocorre quando 'final' é empurrado para o final de this.data. Em seguida, ocorre uma última rodada de detecção de mudanças. A avaliação da instrução if determina que não são necessárias atualizações na exibição.

Resumo: a classe é exemplificada após duas rodadas de detecção de alterações. O construtor da classe inicia o setTimeout duas vezes. Após três segundos, o primeiro setTimeout aciona a detecção de alterações e o ngDoCheck marca a tela para uma atualização. Três segundos depois, o segundo setTimeout aciona a detecção de alterações. Não são necessárias atualizações de visualização de acordo com a avaliação de ngDoCheck.

Aviso

Antes de continuar, aprenda a diferença entre o DOM de conteúdo e o DOM de visualização (DOM significa Modelo de Objeto do Documento).

O DOM de conteúdo define o innerHTML dos elementos da diretiva. Por outro lado, o DOM de visualização é o modelo de um componente, excluindo qualquer modelo HTML agrupado em uma diretiva. Para entender melhor, consulte este artigo do blog (texto em inglês) do autor Minko Gechev.

ngAfterContentInit

ngAfterContentInit é acionado depois que o DOM do conteúdo do componente é inicializado (carregado pela primeira vez). Esperar por pesquisas (do inglês, queries) de @ContentChild(ren) é o principal caso de uso do hook.

As pesquisas de @ContentChild(ren) produzem referências de elementos para o DOM de conteúdo. Desse modo, eles não ficam disponíveis até que o DOM do conteúdo seja carregado. Por isso, o ngAfterContentInit e seu equivalente ngAfterContentChecked são usados.

import { Component, ContentChild, AfterContentInit, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-c',
  template: `
  I am C.
  Hello World!
  `
})
export class CComponent { }

@Component({
  selector: 'app-b',
  template: `
  I am B.
  
  `
})
export class BComponent implements AfterContentInit {
  @ContentChild("BHeader", { read: ElementRef }) hRef: ElementRef;
  @ContentChild(CComponent, { read: ElementRef }) cRef: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngAfterContentInit() {
    this.renderer.setStyle(this.hRef.nativeElement, 'background-color', 'yellow')

    this.renderer.setStyle(this.cRef.nativeElement.children.item(0), 'background-color', 'pink');
    this.renderer.setStyle(this.cRef.nativeElement.children.item(1), 'background-color', 'red');
  }
}

@Component({
  selector: 'app-a',
  template: `
  ngAfterContentInit Example
  I am A.
  
    BComponent Content DOM
    
  
  `
})
export class AComponent { }

Os resultados da pesquisa de @ContentChild estão disponíveis em ngAfterContentInit. O Renderer2 atualiza o DOM de conteúdo do BComponent, que contém uma tag h3 e o CComponent. Esse é um exemplo comum de projeção de conteúdo (texto em inglês).

Resumo: a renderização começa com o AComponent. Para concluir, o AComponent deve renderizar o BComponent. O BComponent projeta o conteúdo agrupado em seu elemento por meio do elemento . O CComponent faz parte do conteúdo projetado. O conteúdo projetado termina de ser renderizado. O ngAfterContentInit é acionado. O BComponent termina a renderização. O AComponent termina a renderização. ngAfterContentInit não será acionado novamente.

ngAfterContentChecked

O ngAfterContentChecked é acionado após cada ciclo de detecção de alterações direcionado ao DOM de conteúdo. Isso permite que os desenvolvedores facilitem o modo como o DOM do conteúdo reage à detecção de alterações. O ngAfterContentChecked pode ser acionado com frequência e causar problemas de desempenho se for implementado incorretamente.

O ngAfterContentChecked também é acionado durante os estágios de inicialização de um componente. Ele vem logo após ngAfterContentInit.

import { Component, ContentChild, AfterContentChecked, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-c',
  template: `
  I am C.
  Hello World!
  `
})
export class CComponent { }

@Component({
  selector: 'app-b',
  template: `
  I am B.
  
  
  `
})
export class BComponent implements AfterContentChecked {
  @ContentChild("BHeader", { read: ElementRef }) hRef: ElementRef;
  @ContentChild(CComponent, { read: ElementRef }) cRef: ElementRef;

  constructor(private renderer: Renderer2) { }

  randomRGB(): string {
    return `rgb(${Math.floor(Math.random() * 256)},
    ${Math.floor(Math.random() * 256)},
    ${Math.floor(Math.random() * 256)})`;
  }

  ngAfterContentChecked() {
    this.renderer.setStyle(this.hRef.nativeElement, 'background-color', this.randomRGB());
    this.renderer.setStyle(this.cRef.nativeElement.children.item(0), 'background-color', this.randomRGB());
    this.renderer.setStyle(this.cRef.nativeElement.children.item(1), 'background-color', this.randomRGB());
  }
}

@Component({
  selector: 'app-a',
  template: `
  ngAfterContentChecked Example
  I am A.
  
    BComponent Content DOM
    
  
  `
})
export class AComponent { }

Ele não difere muito do ngAfterContentInit. Um mero foi adicionado ao BComponent. Clicar nele causa um loop de detecção de alterações. Isso ativa o gancho, conforme indicado pela aleatoriedade da cor de fundo.

Resumo: a renderização começa com o AComponent. Para concluir, o AComponent deve renderizar o BComponent. O BComponent projeta o conteúdo agrupado em seu elemento por meio do elemento . O CComponent faz parte do conteúdo projetado. O conteúdo projetado termina de ser renderizado. ngAfterContentChecked é acionado. O BComponent termina a renderização. AComponent termina a renderização. O ngAfterContentChecked pode ser acionado novamente por meio da detecção de alterações.

ngAfterViewInit

O ngAfterViewInit é acionado uma vez após a conclusão da inicialização do DOM de visualização. A visualização sempre é carregada logo após o conteúdo. ngAfterViewInit aguarda a resolução das pesquisas @ViewChild(ren). Esses elementos são consultados na mesma visualização do componente.

No exemplo abaixo, o título h3 de BComponent é pesquisado. ngAfterViewInit é executado assim que os resultados da pesquisa estão disponíveis.

import { Component, ViewChild, AfterViewInit, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-c',
  template: `
  I am C.
  Hello World!
  `
})
export class CComponent { }

@Component({
  selector: 'app-b',
  template: `
  I am B.
  
  `
})
export class BComponent implements AfterViewInit {
  @ViewChild("BStatement", { read: ElementRef }) pStmt: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit() {
    this.renderer.setStyle(this.pStmt.nativeElement, 'background-color', 'yellow');
  }
}

@Component({
  selector: 'app-a',
  template: `
  ngAfterViewInit Example
  I am A.
  
    BComponent Content DOM
    
  
  `
})
export class AComponent { }

Renderer2 altera a cor de fundo do título de BComponent. Isso indica que o elemento de visualização foi pesquisado com sucesso graças ao ngAfterViewInit.

Resumo: a renderização começa com o AComponent. Para concluir, o AComponent deve renderizar o BComponent. O BComponent projeta o conteúdo agrupado em seu elemento por meio do elemento . CComponent faz parte do conteúdo projetado. O BComponent termina a renderização. O ngAfterViewInit é acionado. AComponent termina a renderização. ngAfterViewInit não será acionado novamente.

ngAfterViewChecked

O ngAfterViewChecked é acionado após qualquer ciclo de detecção de alterações que tenha como alvo a visualização do componente. O hook ngAfterViewChecked permite que os desenvolvedores facilitem o modo como a detecção de alterações afeta o DOM de visualização.

import { Component, ViewChild, AfterViewChecked, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-c',
  template: `
  I am C.
  Hello World!
  `
})
export class CComponent { }

@Component({
  selector: 'app-b',
  template: `
  I am B.
  
  
  `
})
export class BComponent implements AfterViewChecked {
  @ViewChild("BStatement", { read: ElementRef }) pStmt: ElementRef;

  constructor(private renderer: Renderer2) { }

  randomRGB(): string {
    return `rgb(${Math.floor(Math.random() * 256)},
    ${Math.floor(Math.random() * 256)},
    ${Math.floor(Math.random() * 256)})`;
  }

  ngAfterViewChecked() {
    this.renderer.setStyle(this.pStmt.nativeElement, 'background-color', this.randomRGB());
  }
}

@Component({
  selector: 'app-a',
  template: `
  ngAfterViewChecked Example
  I am A.
  
    BComponent Content DOM
    
  
  `
})
export class AComponent { }

Resumo: a renderização começa com o AComponent. Para concluir, o AComponent deve renderizar o BComponent. O BComponent projeta o conteúdo agrupado em seu elemento por meio do elemento . CComponent faz parte do conteúdo projetado. O conteúdo projetado termina de ser renderizado. O BComponent termina a renderização. ngAfterViewChecked é acionado. O AComponent termina a renderização. O ngAfterViewChecked pode ser acionado novamente por meio da detecção de alterações.

Clicar no elemento inicia uma rodada de detecção de alterações. O ngAfterContentChecked dispara e randomiza a cor de fundo dos elementos consultados a cada clique no botão.

ngOnDestroy

ngOnDestroy é acionado quando um componente é removido da visualização e do DOM subsequente. Esse hook oferece uma chance de reparar quaisquer pontas soltas antes da exclusão de um componente.

import { Directive, Component, OnDestroy } from '@angular/core';

@Directive({
  selector: '[appDestroyListener]'
})
export class DestroyListenerDirective implements OnDestroy {
  ngOnDestroy() {
    console.log("Goodbye World!");
  }
}

@Component({
  selector: 'app-example',
  template: `
  ngOnDestroy Example
  
  I can be destroyed!
  `
})
export class ExampleComponent {
  destroy: boolean = true;

  toggleDestroy() {
    this.destroy = !this.destroy;
  }
}

Resumo: o botão é clicado. O membro destroy de ExampleComponent alterna para false. A instrução estrutural *ngIf é avaliada como falsa. ngOnDestroy é acionado. O *ngIf remove o

que servia como seu host. Esse processo se repete qualquer número de vezes que você clicar no botão para alternar destroy para false.

Conclusão

Lembre-se de que determinadas condições devem ser atendidas para cada hook. Eles sempre serão executados em ordem sequencial, independentemente. Isso torna os hooks previsíveis o suficiente para serem usados, mesmo que alguns não sejam executados.

Com os hooks de ciclo de vida, é fácil prever o momento de execução de uma classe. Eles permitem que os desenvolvedores acompanhem onde a detecção de alterações está ocorrendo e como a aplicação deve reagir. Eles ficam parados em códigos que exigem dependências baseadas em carregamentos disponíveis somente após algum tempo.

O ciclo de vida do componente caracteriza os frameworks modernos de front-end. O Angular organiza seu ciclo de vida fornecendo os hooks mencionados acima.

Recursos (em inglês)

Outras fontes (em inglês)

Lazy loading no Angular – um guia para iniciantes sobre os NgModules

Carlos Silva. — Mon, 03 Jul 2023 21:00:00 +0000

Artigo original: Lazy Loading in Angular – A Beginner's Guide to NgModules

O que é lazy loading?

O lazy loading (algo como "carregamento lento", em português) é o processo de carregamento de componentes, módulos ou outros ativos de um site, conforme necessário.

Como o Angular cria uma SPA (Aplicação de Página Única), todos os seus componentes são carregados de uma só vez. Isso significa que muitas bibliotecas ou módulos desnecessários também podem ser carregados.

Para uma aplicação pequena, não há problema. Porém, à medida que a aplicação cresce, o tempo de carregamento aumentará se tudo for carregado de uma vez. O lazy loading permite que o Angular carregue componentes e módulos como e quando eles forem necessários.

Em primeiro lugar, para entender como o lazy loading funciona no Angular, precisamos entender os blocos de construção básicos da estrutura: os NgModules.

O que são os NgModules?

Bibliotecas do Angular, como RouterModule, BrowserModule e FormsModule são conhecidas como NgModules. Material Angular, que é uma ferramenta de terceiros, também é um tipo de NgModule.

Os NgModules consistem em arquivos e códigos relacionados a um domínio específico ou que têm um conjunto semelhante de funcionalidades.

Um arquivo NgModule típico declara componentes, instruções, pipes e serviços. Ele também pode importar outros módulos que são necessários no módulo atual.

Uma das vantagens importantes dos NgModules é que eles podem ser carregados lentamente. Vamos dar uma olhada em como podemos configurar o carregamento lento.

Você pode verificar abaixo para ver como é um arquivo NgModule básico.

Como criar NgModules

Neste tutorial, criaremos dois módulos, Módulo A e Módulo B, que serão carregados lentamente. Na tela principal, teremos dois botões para carregar cada módulo de maneira lenta.

Crie o projeto

Crie um projeto do Angular chamado lazy-load-demo executando o comando abaixo:

ng new lazy-load-demo --routing --style css
code lazy-load-demo

Aqui, estamos criando um novo projeto com roteamento. Além disso, mencionamos o formato da folha de estilo para CSS. O segundo comando abre seu projeto no VS Code.

Módulo Root

Por padrão, um módulo raiz ou módulo de aplicação é criado em /src/app. Abaixo está o arquivo NgModule que é criado.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Primeiro, importamos todos os módulos e componentes necessários.

Depois disso, o decorador @NgModule declara que a classe AppModule é um tipo de NgModule. O decorador aceita declarações, importações, provedores e bootstrap. Aqui estão as descrições de cada um deles:

declarações: os componentes deste módulo.
importações: os módulos que são exigidos pelo módulo atual.
provedores: os provedores de serviços, se houver.
bootstrap: o componente root que o Angular cria e insere na página da Web do host index.html.

Tela principal

A tela principal terá dois botões: Load Module A e Load Module B. Como o nome sugere (Carregar o módulo A e Carregar o módulo B, respectivamente), clicar nesses botões carregará lentamente cada módulo.

Para isso, substitua seu arquivo app.component.html pelo conteúdo abaixo.

Vamos definir os módulos para as rotas a e b.

Módulos de carregamento lento

Para criar módulos carregados de modo lento, execute os comandos abaixo:

ng generate module modulea --route a --module app.module
ng generate module moduleb --route b --module app.module

Os comandos gerarão duas pastas, chamadas modulea e moduleb. Cada pasta conterá seus próprios arquivos module.ts, routing.ts e component.

Se você verificar seu app-routing.module.ts, verá o código abaixo para as rotas:

const routes: Routes = [
  { path: 'a', loadChildren: () => import('./modulea/modulea.module').then(m => m.ModuleaModule) },
  { path: 'b', loadChildren: () => import('./moduleb/moduleb.module').then(m => m.ModulebModule) }
];

Isso implica que, quando a rota a ou b é visitada, carrega seus respectivos módulos de maneira lenta.

Ao executar o projeto com ng serve, você verá a tela abaixo:

Página inicial

Ao clicar no botão Load Module A, você será direcionado para a página a. Esta é a aparência da sua tela:

Módulo A carregado em lazy loading

Você deverá ver uma tela semelhante que diz moduleb works! quando clicar em Load Module B.

**Como verificar se o lazy loading funcionou**

Para verificar se os arquivos foram carregados, abra as ferramentas de desenvolvedor pressionando F12. Depois disso, visite a aba Network, como pode ser visto na captura de tela abaixo. Quando você atualizar a página, ela mostrará alguns arquivos que foram solicitados.

Aba Network (Rede) nas ferramentas do desenvolvedor

Vá em frente e limpe sua lista de solicitações pressionando o botão Clear (Limpar), conforme mostrado na imagem abaixo.

Ao clicar em Load Module A, você verá uma solicitação para modulea-modulea-module.js, como na captura de tela abaixo. Isso verifica se o Módulo A foi carregado de maneira lenta.

Módulo A carregado

Do mesmo modo, quando você clica em Load Module B, o arquivo moduleb-moduleb-module.js é carregado. Isso verifica se o Módulo B foi carregado de maneira lenta.

Módulo B carregado

Agora, quando você tentar clicar nos botões, ele não carregará esses arquivos js novamente.

Casos de uso para os NgModules

Como vimos, é muito fácil criar módulos de lazy loading. Há muitos casos de uso em que eles são úteis, como:

Criação de um módulo separado para telas de pré-login e pós-login.
Em um site e-commerce, as telas voltadas para o fornecedor e as telas voltadas para o cliente podem pertencer a módulos separados. Você também pode criar um módulo separado para pagamento.
Geralmente, é criado um CommonModule separado, que contém componentes, instruções ou pipelines compartilhados. Instruções como o botão Copy Code e componentes como upvote/downvote geralmente são incluídos em um módulo comum.

Conclusão

Para sites menores, talvez não seja muito importante que todos os módulos sejam carregados de uma só vez. Porém, à medida que o site cresce, é útil ter módulos separados, que são carregados conforme necessário.

Devido ao lazy loading, o tempo de carregamento dos sites pode ser reduzido drasticamente. Isso é especialmente útil quando se está tentando obter uma classificação mais elevada para SEO. Mesmo que não seja o caso, tempos de carregamento mais curtos significam uma melhor experiência do usuário.

Você tem interesse em mais tutoriais? Dê uma olhada nestes recursos (em inglês):

Como criar uma aplicação do Angular 8 do zero em 11 passos fáceis

Daniel Rosa — Tue, 10 Jan 2023 10:17:27 +0000

Artigo original: How to build an Angular 8 app from scratch in 11 easy steps

O Angular é um dos três frameworks mais populares para o desenvolvimento para front-end, juntamente com o React e o Vue.js. A versão mais recente* é o Angular 8, lançado em maio de 2019.

Nota de tradução: no momento da criação do texto, a versão mais recente era a versão 8. No momento da tradução do artigo, a versão estável mais recente é a versão 12.1.4

Há muitos novos recursos e melhorias, tanto para a interface de linha de comando, quanto para o próprio framework. Isso resulta em um desempenho melhor e em pacotes de produção menores. Um recurso interessante é o comando ng deploy, que permite que os desenvolvedores criem e façam rapidamente o deploy de suas aplicações do Angular em provedores de hospedagem populares como o Firebase ou o GitHub.

Neste tutorial, faremos o passo a passo da criação de um exemplo de aplicação do Angular do zero usando várias APIs do Angular, como HttpClient e Material Design.

Aqui estão algumas das coisas que aprenderemos:

Como fazer o mock de um servidor de API REST que usa dados falsos a partir de um arquivo JSON
Como consumir a API REST de nossa aplicação do Angular 8 usando HttpClient
Como lidar com erros do HTTP usando os operadores throwError() e catchError() do RxJS
Como tentar novamente solicitações de HTTP que falham em condições ruins de rede e como cancelar solicitações pendentes usando os operadores retry() e takeUntil() do RxJS
Como criar e utilizar os componentes e serviços do Angular
Como configurar o roteamento e o Angular Material em nosso projeto e criar uma UI de aparência profissional com os componentes do Material Design
Por fim, aprenderemos a fazer o deploy da aplicação no Firebase usando o comando ng deploy, disponível a partir do Angular 8.3.

Você também aprenderá por meio de exemplos:

Como fazer rapidamente o mock de uma API REST com recursos do mundo real (como paginação, por exemplo), que você poderá consumir em sua aplicação antes de passar para o back-end da vida real quando estiver pronto.
Como configurar a CLI do Angular
Como inicializar seu projeto do Angular 8
Como configurar o Angular Material
Como adicionar componentes e roteamento no Angular
Como gerar e usar serviços do Angular
Como consumir APIs REST com o HttpClient do Angular
Como criar e fazer o deploy de sua aplicação do Angular no Firebase.

Este tutorial é dividido nos seguintes passos:

Passo 1 — Instalação da CLI do Angular 8
Passo 2 — Criação do projeto do Angular 8
Passo 3 — Inclusão do HttpClient do Angular
Passo 4 — Criação de componentes
Passo 5 — Inclusão de roteamento
Passo 6 — Criação da UI com o Material Components do Angular
Passo 7 — Criação do mock de uma API REST
Passo 8 — Consumo da API REST com o HttpClient do Angular
Passo 9 — Tratamento de erros do HTTP
Passo 10 — Inclusão de paginação
Passo 11 — Criação e deploy da aplicação do Angular com o Firebase

Vamos agora começar com os pré-requisitos!

Observação: você pode baixar nosso livro sobre o Angular 8: Build your first web apps with Angular 8 gratuitamente.

Pré-requisitos

Se quiser acompanhar este tutorial, é necessário ter:

Conhecimento prévio de TypeScript.
Uma máquina para desenvolvimento com o Node 8.9 ou superior e com o NPM 5.5.1 ou superior instalados. O Node é necessário em função da CLI do Angular. Você pode visitar o site da web oficial e pegar os arquivos binários para seu sistema. Você também pode usar o NVM — Node Version Manager — um script de bash em conformidade com a POSIX, para instalar e gerenciar diversas versões do Node.js em sua máquina.

Se estiver pronto, vamos aprender por meio de exemplos a criar uma aplicação do Angular 8 que consome uma API REST usando o HttpClient. Implementaremos recursos do mundo real, como tratamento de erros e novas tentativas quando solicitações de HTTP não dão certo.

Passo 1 — Instalação da CLI do Angular 8

Comecemos com o primeiro passo: onde instalaremos a versão mais recente da CLI do Angular.

A CLI do Angular é a ferramenta oficial para inicializar e começar a trabalhar com os projetos do Angular. Inicie um terminal (no Mac ou no Linux) e execute o seguinte comando:

$ npm install -g @angular/cli

Ao escrever este tutorial, a angular/cli v8.3.2 é a que foi instalada em nosso sistema.

Pronto! Você já pode passar para o próximo passo!

Passo 2 — Criação de seu projeto do Angular 8

Neste passo, usaremos a CLI do Angular para inicializar nosso projeto do Angular.

Use o terminal para executar os seguintes comandos:

$ cd ~
$ ng new angular-example

A CLI perguntará a você se você quer adicionar o roteamento para o Angular. Confirme que sim. Em seguida, ela perguntará qual formato de folha de estilo você vai querer usar. Selecione CSS.

A CLI do Angular vai gerar os arquivos e pastas necessários, instalará os pacotes a partir do npm e configurará automaticamente o roteamento em nosso projeto.

Vá para a pasta raiz do projeto e execute o servidor de desenvolvimento local usando estes comandos:

$ cd angular-example
$ ng serve

Sua aplicação da web do Angular estará disponível a partir do endereço http://localhost:4200/.

Abra um navegador da web e acesse o endereço http://localhost:4200/. Você deverá ver uma linda página (Iniciando com o Angular 8.3+):

Você precisará sair do servidor de desenvolvimento em execução e abrir um novo terminal para os próximos passos.

Você está pronto para o terceiro passo!

Passo 3 — Inclusão do HttpClient do Angular

Neste passo, adicionaremos o HttpClient ao nosso projeto de exemplo.

Abra o arquivo src/app/app.module.ts e faça as seguintes alterações:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

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

Simplesmente, importamos o HttpClientModule e o incluímos no array de imports.

É isso – agora, podemos usar o serviço do HttpClient em nosso projeto do Angular para consumir nossa API REST.

Você está pronto para o quarto passo!

Passo 4 — Criação dos componentes da UI

As aplicações do Angular são feitas de componentes. Neste passo, aprenderemos a criar alguns componentes do Angular que fazem composição com nossa UI.

Abra um novo terminal e execute o seguinte comando:

$ cd ~/angular-example  
$ ng g component home

Você obterá o seguinte resultado no terminal:

CREATE src/app/home/home.component.html (19 bytes)  
CREATE src/app/home/home.component.spec.ts (614 bytes)  
CREATE src/app/home/home.component.ts (261 bytes)  
CREATE src/app/home/home.component.css (0 bytes)  
UPDATE src/app/app.module.ts (467 bytes)

Temos quatro arquivos, todos solicitados pelo nosso componente.

Em seguida, geraremos o componente About:

$ ng g component about

Depois, abrimos o arquivo src/app/about/about.component.html e adicionamos o seguinte código:

 Esta é a página de "about", que descreve sua aplicação

Você está pronto para o próximo passo!

Passo 5 — Inclusão do roteamento

Neste passo, aprenderemos a adicionar o roteamento em nosso exemplo.

Vá para o arquivo src/app/app-routing.module.ts e adicione as seguintes rotas:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';


const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

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

Importamos os componentes do Angular e declaramos três rotas.

A primeira rota é para o redirecionamento do caminho vazio para o componente home (a página inicial). Assim, seremos automaticamente redirecionados para a página inicial quando visitamos a aplicação pela primeira vez.

É isso. Agora que adicionamos o roteamento, podemos passar para o próximo passo!

Passo 6 — Inclusão do Angular Material

Neste passo do tutorial, aprenderemos a configurar o Angular Material em nosso projeto e a criar a UI da nossa aplicação usando seus componentes.

Vá para o terminal e execute este comando a partir da raiz do projeto:

$ ng add @angular/material

Será solicitado que você escolha o tema. Vamos escolher Indigo/Pink.

Para as outras perguntas – se você deseja configurar o HammerJS para o reconhecimento de gestos e se você quer configurar as animações do navegador para o Angular Material - pressione Enter para usar as respostas padrão.

Abra o arquivo src/app/app.module.ts e adicione as seguintes importações:

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

Importamos os módulos destes componentes do Material Design:

MatToolbar, que fornece um contêiner para cabeçalhos, títulos ou ações
MatCard, que fornece um contêiner de conteúdo para textos, fotos e ações no contexto de um único sujeito.
MatButton, que fornece um elemento
MatProgressSpinner, que fornece um indicador circular de andamento e atividade.

Em seguida, adicionamos esses módulos ao array de imports:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatCardModule,
    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Depois, abra o arquivo src/app/app.component.html e atualize-o assim:

  
  
My Angular Store

Adicionamos a barra de navegação na parte superior, com dois botões que nos levam para a página inicial e para a página do about, respectivamente.

Passo 7 — Criação do mock da API REST

Acesse uma nova interface de linha de comando (a CLI) e comece instalando json-server a partir do npm em seu projeto:

$ cd ~/angular-example
$ npm install --save json-server

Em seguida, crie uma pasta server na pasta raiz do seu projeto do Angular:

$ mkdir server
$ cd server

Na pasta server, crie um arquivo database.json e adicione o seguinte objeto de JSON:

{
    "products": []
}

Esse arquivo JSON funcionará como um banco de dados para seu servidor da API REST. Você precisa apenas adicionar alguns dados a serem servidos pela sua API REST ou usar o Faker.js para gerar automaticamente grandes quantidades de dados falsos, porém realistas.

Volte para sua linha de comando, retorne à pasta server e instale o Faker.js a partir do npm usando o seguinte comando:

$ cd ..
$ npm install faker --save

No momento da criação desse exemplo*, será instalada a versão 4.1.0 do faker.

Nota de tradução: no momento da tradução deste texto, o faker está em sua versão 6.6.6.

Agora, crie um arquivo generate.js e adicione o código abaixo:

var faker = require('faker');

var database = { products: []};

for (var i = 1; i<= 300; i++) {
  database.products.push({
    id: i,
    name: faker.commerce.productName(),
    description: faker.lorem.sentences(),
    price: faker.commerce.price(),
    imageUrl: "https://source.unsplash.com/1600x900/?product",
    quantity: faker.random.number()
  });
}

console.log(JSON.stringify(database));

Primeiro, importamos o faker. Em seguida, definimos um objeto com um array vazio para os produtos (products). Depois, inserimos um laço for para criar 300 entradas falsas usando os métodos do faker, como faker.commerce.productName(), para gerar os nomes dos produtos. Confira todos os métodos disponíveis. Por fim, convertemos o objeto do banco de dados em uma string e a registramos na saída padrão.

Então, adicionamos os scripts generate e server ao arquivo package.json:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "generate": "node ./server/generate.js > ./server/database.json",
    "server": "json-server --watch ./server/database.json"
  },

Retornamos depois disso à interface de linha de comando e executamos o script generate usando o seguinte comando:

$ npm run generate

Por fim, executamos o servidor da API REST usando este comando:

$ npm run server

Agora, você pode enviar solicitações de HTTP ao servidor como faz com qualquer servidor de API REST típico. Ele estará disponível no endereço http://localhost:3000/.

Estes são os endpoints da API que poderemos usar com o nosso servidor de API REST em JSON:

GET /products para obter os produtos
GET /products/ para obter um único produto por id
POST /products para criar um produto
PUT /products/ para atualizar um produto por id
PATCH /products/ para atualizar parcialmente um produto por id
DELETE /products/ para excluir um produto por id

Você pode usar os parâmetros _page e _limit para obter os dados de modo paginado. No cabeçalho Link, você terá os links first, prev, next e last.

Deixe o servidor de API REST em JSON em execução e abra uma nova interface de linha de comando para digitar os comandos para os próximos passos.

Passo 8 — Criação de um serviço para o consumo da API REST com o HttpClient do Angular

Neste passo, aprenderemos a consumir nossa API REST a partir do Angular usando HttpClient.

Precisamos criar um serviço do Angular para o encapsulamento do código que nos permitirá consumir os dados de nosso servidor API REST.

Vá para o terminal e execute o seguinte comando:

$ ng g service api

Depois, vá para o arquivo src/app/api.service.ts, importe e injete o HttpClient:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private SERVER_URL = "http://localhost:3000";

  constructor(private httpClient: HttpClient) { }
}

Importamos e injetamos o serviço HttpClient e definimos a variável SERVER_URL, que contém o endereço de nosso servidor de API REST.

Depois, definimos um método get(), que envia uma solicitação GET para o endpoint da API REST:

import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';

@Injectable({  
	providedIn: 'root'  
})  
export class ApiService {

	private SERVER_URL = "http://localhost:3000";
	constructor(private httpClient: HttpClient) { }

	public get(){  
		return this.httpClient.get(this.SERVER_URL);  
	}  
}

O método simplesmente invoca o método get() do HttpClient para enviar solicitações GET ao servidor de API REST.

Depois disso, precisamos usar o serviço em nosso componente home (a página inicial). Abra o arquivo src/app/home/home.component.ts, importe e injete o serviço de dados, assim:

import { Component, OnInit } from '@angular/core';  
import { ApiService } from '../api.service';

@Component({  
	selector: 'app-home',  
	templateUrl: './home.component.html',  
	styleUrls: ['./home.component.css']  
})  
export class HomeComponent implements OnInit {
	products = [];
	constructor(private apiService: ApiService) { }
	ngOnInit() {
		this.apiService.get().subscribe((data: any[])=>{  
			console.log(data);  
			this.products = data;  
		})  
	}
}

Importamos e injetamos ApiService. Agora, definimos uma variável products e chamamos o método get() do serviço para buscar os dados do servidor da API REST em JSON.

A seguir, abrimos o arquivo src/app/home/home.component.html e o atualizamos do seguinte modo:


    

    
        
            {{product.name}}
            {{product.price}} $/ {{product.quantity}}
            
        
        
            
                {{product.description}}

Usamos o componente para exibir um spinner de carregamento quando o tamanho do array products for igual a zero, ou seja, antes de qualquer dado ter sido recebido do servidor da API REST.

Depois, percorremos o array products e usamos o card do Material para exibir name, price, quantity, description e image de cada produto.

Esta é uma imagem da página inicial após a busca dos dados em JSON:

Em seguida, veremos como adicionar o tratamento de erros ao nosso serviço.

Passo 9 — Inclusão de tratamento de erros

Neste passo, aprenderemos a adicionar o tratamento de erros em nosso exemplo.

Vá para o arquivo src/app/api.service.ts e atualize-o assim:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from "@angular/common/http";

import {  throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private SERVER_URL = "http://localhost:3000/products";

  constructor(private httpClient: HttpClient) { }

  handleError(error: HttpErrorResponse) {
    let errorMessage = 'Unknown error!';
    if (error.error instanceof ErrorEvent) {
      // Client-side errors
      errorMessage = `Error: ${error.error.message}`;
    } else {
      // Server-side errors
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    window.alert(errorMessage);
    return throwError(errorMessage);
  }

  public sendGetRequest(){
    return this.httpClient.get(this.SERVER_URL).pipe(catchError(this.handleError));
  }
}

Esta é uma imagem com um exemplo de erro no console do navegador:

No próximo passo, veremos como adicionar a paginação em nossa aplicação

Passo 10 — Inclusão da paginação

Neste passo, aprenderemos a adicionar o suporte à paginação de dados usando o cabeçalho Link da resposta do HTTP recebida do servidor da API REST.

Por padrão, o HttpClient fornece apenas o corpo da resposta. Porém, em nossa aplicação, necessitamos fazer o parsing do cabeçalho Link para a extração dos links de paginação. Desse modo, precisamos instruir o HttpClient a nos dar a resposta de HttpResponse completa usando a opção observe.

O cabeçalho Link no HTTP permite que o servidor oriente um client interessado para outros recursos que contenham metadados sobre o recurso solicitado. Veja mais sobre o cabeçalho na página da W3C (em inglês).

Abra o arquivo src/app/data.service.ts e importe o operador tap() do RxJS:

import { retry, catchError, tap } from 'rxjs/operators';

Depois, adicionamos estas variáveis:

public first: string = "";  
public prev: string = "";  
public next: string = "";  
public last: string = "";

Em seguida, adicionamos o método parseLinkHeader(), que será usado para fazer o parsing do cabeçalho Link e para preencher as variáveis anteriores:

  parseLinkHeader(header) {
    if (header.length == 0) {
      return ;
    }

    let parts = header.split(',');
    var links = {};
    parts.forEach( p => {
      let section = p.split(';');
      var url = section[0].replace(/<(.*)>/, '$1').trim();
      var name = section[1].replace(/rel="(.*)"/, '$1').trim();
      links[name] = url;

    });

    this.first  = links["first"];
    this.last   = links["last"];
    this.prev   = links["prev"];
    this.next   = links["next"]; 
  }

Então, atualizamos sendGetRequest() da seguinte maneira:

  public sendGetRequest(){
    // Adicione parâmetros _page e _limit seguros, codificados como URL 

    return this.httpClient.get(this.SERVER_URL, {  params: new HttpParams({fromString: "_page=1&_limit=20"}), observe: "response"}).pipe(retry(3), catchError(this.handleError), tap(res => {
      console.log(res.headers.get('Link'));
      this.parseLinkHeader(res.headers.get('Link'));
    }));
  }

Adicionamos a opção observe com o valor response no parâmetro options do método get() para termos a resposta completa do HTTP com os cabeçalhos. A seguir, usamos o operador tap() do RxJS para fazer o parsing do cabeçalho Link antes de retornar o Observable final.

Como sendGetRequest() agora retorna um Observable com uma resposta completa de HTTP, precisamos atualizar o componente home. Portanto, abra o arquivo src/app/home/home.component.ts e importe HttpResponse assim:

import { HttpResponse } from '@angular/common/http';

Depois, atualize o método subscribe() da seguinte maneira:

ngOnInit(){

this.apiService.sendGetRequest().pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse)=>{  
	console.log(res);  
	this.products = res.body;  
})  
}

Podemos agora acessar os dados do objeto body da resposta recebida de HTTP.

Em seguida, retornamos ao arquivo src/app/data.service.ts e adicionamos o seguinte método:

public sendGetRequestToUrl(url: string){  
	return this.httpClient.get(url, { observe: "response"}).pipe(retry(3), 			
	catchError(this.handleError), tap(res => {  
		console.log(res.headers.get('Link'));  
		this.parseLinkHeader(res.headers.get('Link'));
	}));  
}

Esse método é semelhante ao método sendGetRequest(), com a exceção de que recebe o URL para o qual precisamos enviar uma solicitação GET de HTTP.

Retorne ao arquivo src/app/home/home.component.ts e adicione os métodos a seguir:

 public firstPage() {
    this.products = [];
    this.apiService.sendGetRequestToUrl(this.apiService.first).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse) => {
      console.log(res);
      this.products = res.body;
    })
  }
  public previousPage() {

    if (this.apiService.prev !== undefined && this.apiService.prev !== '') {
      this.products = [];
      this.apiService.sendGetRequestToUrl(this.apiService.prev).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse) => {
        console.log(res);
        this.products = res.body;
      })
    }

  }
  public nextPage() {
    if (this.apiService.next !== undefined && this.apiService.next !== '') {
      this.products = [];
      this.apiService.sendGetRequestToUrl(this.apiService.next).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse) => {
        console.log(res);
        this.products = res.body;
      })
    }
  }
  public lastPage() {
    this.products = [];
    this.apiService.sendGetRequestToUrl(this.apiService.last).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse) => {
      console.log(res);
      this.products = res.body;
    })
  }

Por fim, abra o arquivo src/app/home/home.component.html e atualize o template da seguinte maneira:


    

    
        
            #{{product.id}} {{product.name}}
            {{product.price}} $/ {{product.quantity}}
            
        
        
            
                {{product.description}}

Está é uma imagem da nossa aplicação:

**Passo 11 — Criação e deploy da aplicação do Angular com o Firebase**

Retorne à interface de linha de comando. Certifique-se de estar na pasta raiz do seu projeto do Angular e execute o seguinte comando:

$ ng add @angular/fire

Isso adicionará a capacidade de deploy no Firebase ao seu projeto.

No momento de criação deste tutorial, será instalada a versão 5.2.1 do @angular/fire.

Nota de tradução: no momento da tradução deste texto, o @angular/fire está em sua versão 7.4.0.

O comando também atualizará o package.json do nosso projeto, adicionando a seguinte seção:

        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {}
        }

A CLI solicitará que você cole o código de autorização, abrirá seu navegador padrão e pedirá que você dê à CLI do Firebase permissões para administrar sua conta no Firebase.

Depois de entrar com a conta do Google associada à conta do Firebase, você receberá o código de autorização.

Em seguida, será solicitado a você que selecione um projeto usando as teclas de seta ou digitando para pesquisar. Você precisa ter criado um projeto do Firebase antes disso.

A CLI criará os arquivos firebase.json e .firebaserc, atualizando o arquivo angular.json conforme necessário.

Depois, faça o deploy de sua aplicação no Firebase usando o seguinte comando:

$ ng deploy

O comando produzirá uma build otimizada de sua aplicação (equivalente ao uso do comando ng deploy --prod). Ele, então, fará o upload dos ativos de produção para a hospedagem do Firebase.

Conclusão

Neste tutorial passo a passo, você aprendeu a criar uma aplicação do Angular do zero usando a versão 8.3 do Angular ou superior.

Você também aprendeu a fazer o mock de um back-end de API REST para sua aplicação do Angular sem, praticamente, escrever linha alguma de código.

Vimos também como criar um projeto usando a CLI do Angular, adicionar o HttpClient e o Angular Material para o envio de solicitações de HTTP ao seu mock de back-end de API REST e para a estilização da UI com os componentes do Material Design.

Por fim, aprendemos como fazer o deploy da aplicação do Angular no Firebase usando o comando ng deploy, disponível a partir da versão 8.3 do Angular.

Confira outros tutoriais do Angular (em inglês).

Você pode entrar em contato com o autor usando estes links:

Como instalar o Angular no Windows: um guia de Angular CLI, Node.js e ferramentas de criação

Daniel Rosa — Tue, 26 Apr 2022 12:05:23 +0000

Artigo original: How to Install Angular on Windows: A Guide to Angular CLI, Node.js, and Build Tools

Neste tutorial, aprenderemos a instalar a Angular CLI no Windows e a usá-la para criar um projeto em Angular.

O que é a Angular CLI?

A Angular CLI é a ferramenta oficial para inicializar e trabalhar com projetos em Angular. Ela evita a inconveniência das configurações complexas e das ferramentas de build, como TypeScript, Webpack e assim por diante.

Depois de instalar a Angular CLI, você precisa executar um comando para gerar um projeto e outro para servi-lo usando um servidor de desenvolvimento local para rodar sua aplicação.

Como ocorre com a maioria das ferramentas de front-end nos dias de hoje, a Angular CLI foi criada com base no Node.js.

O Node.js é uma tecnologia de servidor que permite que você execute o JavaScript no servidor e crie aplicações da web no lado do servidor. No entanto, o Angular é uma tecnologia de front-end. Portanto, mesmo que você precise instalar o Node.js em sua máquina de desenvolvimento, é apenas para a execução da CLI.

Ao fazer o build de sua aplicação para produção, o Node.js já não será mais necessário, pois os bundles (conjuntos) finais são apenas HTML, CSS e JavaScript estáticos que podem ser servidos em qualquer servidor ou CDN.

Dito isso, se você está criando uma aplicação da web com Angular full-stack, poderá precisar do Node.js para a criação do back-end se quiser usar o JavaScript para o front-end e para o back-end.

Confira a stack MEAN – é uma arquitetura que inclui o MongoDB, o Express (um framework de servidor da web e API REST criado com base no Node.js) e o Angular. Você pode ler este artigo (em inglês) se quiser um tutorial passo a passo para iniciar.

Neste caso, o Node.js é usado para criar o back-end de sua aplicação e pode ser substituído por qualquer tecnologia do lado do servidor que você deseje, como o PHP, o Ruby ou o Python. O Angular, no entanto, não depende do Node.js, exceto para sua ferramenta de CLI e para a instalação de pacotes com o npm.

NPM é a sigla para Node Package Manager (gerenciador de pacotes do Node, em português). É um registro para a hospedagem de pacotes do Node. Nos últimos anos, ele também tem sido usado para publicar pacotes de front-end e bibliotecas como o Angular, o React, o Vue.js e até mesmo o Bootstrap.

Observação: você pode fazer o download de nosso livro, Hands-on Angular: Learn Angular Step By Step (em inglês), gratuitamente.

Instalação da Angular CLI no Windows

Primeiro, você precisa ter o Node e o npm instalados na sua máquina de desenvolvimento. Existem muitas maneiras de se fazer isso, tais como:

usar o NVM (Node Version Manager) para a instalação e trabalho com muitas versões do Node em seu sistema
usar o gerenciador de pacotes oficial do seu sistema operacional
instalar a partir do site oficial da web.

Vamos simplificar e usar o site oficial. Basta visitar a página de download e pegar os arquivos binários para o Windows e, depois, seguir o assistente de configuração.

Certifique-se de que o Node esteja instalado em seu sistema executando o comando abaixo em um prompt de comando, que deverá exibir a versão instalada do Node:

$ node -v

Depois, execute o seguinte comando para instalar a Angular CLI:

$ npm install @angular/cli

Depois de o comando terminar a instalação, a Angular CLI já deverá estar instalada em sua máquina.

Um guia rápido para a Angular CLI

Depois de instalar a Angular CLI, você pode executar diversos comandos. Comecemos conferindo a versão instalada da CLI:

$ ng version

Um segundo comando que talvez você queira executar é o comando help, que ajudará a obter uma lista de comandos a serem usados:

$ ng help

A CLI oferece os comandos a seguir:

add: adiciona suporte a uma biblioteca externa em seu projeto.

build (b): compila uma aplicação do Angular em seu diretório de saída, chamado dist/ no caminho de saída fornecido. Este comando deve ser executado dentro de um diretório de espaço de trabalho.

config: obtém ou configura os valores de configuração do Angular.

doc (d): abre a documentação oficial do Angular (angular.io) em um navegador, buscando uma palavra-chave determinada.

e2e (e): faz o build e serve uma aplicação do Angular, depois executa testes de ponta a ponta usando o Protractor.

generate (g): gera e/ou modifica arquivos com base em um esquema.

help: lista os comandos disponíveis e suas descrições breves.

lint (l): executa as ferramentas de linting no código da aplicação em Angular em uma determinada pasta de projeto.

new (n): cria um espaço de trabalho e uma aplicação inicial em Angular.

run: executa um destino personalizado definido em seu projeto.

serve (s): faz o build e serve sua aplicação, fazendo um novo build a cada alteração de arquivos.

test (t): executa os testes unitários em um projeto.

update: atualiza sua aplicação e suas dependências. Consulte https://update.angular.io/ (em inglês)

version (v): mostra a versão da Angular CLI.

xi18n: extrai as mensagens i18n do código-fonte.

Geração de um projeto

Você pode usar a Angular CLI para gerar rapidamente seu projeto em Angular executando o seguinte comando em sua interface de linha de comando:

$ ng new frontend

Observação: "frontend" é o nome do projeto. Você pode, logicamente, escolher o nome válido que quiser para seu projeto. Como criaremos uma aplicação full-stack, estou usando frontend como o nome para a aplicação de front-end .

A CLI perguntará Would you like to add Angular routing? ("Quer adicionar o roteamento do Angular?"). Você pode responder com y (Sim) ou n (Não). Não, neste caso, é a opção padrão. Também será perguntado sobre o formato da folha de estilos (stylesheet) que você quer usar (por exemplo, o CSS). Escolha suas opções e pressione Enter para continuar.

Depois disso, seu projeto estará criado com uma estrutura de diretórios e alguns arquivos com configurações e código. A maioria estará nos formatos TypeScript e JSON. Vejamos a função de cada diretório/arquivo:

/e2e/: contém os testes end-to-end (simulação do comportamento do usuário) do site
/node_modules/: todas as bibliotecas de terceiros são instaladas nesta pasta usando npm install
/src/: contém o código-fonte da aplicação. A maior parte do trabalho será feita aqui
/app/: contém módulos e componentes
/assets/: contém os ativos estáticos, como imagens, ícones e estilos
/environments/: contém arquivos de configuração específicos do ambiente (produção e desenvolvimento)
browserslist: necessário para o autoprefixador para suporte ao CSS
favicon.ico: o favicon
index.html: o arquivo HTML principal
karma.conf.js: o arquivo de configuração para o Karma (uma ferramenta de testes)
main.ts: o arquivo inicial principal, a partir de onde o AppModule é iniciado
polyfills.ts: polyfills necessários ao Angular
styles.css: o arquivo de folha de estilos (stylesheet) global do projeto
test.ts: um arquivo de configuração para o Karma
tsconfig.*.json: os arquivos de configuração para o TypeScript
angular.json: contém as configurações para a CLI
package.json: contém as informações básicas do projeto (nome, descrição e dependências)
README.md: um arquivo em markdown que contém a descrição do projeto
tsconfig.json: o arquivo de configuração para o TypeScript
tslint.json: o arquivo de configuração para o TSlint (uma ferramenta de análise estática)

Como servir o projeto

A Angular CLI fornece um conjunto de ferramentas completo para desenvolver aplicações de front-end em sua máquina local. Assim, não é preciso instalar um servidor para servir o projeto — você pode, simplesmente, usar o comando ng serve a partir do terminal para servir seu projeto localmente.

Primeiro, navegue dentro de sua pasta do projeto e execute os seguintes comandos:

$ cd frontend
$ ng serve

Agora, você pode navegar até o endereço http://localhost:4200/ para começar a mexer com sua aplicação de front-end. A página recarregará automaticamente caso você mude qualquer arquivo do código-fonte.

Geração de artefatos do Angular

A Angular CLI fornece um comando ng generate que ajuda os desenvolvedores a gerar artefatos básicos do Angular, como módulos, componentes, diretivas, pipes e serviços:

$ ng generate component meu-componente

meu-componente é o nome do componente. A Angular CLI automaticamente adicionará uma referência a components, directives e pipes no arquivo src/app.module.ts.

Se quiser adicionar seu componente, diretiva ou pipe para outro módulo (que não seja o módulo principal da aplicação, app.module.ts), você pode simplesmente prefixar o nome do componente com o nome do módulo e uma barra assim :

$ ng g component meu-modulo/meu-componente

meu-modulo é o nome de um módulo existente.

Conclusão

Neste tutorial, vimos como instalar a Angular CLI na sua máquina com Windows e como a usamos para inicializar um novo projeto do Angular do zero.

Também vimos diversos comandos que você pode usar durante o desenvolvimento de seu projeto para gerar artefatos do Angular, como módulos, componentes e serviços.

Confira nossos outros tutoriais de Angular (em inglês).

Você pode entrar em contato com o autor por meio de seu site pessoal na web, bem como segui-lo no Twitter, no LinkedIn e no Github.

Como validar formulários reativos no Angular

Lais Golin — Tue, 12 Apr 2022 19:53:45 +0000

Artigo original: How to Validate Angular Reactive Forms

Introdução

Neste artigo, aprenderemos sobre a validação de formulários reativos em Angular. Criaremos um formulário simples de registro de usuário e implementaremos algumas validações integradas nele. Juntamente com as validações integradas, também vamos implementar algumas validações personalizadas para o formulário reativo.

Consideraremos as seguintes validações personalizadas para esta demonstração:

Verificar a disponibilidade do nome do usuário
Validar o padrão de senha
Validar a senha digitada em dois campos diferentes

Veja a aplicação em ação:

Pré-requisitos

Instalar o Visual Studio Code por este link
Instalar a versão mais atualizada da Angular CLI por este link

Código-fonte

Obtenha o código-fonte pelo GitHub.

Criando a aplicação em Angular

Navegue até a pasta onde deseja criar seu arquivo de projeto. Abra uma janela de comando e execute o comando mostrado abaixo:

ng new angular-forms-validation --routing=false --style=scss

Estamos especificando o comando para criar uma nova aplicação em Angular. A opção de criar o módulo de roteamento é definida como falsa e a extensão de arquivos de estilo é definida como scss. Este comando criará o projeto em Angular com o nome de angular-forms-validation.

Altere os diretórios, vá para o novo projeto e abra-o no Visual Studio Code usando os comandos mostrados abaixo:

cd angular-forms-validation 
code .

Instalando o Bootstrap

Execute o comando abaixo para instalar a biblioteca do Bootstrap na pasta do projeto:

npm install bootstrap --save

Adicione a seguinte definição de importação no arquivo styles.scss:

@import "~bootstrap/dist/css/bootstrap.css";

Criando o serviço de validação

Execute o comando abaixo para criar um novo serviço:

ng g s services\customvalidation

Este comando criará uma pasta nomeada serviços com dois arquivos — customvalidation.service.ts e customvalidation.service.spec.ts. Abra o arquivo customvalidation.service.ts e cole o código abaixo:

import { Injectable } from '@angular/core';
import { ValidatorFn, AbstractControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class CustomvalidationService {

  patternValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      if (!control.value) {
        return null;
      }
      const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$');
      const valid = regex.test(control.value);
      return valid ? null : { invalidPassword: true };
    };
  }

  MatchPassword(password: string, confirmPassword: string) {
    return (formGroup: FormGroup) => {
      const passwordControl = formGroup.controls[password];
      const confirmPasswordControl = formGroup.controls[confirmPassword];

      if (!passwordControl || !confirmPasswordControl) {
        return null;
      }

      if (confirmPasswordControl.errors && !confirmPasswordControl.errors.passwordMismatch) {
        return null;
      }

      if (passwordControl.value !== confirmPasswordControl.value) {
        confirmPasswordControl.setErrors({ passwordMismatch: true });
      } else {
        confirmPasswordControl.setErrors(null);
      }
    }
  }

  userNameValidator(userControl: AbstractControl) {
    return new Promise(resolve => {
      setTimeout(() => {
        if (this.validateUserName(userControl.value)) {
          resolve({ userNameNotAvailable: true });
        } else {
          resolve(null);
        }
      }, 1000);
    });
  }

  validateUserName(userName: string) {
    const UserList = ['ankit', 'admin', 'user', 'superuser'];
    return (UserList.indexOf(userName) > -1);
  }
}

O método patternValidator é usado para validar o padrão de senha em nosso formulário. O parâmetro para este método é o tipo AbstractControl, que é uma classe base para FormControl.

Usaremos uma expressão regular para validar a senha. Validaremos as quatro condições a seguir usando a expressão regular:

A senha deve ter um mínimo de oito caracteres.
Precisa ter pelo menos uma letra minúscula.
Precisa ter pelo menos uma letra maiúscula.
Precisa ter pelo menos um número.

Se a senha falhar na verificação pela regex, definiremos a propriedade invalidPassword como verdadeira.

O método MatchPassword é usado para comparar as senhas em dois campos. Este método aceitará dois parâmetros do tipo String. Estes parâmetros representam o nome dos campos a serem correspondidos. Pegaremos o FormControl para esses dois campos e, em seguida, igualaremos os valores neles. Se os valores não coincidirem, definiremos a propriedade passwordMismatch como verdadeira.

O método userNameValidator é usado para verificar se o nome de usuário já foi usado anteriormente ou não. Este método aceitará um parâmetro do tipo AbstractControl. Verificaremos se o valor deste campo está presente em um array estático, UserList. Se o valor inserido pelo usuário já estiver presente, definiremos a propriedade userNameNotAvailable como verdadeira.

Estamos usando a função setTimeout para executar esta verificação a cada dois segundos. Isso garantirá que o erro será acionado após dois segundos a partir do momento em que o usuário parar de digitar no campo.

Para simplificar este artigo, estamos usando um array estático para pesquisar a disponibilidade de nomes de usuário. Idealmente, deveria ser uma chamada de serviço ao servidor para pesquisar o valor em um banco de dados.

Criando o componente reactive-form

Execute o seguinte comando para criar o componente reactive-form:

ng g c reactive-form

Abra reactive-form.component.ts e cole o código abaixo:

import { Component, OnInit } from '@angular/core';
import { Validators, FormGroup, FormBuilder } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.scss']
})
export class ReactiveFormComponent implements OnInit {

  registerForm: FormGroup;
  submitted = false;

  constructor(
    private fb: FormBuilder,
    private customValidator: CustomvalidationService
  ) { }

  ngOnInit() {
    this.registerForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      username: ['', [Validators.required], this.customValidator.userNameValidator.bind(this.customValidator)],
      password: ['', Validators.compose([Validators.required, this.customValidator.patternValidator()])],
      confirmPassword: ['', [Validators.required]],
    },
      {
        validator: this.customValidator.MatchPassword('password', 'confirmPassword'),
      }
    );
  }

  get registerFormControl() {
    return this.registerForm.controls;
  }

  onSubmit() {
    this.submitted = true;
    if (this.registerForm.valid) {
      alert('Form Submitted succesfully!!!\n Check the values in browser console.');
      console.table(this.registerForm.value);
    }
  }
}

Criaremos a variável registerForm do tipo FormGroup. No método ngOnInit, estabeleceremos os controles para o formulário usando a classe FormBuilder. Todos os campos são definidos como um campo obrigatório para este formulário. Chamaremos o método userNameValidator do serviço usando a função bind.

Para o campo de senha, usaremos o método de composição para mesclar em vários validadores em uma única função. Também invocaremos o método MatchPassword e passaremos o nome de password e confirmPassword como parâmetros.

A propriedade registerFormControl retornará os controles de formulário. O método onSubmit imprimirá o conteúdo do formulário no console se o formulário for válido e enviado com sucesso.

Agora, abra reactive-form.component.html e cole nele o código a seguir:


    
        
            
                
                    Angular Reactive Form
                
                
                    
                        
                            Name
                            
                            
                                Name is required
                            
                        
                        
                            Email
                            
                            
                                Email is required
                            
                            
                                Enter a valid email address
                            
                        
                        
                            User Name
                            
                            
                                User Name is required
                            
                            
                                User Name is not available
                            
                        
                        
                            Password
                            
                            
                                Password is required
                            
                            
                                Password should have minimum 8 characters, at least 1 uppercase letter, 1 lowercase
                                letter and 1 number
                            
                        
                        
                            Confirm Password
                            
                            
                                Confirm Password is required
                            
                            
                                Passwords doesnot match

Criaremos um reactive-form e usaremos o card do Bootstrap para a estilização. O cabeçalho do nosso card terá um título, enquanto o corpo terá os campos do formulário. Vincularemos a propriedade formGroup da tag

ao nome do nosso formulário, que é registerForm. O método onSubmit será invocado ao enviar o formulário. Também vincularemos a propriedade formControlName de cada campo de entrada ao nome de controle do nosso FormGroup. Verificaremos se há erros nos controles do formulário e, em seguida, exibiremos a mensagem de erro de validação apropriada na tela.

Execute o seguinte comando para criar o componente nav-bar:

ng g c nav-bar

Abra nav-bar.component.html e cole o código abaixo:


    Form Validation Demo
    
        
            
                Reactive Form

Estamos adicionando o link de navegação ao componente da reactive-form na barra de navegação.

Atualizando o componente do aplicação

Abra o arquivo app.component.html e cole nele o código abaixo:

Atualizando o módulo da aplicação

Adicione o código a seguir no arquivo app.module.ts. Vamos importar o módulo de formulários e definir o roteamento para nossa aplicação. Você pode consultar GitHub para obter o código-fonte completo deste arquivo.

import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from  '@angular/forms';

@NgModule({
  ...    
  imports: [
    ...
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ReactiveFormComponent },
      { path: 'reactive-form', component: ReactiveFormComponent }
    ]),
  ],
})

Demonstração da execução

Usaremos o comando abaixo para iniciar o servidor:

ng serve -o

Este comando iniciará a aplicação no seu navegador. Caso não abra automaticamente, você pode digitar http://localhost:4200/ na barra do seu navegador. Você pode realizar todas as validações de formulário que vimos aqui.

Esta aplicação também está hospedada em https://ng-forms-validation.herokuapp.com/. Navegue até o link e faça alguns testes para uma melhor compreensão.

Resumo

Criamos um modelo de formulário de registro de usuário utilizando a abordagem reactive-form no Angular. Também implementamos as validações integradas e personalizadas no formulário. Por fim, utilizamos a biblioteca do Bootstrap para a estilização.

Você pode obter o código-fonte no GitHub e fazer alguns testes para uma melhor compreensão.

Você pode encontrar outras publicações como esta no blog do autor, Ankit Sharma (em inglês).

Angular - freeCodeCamp.org

Melhores práticas para uma aplicação em Angular limpa e de elevado desempenho

1) trackBy

2) const x let

3) Operadores canalizáveis

4) Truques isolados de API

5) Subscrever em template

6) Limpar subscrições

7) Utilizar operadores apropriados

8) Carregamento lento (lazy loading)

9) Evitar ter subscrições dentro de subscrições

10) Evitar "any" e atribuir tipo a tudo

11) Faz uso das regras de lint

12) Pequenos componentes reutilizáveis

13) Os componentes devem lidar apenas com lógica de exibição

14) Evita métodos longos

15) DRY (Não te repitas)

16) Adicionar mecanismos de cache

17) Evitar lógica em templates

18) Strings devem ser seguras

Visão geral

Gestão de estado

Estado imutável

Jest

Karma

Universal

Conclusão

Como validar formulários do Angular orientados a templates

Introdução

Pré-requisitos

Código fonte

Crie a aplicação do Angular

Instale o Bootstrap

Crie o serviço de validação

Crie o modelo de usuário

Crie diretivas customizadas

Crie o componente do formulário orientado a templates

Angular Template-driven Form

Crie um componente nav-bar

Atualize o componente app

Atualize o módulo de app

Execução de demonstração

Resumo

Veja também (recursos em inglês)

Os melhores exemplos do Angular

Histórico de versões

Instalação

Angular 2.x e versões mais recentes

Instalar a Angular CLI

Criar um espaço de trabalho e a aplicação inicial

Servir a aplicação

Classe de componente e metadados

Informações de componente

{{ username }}

Publicações: {{ totalPosts }}

{{ post.title }}

Ligação (binding) dos dados

Componente e template

Propriedades de elemento

Lidar com eventos

Diretrizes

Diretriz estrutural

*ngIf

Olá!

Alô!

*ngFor

*ngSwitchCase e *ngSwitchDefault

{{ potato }} é uma batata Russet.

{{ potato }} é uma batata doce.

{{ potato }} é uma batata Rosalinda.

{{ potato }} é um tipo diferente de batata.

Casos de utilização

AsyncPipe

DatePipe

TitleCasePipe

Criar pipes

{{ someValue | example }}

{{ someValue | example:‘uppercase’ }}

{{ someValue | example:‘lowercase’ }}

Hooks do ciclo de vida

**8) Carregamento lento (lazy loading)**

ngSwitchCase e ngSwitchDefault

**Por que precisamos de hooks do ciclo de vida?**

**Ordem de execução dos hooks de ciclo de vida**

**Como verificar se o lazy loading funcionou**