Ejemplo de tarjetas de Angular de nuestra aplicación

Descarga nuestra aplicación desde la App Store o Google Play para obtener más tarjetas didácticas gratuitas o suscríbete para acceder a todas las tarjetas didácticas.

Describe cómo usar los Interceptors HTTP en Angular para gestionar solicitudes y respuestas.

El HTTP Interceptor en Angular se utiliza para manipular las solicitudes y respuestas HTTP. Pueden interceptar una solicitud, modificarla y pasarla. También pueden interceptar una respuesta, modificarla y pasarla. Para usar un HTTP Interceptor, necesitamos crear un servicio que implemente la interfaz HttpInterceptor.

Aquí está el código que ilustra cómo agregar interceptores a la aplicación:

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>> {

    // Aquí modificamos la solicitud
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Aquí pasamos la solicitud
    return next.handle(modifiedReq);

  }

}

Una vez que nuestro Interceptor está definido, necesitamos agregarlo a nuestro array de proveedores en el módulo de la aplicación:

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

Note que 'multi' está configurado como verdadero. Esto nos permite agregar múltiples interceptores, que se ejecutarán en el orden en que se proporcionen. Debe recordar que el orden de los Interceptores importa, ya que cada interceptor subsiguiente recibe la solicitud del anterior, por lo que cualquier modificación realizada por el interceptor anterior será visible para el siguiente.

Cómo funciona el Data Binding en componentes de Angular usando @Input() y @Output()?

El enlace de datos es un aspecto clave de la programación en Angular. Esto hace posible la transferencia dinámica de datos entre componentes. El enlace de datos incluye dos técnicas: @Input y @Output.

@Input permite la transferencia de valores del componente padre al componente hijo. Esta es una técnica llamada enlace de datos unidireccional, los datos fluyen desde la parte superior hasta la inferior de la jerarquía de componentes. Lo usamos para marcar variables que se supone que deben ser visibles para los componentes padre.

Ejemplo de uso de @Input:

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

// parent.component.ts
parentMessage = "Hola desde el padre";

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

En el ejemplo anterior, `parentMessage` de parent.component.ts se pasa a `childMessage` en child.component.ts.

@Output, por otro lado, permite la comunicación en la dirección opuesta, desde el componente hijo hasta el padre. Esta es la técnica llamada enlace de eventos. Usando el decorador @Output(), podemos desencadenar un evento en el componente hijo y manejarlo en el componente padre.

Ejemplo de uso de @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>();

En este caso, cuando `messageEvent` se activa en child.component.ts, la función `receiveMessage` se llama en parent.component.ts y recibe el valor enviado por `messageEvent`.

Qué es NgModel y cómo se utiliza en los formularios de Angular?

NgModel es una directiva de Angular que se utiliza para crear un enlace de datos bidireccional en formularios. El enlace de datos bidireccional significa que los datos se pueden transmitir desde el modelo a la vista, y de la vista al modelo. En la práctica, esto significa que los cambios realizados por el usuario en los campos del formulario se reflejan en el modelo de datos, y los cambios en el modelo de datos son visibles en el formulario.

Usar la directiva NgModel en formularios es bastante simple. Lo colocamos en el elemento del formulario correspondiente y lo vinculamos al campo del modelo correspondiente usando la sintaxis [(ngModel)].

Por ejemplo:

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

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

Donde "person.name" y "person.age" son campos del modelo de datos que están vinculados a los campos del formulario correspondientes. Cualquier cambio realizado por el usuario en estos campos del formulario se reflejará automáticamente en el modelo "person".

Recuerde, para usar la directiva NgModel, es necesario importar FormsModule en el módulo de la aplicación.

Qué es Zone.js en Angular y cómo afecta al rendimiento de la aplicación?

Zone.js es una biblioteca que permite rastrear las operaciones asíncronas en JavaScript. En el contexto de Angular, Zone.js es un componente clave del mecanismo de detección de cambios.

Zone.js introduce el concepto de "zonas", que son contextos globales de ejecución. Estas "zonas" crean un "árbol", donde cada operación asíncrona siempre ocurre en la misma zona que inició la operación. Como resultado, somos capaces de rastrear cuándo comienza una operación y cuándo termina.

Ejemplo:
La primera operación puede desencadenar un setTimeout, por lo que la siguiente operación se programa para la próxima ronda del bucle de eventos. Aunque se trate de dos operaciones distintas, Zone.js nos permite rastrearlas como una sola - esto es el seguimiento asíncrono.

En Angular, Zone.js se emplea para informar al marco de cuándo comenzar la detección de cambios. Cada acción de usuario, temporizador o solicitud http se realiza en la "zona angular". Cuando las operaciones en la "zona angular" terminan, Angular desencadena automáticamente la detección de cambios.

Con este mecanismo, Angular sabe cuándo tiene sentido actualizar la vista. Por eso Zone.js es crucial para el rendimiento. Sin Zone.js, Angular tendría que utilizar técnicas como el sondeo para averiguar cuándo desencadenar la detección de cambios, lo cual sería muy ineficiente.

Aunque Zone.js produce efectos positivos en el rendimiento de Angular, también podría tener un impacto negativo. Si una aplicación lleva a cabo una gran cantidad de operaciones asíncronas que no afectan al estado de la aplicación, Angular aún desencadena la detección de cambios. En el caso de un gran número de operaciones, esto podría perjudicar el rendimiento. Para evitar esto, podemos ejecutar estas operaciones fuera de la "zona angular".

Tarjetas de Angular

Ejemplo de tarjetas de Angular de nuestra aplicación

Describe cómo usar los Interceptors HTTP en Angular para gestionar solicitudes y respuestas.

Cómo funciona el Data Binding en componentes de Angular usando @Input() y @Output()?

Qué es NgModel y cómo se utiliza en los formularios de Angular?

Qué es Zone.js en Angular y cómo afecta al rendimiento de la aplicación?

Descargar IT Flashcards Ahora