Preguntas comunes en entrevistas para Angular 🅰 Primera parte
¿Quieres prepararte una entrevista para desarrollador frontend Angular? Aquí la primera parte.
Publicado el 05.03.2023 a las 18:11
Te dejo las entregas anteriores en los siguientes enlaces 👇
Preguntas comunes en entrevistas para Angular 🅰 Primera parte
¿Quieres prepararte una entrevista para desarrollador frontend Angular? Aquí la primera parte.
Preguntas comunes en entrevistas Angular 🅰 Segunda parte
¿Quieres prepararte una entrevista para desarrollador frontend Angular? Aquí la segunda parte.
Preguntas comunes en entrevistas Angular 🅰 Tercera parte
¿Quieres prepararte una entrevista para desarrollador frontend Angular? Aquí la tercera parte.
En Angular, un servicio es una clase que proporciona una funcionalidad específica a través de toda la aplicación.
Los servicios se utilizan para compartir datos, realizar solicitudes HTTP, almacenar el estado de la aplicación, autenticar usuarios y realizar otras operaciones que deben estar disponibles para múltiples componentes de la aplicación.
Los servicios se pueden inyectar en componentes, directivas y otros servicios para proporcionar funcionalidad en toda la aplicación.
Esto permite que los componentes de la aplicación sean más modulares y reutilizables, ya que pueden depender de los servicios en lugar de implementar la lógica de la aplicación directamente.
En Angular, los servicios se crean con la sintaxis de clase regular y se decoran con el decorador @Injectable.
Los servicios también pueden depender de otros servicios mediante la inyección de dependencias, lo que permite crear jerarquías complejas de servicios que proporcionan diferentes funcionalidades en diferentes partes de la aplicación.
Resumiendo, los servicios en Angular son una forma de compartir funcionalidad en toda la aplicación, lo que mejora la modularidad, reutilización y mantenibilidad del código de la aplicación.
En Angular, una vista encapsulada es una característica que permite que los estilos CSS de un componente se apliquen solo a ese componente y no a otros componentes de la aplicación.
Esto se logra utilizando el concepto de encapsulación de estilo, que significa que los estilos definidos en un componente solo se aplican a los elementos HTML dentro de ese componente y no se propagan a los elementos HTML de otros componentes.
Esto ayuda a evitar que los estilos definidos en un componente afecten accidentalmente a otros componentes, lo que puede hacer que la aplicación sea más difícil de mantener y depurar.
La vista encapsulada se implementa mediante la generación de identificadores únicos para los selectores CSS definidos en el componente.
Esto se hace utilizando un mecanismo llamado Emulated Encapsulation (Encapsulación Emulada) que consiste en agregar un prefijo único a los selectores CSS del componente, creando así reglas CSS únicas para ese componente.
La encapsulación de la vista en Angular es un mecanismo muy útil que ayuda a mantener la modularidad y la reutilización del código, permitiendo que los desarrolladores creen componentes con estilos personalizados sin afectar la apariencia de otros componentes en la aplicación.
Por ejemplo, supongamos que tenemos un componente llamado MiComponente con un estilo personalizado que queremos aplicar solo a los elementos dentro de ese componente. Aquí está cómo se vería el código de este componente:
import { Component, inject } from '@angular/core'; @Component({ selector: 'app-mi-componente', templateUrl: './mi-componente.component.html', styleUrls: ['./mi-componente.component.css'], standalone: true, imports: [ToolbarComponent,FooterComponent,HeaderArticleComponent,LoaderComponent,ArticlesBannerComponent], }) export class MiComponenteComponent { // ...lógica del componente aquí... }
En este ejemplo, hemos definido un selector para el componente (selector: 'app-mi-componente') y hemos especificado la ubicación del archivo HTML y CSS del componente (templateUrl: './mi-componente.component.html' y styleUrls: ['./mi-componente.component.css']).
Ahora, para encapsular la vista, Angular automáticamente generará identificadores únicos para los selectores CSS definidos en el archivo mi-componente.component.css. Por ejemplo, si tuviéramos la siguiente regla CSS:
.mensaje { font-size: 14px; color: blue; }
Angular la transformaría en:
.app-mi-componente .mensaje { font-size: 14px; color: blue; }
De esta manera, los estilos solo se aplicarán a los elementos HTML que están dentro del componente MiComponente.
Los selectores CSS en la aplicación que no están dentro del componente no se verán afectados por esta regla.
Las Single Page Applications son aplicaciones web altamente interactivas y eficientes que brindan una experiencia de usuario suave y rápida mediante la actualización dinámica del contenido en una única página web, en lugar de cargar múltiples páginas desde el servidor.
Entrando un poco más en detalle, una Single Page Application (SPA) es una aplicación web que se carga y se ejecuta completamente en una sola página web, sin tener que cargar varias páginas o realizar una recarga completa de la página para navegar entre diferentes secciones o funcionalidades de la aplicación.
En una SPA, la página se carga solo una vez y se utiliza JavaScript para dinámicamente actualizar el contenido de la página mientras el usuario interactúa con la aplicación, sin tener que realizar solicitudes adicionales al servidor.
Esto proporciona una experiencia de usuario más rápida y fluida, ya que las transiciones son más rápidas y los datos se actualizan en tiempo real sin interrupciones.
Las SPA utilizan una arquitectura de cliente-servidor en la que la mayor parte del procesamiento de la aplicación se realiza en el lado del cliente, utilizando frameworks como Angular, React o Vue.js.
El servidor proporciona solo los datos y recursos necesarios, y no tiene que generar la página completa cada vez que se realiza una solicitud.
Además, las SPA pueden aprovechar las capacidades de almacenamiento en caché del navegador y las tecnologías de enrutamiento de JavaScript para administrar el estado de la aplicación y la navegación del usuario sin tener que cargar nuevas páginas.
Para enviar headers con el HttpClient de Angular, podemos utilizar el método set() del objeto HttpHeaders.
Este método nos permite agregar o actualizar un encabezado HTTP en particular.
Por ejemplo, imagina que queremos enviar un encabezado de autorización con un token de acceso en una solicitud HTTP:
import { HttpClient, HttpHeaders } from '@angular/common/http'; constructor(private http: HttpClient) {} // Creamos un objeto HttpHeaders con nuestro token de acceso const httpOptions = { headers: new HttpHeaders({ 'Authorization': 'Bearer ' + tokenAcceso }) }; // Hacemos una solicitud HTTP con los headers personalizados this.http.get('https://ejemplo.com/api/datos', httpOptions).subscribe( (response) => { console.log(response); }, (error) => { console.log(error); } );
Como puedes ver, hemos creado un objeto httpOptions con un encabezado de autorización que incluye nuestro token de acceso.
Luego, hemos pasado este objeto como segundo parámetro en nuestro método get() para incluir el encabezado personalizado en la solicitud HTTP.
Este mismo enfoque se puede aplicar para enviar cualquier tipo de encabezado personalizado en una solicitud HTTP con HttpClient.
Solo necesitamos crear un objeto HttpHeaders con nuestros encabezados personalizados y pasarlo como parte de las opciones de solicitud.
ng-container
y el ng-template
?¿Cuándo usar cada uno? ng-container
?ng-container
es una directiva estructural en Angular que no crea un elemento HTML en la página, pero permite agrupar elementos HTML relacionados y aplicarles directivas y/o condiciones.
La directiva ng-container
se utiliza a menudo en situaciones donde necesitamos utilizar una directiva estructural (por ejemplo, *ngIf
, *ngFor
, etc.) en un grupo de elementos HTML sin agregar un elemento adicional a la página.
Un ejemplo de cómo se puede utilizar ng-container
con la directiva *ngIf
para mostrar u ocultar un conjunto de elementos HTML es el siguiente:
<div *ngIf="mostrarElementos"> <p>Elemento 1</p> <p>Elemento 2</p> <p>Elemento 3</p> </div>
Aquí, hemos utilizado la directiva *ngIf
para mostrar u ocultar el conjunto de elementos HTML dependiendo del valor de la variable mostrarElementos.
Sin embargo, si quisiéramos aplicar *ngIf
a un grupo de elementos sin tener que envolverlos en un elemento adicional, podemos utilizar ng-container
de la siguiente manera:
<ng-container *ngIf="mostrarElementos"> <p>Elemento 1</p> <p>Elemento 2</p> <p>Elemento 3</p> </ng-container>
En este ejemplo, hemos utilizado ng-container
como contenedor sin agregar elementos adicionales a la página, lo que permite que *ngIf
se aplique directamente a los elementos anidados.
Esto puede ser útil en situaciones donde agregar un elemento adicional no es deseable o práctico.
ng-template
?ng-template
es una directiva estructural en Angular que se utiliza para definir plantillas de renderizado que no se muestran directamente en la página, pero que se pueden utilizar para renderizar contenido dinámicamente.
Una plantilla es un fragmento de código HTML que se utiliza para definir cómo se debe renderizar un componente o una sección de la página.
ng-template
nos permite definir plantillas reutilizables y dinámicas que se pueden utilizar para renderizar contenido basado en datos, condiciones o eventos.
ng-template
se utiliza a menudo con las directivas estructurales *ngFor
, *ngIf
y *ngSwitchCase
, pero también se puede utilizar en cualquier situación donde necesitemos definir una plantilla para su uso posterior.
Te muestro un ejemplo de cómo se puede utilizar ng-template
con la directiva *ngFor
para renderizar una lista de elementos:
<ul> <ng-template ngFor let-item [ngForOf]="items"> <li>{{ item }}</li> </ng-template> </ul>
Si te fijas, hemos utilizado ng-template
junto con *ngFor
para definir una plantilla para cada elemento de una lista de items.
La directiva ngFor se encarga de renderizar la plantilla para cada elemento en items.
También podemos asignar un nombre a la plantilla utilizando la directiva ng-template
y luego hacer referencia a ella en otro lugar de la página utilizando la directiva ngTemplateOutlet.
Te dejo un ejemplo:
<ng-template #miPlantilla> <p>Contenido de la plantilla</p> </ng-template> <div> <h2>Título</h2> <ng-container *ngTemplateOutlet="miPlantilla"></ng-container> </div>
Hemos definido una plantilla con el nombre miPlantilla y la hemos referenciado en otro lugar de la página utilizando la directiva ngTemplateOutlet.
El contenido de la plantilla se renderiza dentro del contenedor ng-container
cuando se utiliza la directiva ngTemplateOutlet.
ng-container
y cuándo usar el ng-template
? Creo que con lo explicado anteriormente podrías fácilmente responder a esta pregunta, no obstante te la desarrollo.
En general, ng-container
y ng-template
son herramientas útiles para crear plantillas dinámicas y estructuras complejas de elementos en Angular, y la elección entre ellas depende de la situación específica en la que se utilizan.
ng-container
y ng-template
son directivas diferentes en Angular.
ng-container
se utiliza para agrupar elementos sin introducir un nuevo elemento en el DOM.
Esto puede ser útil cuando se utiliza con directivas estructurales como *ngIf
, *ngFor
y *ngSwitchCase
, donde queremos aplicar la directiva a un conjunto de elementos, pero no queremos que esos elementos se representen como un elemento adicional en el DOM.
Por otro lado, ng-template
se utiliza para definir plantillas que no se representan directamente en el DOM, sino que se utilizan para renderizar contenido dinámicamente.
ng-template
se puede utilizar con las mismas directivas estructurales que ng-container
, pero en lugar de agrupar elementos, se define una plantilla que se puede utilizar en múltiples lugares.
Entonces, ¿cómo saber cuándo utilizar ng-container
o ng-template
?
En general, si estamos agrupando elementos y no necesitamos una plantilla reutilizable, podemos utilizar ng-container
.
Si necesitamos definir una plantilla reutilizable, podemos utilizar ng-template
.
Sin embargo, hay algunas situaciones en las que las dos directivas pueden utilizarse de manera intercambiable.
Por ejemplo, si estamos utilizando *ngIf
para mostrar o ocultar un elemento, podríamos utilizar ng-container
para agrupar ese elemento con otros elementos que se muestran todo el tiempo.
Pero también podríamos utilizar ng-template
para definir una plantilla reutilizable que se utiliza para renderizar ese elemento cuando se cumple la condición *ngIf
.
Hasta aquí el artículo de hoy, espera por la quinta y última entrega de preguntas comunes en entrevistas para Angular 🅰
Hasta luego 🖖