Amostras de flashcards de Angular do nosso aplicativo

Baixe nosso aplicativo na App Store ou Google Play para obter mais flashcards gratuitos ou assine para ter acesso a todos os flashcards.

Descreva como usar os Interceptors HTTP no Angular para gerir pedidos e respostas.

O Interceptor HTTP em Angular é usado para manipular pedidos e respostas HTTP. Eles podem interceptar um pedido, modificá-lo e passá-lo adiante. Eles também podem interceptar uma resposta, modificá-la e passá-la adiante. Para usar um Interceptor HTTP, precisamos criar um serviço que implemente a interface HttpInterceptor.

Aqui está o código ilustrando como adicionar interceptores à aplicação:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // Aqui modificamos o pedido
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Aqui passamos o pedido adiante
    return next.handle(modifiedReq);

  }

}

Uma vez que nosso Interceptor esteja definido, precisamos adicioná-lo à nossa array de provedores no módulo da aplicação:

@NgModule({
  ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true },
  ],
  ...
})
export class AppModule { }

Note que 'multi' está definido como verdadeiro. Isso nos permite adicionar múltiplos interceptores, que serão executados na ordem em que são fornecidos. Você precisa lembrar que a ordem dos Interceptors importa, pois cada interceptor subsequente recebe o pedido do anterior, então quaisquer modificações feitas pelo interceptor anterior serão visíveis para o próximo.

Como funciona o Data Binding em componentes Angular usando @Input() e @Output()?

A Vinculação de Dados (Data Binding) é um aspecto chave da programação em Angular. Isto possibilita a transferência dinâmica de dados entre componentes. A Vinculação de Dados inclui duas técnicas: @Input e @Output.

@Input permite a transferência de valores do componente pai para o componente filho. Isto é uma técnica chamada de vinculação de dados unidirecional - os dados fluem de cima para baixo na hierarquia do componente. Usamo-lo para marcar variáveis que são supostas ser visíveis para componentes pai.

Exemplo de uso do @Input:

<!--parent.component.html-->
<app-child [childMessage]="parentMessage"></app-child>

// parent.component.ts
parentMessage = "Olá do pai";

// child.component.ts
import {Component,Input }  from '@angular/core';
//..
@Input() childMessage: string;

No exemplo acima, `parentMessage` de parent.component.ts é passada para `childMessage` em child.component.ts.

@Output, por outro lado, permite a comunicação na direção oposta - do componente filho para o pai. Esta é a chamada técnica de vinculação de eventos. Usando o decorador @Output(), podemos disparar um evento no componente filho e tratá-lo no componente pai.

Exemplo de uso do @Output:

<!--parent.component.html-->
<app-child (messageEvent)="receiveMessage($event)"></app-child>

// parent.component.ts
receiveMessage($event) {
  this.message = $event
}

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
//..
@Output() messageEvent = new EventEmitter<string>();

Nesse caso, quando `messageEvent` é disparado em child.component.ts, a função `receiveMessage` é chamada em parent.component.ts e recebe o valor enviado por `messageEvent`.

O que é NgModel e como é usado em formulários Angular?

NgModel é uma diretiva Angular que é usada para criar ligação de dados bidirecional em formulários. Ligação de dados bidirecional significa que os dados podem ser transmitidos do modelo para a vista, e da vista para o modelo. Na prática, isso significa que as alterações feitas pelo usuário nos campos do formulário são refletidas no modelo de dados, e as alterações no modelo de dados são visíveis no formulário.

Usar a diretiva NgModel em formulários é bastante simples. Colocamo-la no elemento de formulário apropriado e vinculamo-la ao campo do modelo apropriado usando a sintaxe [(ngModel)].

Por exemplo:

<form>
  <label for="name">Nome:</label>
  <input id="name" [(ngModel)]="person.name">

  <label for="age">Idade:</label>
  <input id="age" [(ngModel)]="person.age">
</form>

Onde "person.name" e "person.age" são campos do modelo de dados que são vinculados aos campos do formulário correspondente. Qualquer alteração feita pelo usuário nestes campos do formulário será automaticamente refletida no modelo "person".

Lembre-se, para usar a diretiva NgModel, é necessário importar o FormsModule no módulo da aplicação.

O que é Zone.js no Angular e como afeta o desempenho da aplicação?

Zone.js é uma biblioteca que permite o rastreamento de operações assíncronas no JavaScript. No contexto do Angular, o Zone.js é um componente chave do mecanismo de deteção de alterações.

Zone.js introduz o conceito de "zonas", que são contextos globais de execução. Essas "zonas" criam uma "árvore", onde cada operação assíncrona sempre ocorre na mesma zona que iniciou a operação. Como resultado, conseguimos rastrear quando uma operação começa e quando termina.

Exemplo:
A primeira operação pode desencadear um setTimeout, no qual a próxima operação é programada para a próxima rodada do loop de eventos. Mesmo sendo duas operações distintas, o Zone.js nos permite rastreá-las como um todo - este é o rastreamento assíncrono.

No Angular, o Zone.js é utilizado para informar o framework quando iniciar a deteção de alterações. Cada ação do usuário, temporizador ou solicitação http é realizada na "zona angular". Quando as operações na "zona angular" terminam, o Angular aciona automaticamente a detecção de alterações.

Com este mecanismo, o Angular sabe quando faz sentido atualizar a visualização. É por isso que o Zone.js é crucial para o desempenho. Sem o Zone.js, o Angular teria que utilizar técnicas como polling para descobrir quando acionar a deteção de alterações, o que seria altamente ineficiente.

Embora o Zone.js produza efeitos positivos no desempenho do Angular, também pode ter um impacto negativo. Se uma aplicação realiza uma infinidade de operações assíncronas que não afetam o estado da aplicação, o Angular ainda aciona a deteção de alterações. No caso de um grande número de operações, isso poderia prejudicar o desempenho. Para prevenir isso, podemos executar essas operações fora da "zona angular".

Flashcards de Angular

Amostras de flashcards de Angular do nosso aplicativo

Descreva como usar os Interceptors HTTP no Angular para gerir pedidos e respostas.

Como funciona o Data Binding em componentes Angular usando @Input() e @Output()?

O que é NgModel e como é usado em formulários Angular?

O que é Zone.js no Angular e como afeta o desempenho da aplicação?

Baixar IT Flashcards Agora