Preguntas comunes en entrevistas Angular 🅰 Tercera parte

Publicado el 12.02.2023 a las 23:02

Preguntas comunes en entrevistas Angular 🅰 Tercera parte

⚫ ¿Qué es la inyección de dependencias en Angular?

🟣 Ejemplo de inyección de dependencia en Angular

⚫ ¿Qué es un service worker?¿Para qué sirve?

⚫ ¿Qué son los módulos en Angular?

⚫ ¿Qué es el lazy loading en Angular?

⚫ ¿Cómo proteger rutas en una aplicación Angular?

Preguntas comunes en entrevistas Angular 🅰 Tercera parte

Si quieres ver los artículos anteriores de preguntas típicas en entrevistas Angular puedes verlas 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.

¿Qué es la inyección de dependencias en Angular?

La inyección de dependencias en Angular es una característica que te permite organizar y mantener tu código de forma más eficiente y más fácil de testear.


La inyección de dependencia es un mecanismo que permite a la aplicación inyectar objetos o servicios en componentes o clases de forma automática, en lugar de crearlos manualmente dentro de cada componente o clase.


Al tener un sistema de inyección de dependencias, puedes reutilizar servicios y objetos en diferentes partes de tu aplicación 🅰, lo que ayuda a aumentar la eficiencia y reducir la duplicación de código.


La inyección de dependencias en Angular se realiza a través de un contenedor de inyección de dependencias, que se encarga de crear y proporcionar los objetos o servicios necesarios a los componentes y clases que los requieren.


Ejemplo de inyección de dependencia en Angular

Supongamos que tienes un servicio llamado UserService, que proporciona información sobre los usuarios de la aplicación.


Para utilizar este servicio en un componente llamado UserComponent, primero necesitas registrar el servicio en el contenedor de inyección de dependencias de Angular, como se muestra a continuación:

import { UserService } from './user.service';

@NgModule({
  providers: [UserService]
})
export class AppModule { }

Luego, en el componente UserComponent, puedes inyectar el servicio de la siguiente manera:

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  template: '<p>{{userName}}</p>'
})
export class UserComponent {
  userName: string;

  constructor(private userService: UserService) {
    this.userName = this.userService.getUserName();
  }
}

En el ejemplo anterior, el servicio UserService se inyecta en el componente UserComponent a través del constructor.


Angular automáticamente proporciona una instancia del servicio UserService al componente, que puede utilizar para obtener información sobre los usuarios de la aplicación.

¿Qué es un service worker?¿Para qué sirve?

Un service worker es un script en JavaScript que se ejecuta en segundo plano en un navegador web, separado del hilo principal de la aplicación.


Un service worker puede realizar tareas en segundo plano, como la gestión de la caché, la recepción de notificaciones push y el manejo de solicitudes HTTP, sin interferir en la experiencia del usuario final.


Los service workers permiten a las aplicaciones web tener características similares a las de las aplicaciones nativas, como la capacidad de funcionar sin conexión o con una conexión lenta, y ofrecen una experiencia más rápida y fluida al usuario.

Además, los service workers son muy útiles para la implementación de Progressive Web Apps (PWAs), que son aplicaciones web que se comportan como aplicaciones nativas y pueden ser instaladas en el dispositivo del usuario.


Para implementar un service worker en una aplicación web, debes escribir un script JavaScript que se registre en el navegador, y luego utilizar el API de Service Worker para manejar eventos y realizar tareas en segundo plano.

¿Qué son los módulos en Angular?

En Angular, los módulos son una forma de organizar y agrupar componentes, servicios y otros elementos relacionados en una unidad lógica y reutilizable.


Un módulo define un ámbito y proporciona una serie de recursos que pueden ser compartidos por los componentes y servicios que se encuentran dentro de él.


Los módulos en Angular son esenciales para el desarrollo de aplicaciones escalables y mantenibles, ya que te permiten dividir tu aplicación en partes más pequeñas y manejables.

Esto hace que sea más fácil de entender, probar y mantener el código a medida que la aplicación crece en tamaño y complejidad.


A partir de la versión 14 ya no es obligatorio trabajar con módulos, puedes crear componentes standalone que se comportarán como en React, te dejo a continuación el enlace al artículo donde te lo explico en profundidad.

Componentes standalone en Angular 🅰

¿Se ha rendido Angular ante React?

¿Qué es el lazy loading en Angular?

El lazy loading (o carga asíncrona o diferida o perezosa) es un patrón de diseño que se utiliza para aumentar la velocidad de carga de una aplicación y consiste en retrasar la inicialización de algunos componentes u objetos hasta el momento de su utilización.


Este proceso mejora el rendimiento de las aplicaciones, puesto que al iniciar la aplicación sólo se inicializará los componentes del módulo principal (app.module.ts), y el resto de componentes se ubican en módulos diferentes que irán cargando a medida que los vayamos necesitando.


Te lo explico en profundidad en el siguiente artículo 👇

Lazy loading en Angular

En este artículo te cuento cómo realizar lazy load o carga asíncrona, diferida o perezosa con Angular

¿Cómo proteger rutas en una aplicación Angular?

En Angular, puedes proteger tus rutas mediante el uso de los guards.


Un guard es un servicio que se ejecuta antes de que se acceda a una ruta específica, y puede devolver un resultado true o false para indicar si se permite o no el acceso a la ruta.


Por ejemplo:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (!this.authService.isAuthenticated()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

En el ejemplo anterior, creamos el típico guard para proteger las rutas autenticadas al que llamamos AuthGuard, que se encarga de verificar si el usuario está autenticado antes de permitir el acceso a una ruta.


Si el usuario no está autenticado, se redirige a la ruta de inicio de sesión.


Para usar el guard de ruta, debes agregarlo a la ruta que deseas proteger en el archivo de enrutamiento:


              
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] }
];

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


            

Como verás, hemos agregado el guard de ruta AuthGuard a la ruta /home, lo que significa que el usuario solo podrá acceder a esta ruta si se autentica primero.


En resumen, los guards de ruta son una forma efectiva de proteger tus rutas en aplicaciones Angular y controlar el acceso a ellas, y son una parte importante de la seguridad de tu aplicación.


Actualización 26.03.2023 👇

Preguntas comunes en entrevistas Angular 🅰 Cuarta parte

¿Quieres prepararte una entrevista para desarrollador frontend Angular? Aquí la cuarta parte.


Hasta luego 🖖

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.2.2