Una guía completa de servicios angulares

Angular es un marco ampliamente utilizado para crear aplicaciones web complejas y escalables con un enfoque en el rendimiento y la experiencia del usuario. Según la Encuesta para desarrolladores de Stack Overflow de 2021, es el quinto marco web más popular entre los desarrolladores profesionales de todo el mundo, después de React.

Una de las principales características de Angular son sus servicios. Los servicios son cruciales para crear aplicaciones modulares y escalables. Ayudan a organizar el código, separar preocupaciones y aumentar la modularidad. Esto facilita la gestión y el mantenimiento de grandes bases de código. Los servicios en Angular son objetos únicos que se pueden inyectar en cualquier componente, directiva o servicio. Esto los convierte en una herramienta poderosa para crear aplicaciones complejas.

Aquí profundizaremos en el mundo de los servicios Angular y cubriremos técnicas avanzadas y mejores prácticas relacionadas con su implementación. Explorará cómo los servicios pueden realizar tareas como la recuperación de datos, el almacenamiento en caché y el registro. Al final de este artículo, tendrá un conocimiento sólido de los servicios Angular y estará listo para usarlos para crear aplicaciones web sólidas y escalables.

¡Vamos a empezar!

Comprensión de los servicios en Angular

Los servicios angulares se utilizan para encapsular la lógica que se puede compartir entre diferentes componentes o módulos. Son una parte fundamental en la creación de aplicaciones con el framework.

La inyección de dependencia es un patrón de diseño utilizado en Angular para proporcionar instancias de objetos a componentes que dependen de ellos. El uso de una abstracción llamada Angular Injector facilita la comunicación entre consumidores y proveedores de dependencia. El inyector verifica en su registro la dependencia dada para ver si ya tiene una instancia. Se crea uno nuevo y se agrega al registro si no existe. Los servicios generalmente se proporcionan en la raíz de la aplicación y cualquier componente que necesite usarlos puede simplemente declararlos como un parámetro del constructor.

Los casos de uso comunes de los servicios Angular incluyen realizar solicitudes HTTP, administrar el estado, trabajar con API de terceros y manejar eventos o lógica de toda la aplicación.

Clase de componente y clase de servicio: conceptos básicos

La clase de componente y la clase de servicio en una aplicación Angular son componentes fundamentales.

La clase de componente se utiliza para gestionar la interfaz de usuario y las interacciones. La estructura y el comportamiento que definen para una parte específica de la UI están vinculados al modelo donde se define la UI.

La clase de servicio, por otro lado, contiene lógica empresarial, gestión de estado y acceso a datos. Proporciona una forma de compartir funciones y tareas entre componentes. Estas tareas de procesamiento de nivel de servicio en Angular hacen que la lógica de la aplicación sea más modular.

Los componentes dependen de los servicios en Angular para realizar tareas como la obtención de datos o la gestión del estado, mientras que los servicios son código reutilizable que no depende de los componentes.

Angular utiliza una función llamada inyección de dependencia para facilitar la conexión de los dos. La función permite a los desarrolladores inyectar una clase de servicio en una clase de componente, lo que facilita compartir datos con el componente.

La inyección de dependencia funciona creando un inyector central que gestiona la creación de instancias y la vida útil de los servicios en Angular. Siempre que se necesita un servicio, el componente declara una dependencia en su constructor. La inyección de dependencia angular garantiza que cada componente tenga su propia instancia de servicio. El marco distingue los componentes del servicio para aumentar la modularidad.

El mantenimiento de las aplicaciones se vuelve más fácil al dividir las cuestiones de gestión de la interfaz de usuario y la lógica empresarial en un componente o clase de servicio independiente. La separación de preocupaciones es una idea importante en Angular porque dice que el código en el módulo y las capas de una aplicación debe centrarse en una sola tarea a la vez y no ocuparse de otras cosas dentro del mismo módulo o capa.

Esta separación de preocupaciones entre proveedores de componentes y servicios permite a los desarrolladores centrarse en funciones o vistas específicas sin tener que preocuparse por la lógica empresarial subyacente o el acceso a los datos.

Creando un servicio angular

Esta sección del artículo se centrará en cómo crear un servicio en Angular.

Requisitos previos

Para implementar exitosamente un servicio en Angular, debes tener lo siguiente:

• Node.js: la última versión de Node.js en su máquina
• Un editor de código: cualquier IDE que admita Angular
• npm: Administrador de paquetes de nodo para instalar las dependencias requeridas
• Angular CLI: la última versión que proporciona Angular core

Instalar las dependencias necesarias

Si no tiene Angular preinstalado en su máquina. Utilice el siguiente comando en la terminal para instalar Angular CLI.

 instalación npm -g @angular/cli

Crear un nuevo proyecto

Para crear un nuevo proyecto Angular y una aplicación de inicio, ejecute el comando CLI ng new y proporcione el nombre my-app.

 ng nueva mi aplicación

Su archivo package.json debería verse así.

Crear un servicio

Para crear un servicio en una aplicación Angular, se utiliza el siguiente comando a través de CLI.

 ng generar servicio <nombre del servicio>

Para esta aplicación, ejecute el siguiente comando en la terminal.

 ng generar servicio ../compartido/usuario

El comando anterior le dice a Angular CLI que cree un nuevo servicio llamado usuario en el directorio compartido de la aplicación Angular. Aparecerán dos archivos nuevos una vez que se ejecute el comando. Se crea un archivo de prueba unitaria, que se puede encontrar en el archivo user.service.spec.ts. Aunque las pruebas unitarias no se tratan aquí, es importante saber que existen. user.service.ts es el otro archivo y el servicio en sí incluirá la lógica.

Configurando el servicio

Al navegar al archivo user.service.ts, notará que la clase de servicio tiene un decorador.

 @Inyectable({
 proporcionado en: 'raíz'
 }).

Este decorador le indica a Angular que registre el servicio personalizado en el nivel raíz de la aplicación, lo que permite que el servicio se utilice mediante inyección de dependencia en cualquiera de los componentes de la aplicación.

Si un servicio no se utiliza y está en la aplicación. @Injectable permite que el servicio Angular optimice la aplicación eliminando el servicio.

La propiedad provideIn se usa para especificar el inyector para un servicio que usa el sistema de inyección de dependencia de Angular.

La propiedad provideIn tiene tres valores posibles:

Para este tutorial, utilizamos el valor raíz de la propiedad provideIn.

Para los fines de este tutorial, codificamos datos falsos en el servicio. Tenga en cuenta que en un escenario del mundo real, los datos se obtienen de otros servicios a través de una API antes de enviarlos de esta manera. Es necesario devolver un Observable antes de que un usuario pueda suscribirse. Por lo tanto, Observerable y of deben importarse desde la biblioteca RxJs.

Navegue hasta la carpeta src de la aplicación, abra el archivo user.service.ts y agregue el siguiente código.

 importar {Observable, de} desde 'rxjs';

Ahora implemente una función simple, que devuelve una lista de datos del usuario. Agregue la siguiente función en la clase de servicio inyectable.

 getUser: Observable<cualquier>{
  dejar usuarioAray = (
   {
    nombre de usuario: 'johndoe',
    nombre: 'Juan',
    apellido: 'donar',
    edad: 34
   },
   {
    nombre de usuario: 'simondoe',
    nombre: 'Simón',
    apellido: 'donar',
    edad: 28
   },
   {
    nombre de usuario: 'timdoe',
    nombre: 'Tim', 
apellido: 'donar',
 edad: 38
 },
 );

 retorno de (userAray);
 }

La declaración de devolución utiliza un Observable que envía la cantidad de valores en la secuencia y luego envía una notificación al finalizar. En nuestro caso envía una serie de datos de usuario simulados.

Inyectar servicio angular en la clase de componente

Ahora agreguemos el servicio creado previamente al componente de la aplicación usando sus métodos. UserService está disponible para nosotros en el nivel raíz a través del sistema de inyección de dependencia Angular.

Primero abra el archivo app.component.ts e importe lo siguiente:

 constructor (servicio de usuario privado: servicio de usuario) {}

Ahora agregue un constructor a la clase del componente de la aplicación.

 constructor (servicio de usuario privado: servicio de usuario) {}

Al agregar el constructor de componentes anterior, cada vez que se crea una instancia de la clase de componente de la aplicación, se inyectará UserService para que el servicio se pueda utilizar correctamente.

Luego cree un nombre de función getUser que se llamará para representar los datos en el enlace del ciclo de vida ngOnInit. La función no devolverá datos. El comando genera datos si está suscrito a un Observable.

 matriz de usuarios: cualquiera;

 obtener usuario {
  this.userService.getUser .subscribe( usuario => {
   this.userArray = usuario
  });
 }

 ngOnInit {
  this.getUser
 }

Su archivo app.component.ts debería verse así.

A continuación, para mostrar datos en la página web, abra el archivo app.component.html y agregue el siguiente código.

 {{ userArray json }}

 El código anterior muestra los datos del archivo HTML en formato json.

Cuando ejecuta la aplicación en el navegador, puede ver el resultado obteniendo datos del servicio.

El patrón Singleton en servicios angulares

El patrón Singelton es un patrón de diseño que restringe la creación de instancias de una clase a una sola instancia y proporciona un punto de acceso global a esa misma instancia. A menudo se utiliza en situaciones en las que tener varias instancias del mismo tipo de clase puede causar problemas.

Angular sigue el patrón Singleton de forma predeterminada. Esto significa que cada vez que se inyecta un servicio en un nuevo componente u otro servicio, se utiliza la misma instancia de ese servicio en toda la aplicación.

El uso del patrón Singleton simplifica la arquitectura de la aplicación y reduce las posibilidades de errores. También conduce a una única fuente de datos de servicio en toda la aplicación.

Comunicación entre componentes que utilizan servicios.

Una vez que la aplicación se vuelve compleja, a menudo es necesario que varios componentes de la aplicación se comuniquen entre sí. Hay varias formas de comunicarse dentro de la aplicación con diferentes componentes.

Angular proporciona varios mecanismos listos para hacer esto, pero pueden volverse engorrosos y difíciles de administrar en una aplicación grande con muchos componentes interconectados. Aquí es donde entran los servicios.

Los servicios se utilizan para facilitar la comunicación actuando como un sistema de comunicación centralizado. Los componentes utilizan servicios para enviar mensajes o datos a otros componentes y luego recibirlos también.

Un patrón común utilizado para implementar la comunicación mediante servicios en Angular es el uso de Sujetos y Observables. Un sujeto es un tipo de Observable que permite que se le envíen valores, en lugar de simplemente poder suscribirse a valores. Veamos un ejemplo de cómo podría verse esto.

 importar {Inyectable} desde '@angular/core';
 importar {Asunto} desde 'rxjs';

 @Inyectable({
 proporcionado en: 'raíz'
 })
 exportar clase DataService {
 asunto de datos privado = nuevo Asunto<cadena>;

 enviarDatos(datos: cadena) {
  this.dataSubject.next(datos);
 }

 obtener datos { 
devolver this.dataSubject.asObservable;
 }
 }

En este ejemplo, DataService expone un dataSubject privado. El servicio tiene un método sendData que toma una cadena y la envía al dataSubject usando el siguiente método. El servicio también tiene un método getData que devuelve el objeto de datos como un Observable, al que el componente secundario puede suscribirse.

Para utilizar este servicio en múltiples componentes, puede inyectar DataService y utilizar sus métodos para enviar y recibir datos de diferentes proveedores. Por ejemplo, en el componente principal puede hacer lo siguiente.

 importar {Componente} desde '@angular/core';
 importar {DataService} desde './data.service';

 @Componente({
 selector: 'aplicación-padre',
 plantilla: `
  <button (click)="sendData ">Enviar datos</button>
 `
 })
 exportar clase ParentComponent {
 constructor (servicio de datos privado: servicio de datos) {}

 enviar datos {
  this.dataService.sendData('¡Hola desde el componente principal!');
 }
 }

En este ejemplo, ParentComponent inyecta DataService y tiene un botón que llama al método sendData para enviar un mensaje al componente secundario.

En el archivo del componente secundario, agregue el siguiente código.

 importar {Componente} desde '@angular/core';
 importar {DataService} desde './data.service';

 @Componente({
 selector: 'aplicación-niño',
 plantilla: `
  <p> {{ data }} </p>
 `
 })
 exportar clase ChildComponent {
 fecha: cadena;

 constructor (servicio de datos privado: servicio de datos) {
  this.dataService.getData .subscribe(datos => {
   this.data = datos;
  });
 }
 }

En el código anterior, ChildComponent inyecta DataService y se suscribe a su método getData para recibir datos del componente principal. Cuando los datos se reciben y se presentan, el componente actualiza su modelo para mostrar los datos recibidos.

Al implementar el enfoque que se muestra arriba, puede pasar datos fácilmente entre componentes utilizando el servicio, lo que hace que la comunicación sea más eficiente.

Optimización de los servicios angulares para el rendimiento

Como desarrollador de Angular, optimizar el rendimiento del servicio es crucial para crear aplicaciones a gran escala con una excelente experiencia de usuario. A continuación se presentan algunas de las mejores prácticas para optimizar el rendimiento de los servicios Angular.

1. Memoización: este es el proceso de almacenar en caché el resultado de una llamada a una función para que las llamadas posteriores con los mismos parámetros de entrada puedan devolverse desde la caché en lugar de volver a calcular la función. Puede reducir significativamente el tiempo de computación, especialmente cuando se trata de operaciones complejas que implican mucha manipulación de datos.
2. Minimizar las solicitudes de red: puede utilizar técnicas como procesamiento por lotes, almacenamiento en caché y carga diferida para minimizar las solicitudes de red.
3. Implementar carga diferida: esto puede ayudar a reducir el tiempo de carga inicial de una aplicación. Carga servicios sólo cuando son necesarios.
4. Aprovechar los operadores RxJS: operadores como switchMap y mergeMap pueden ayudar a reducir la cantidad de solicitudes HTTP. Combinan múltiples solicitudes en una sola solicitud.

Sólidos mecanismos de reintento y manejo de errores en servicios Angular

Los mecanismos de manejo de errores y reintentos son esenciales para crear un servicio Angular tolerante a fallas. A continuación se muestran algunas técnicas para manejar errores e implementar mecanismos de reintento:

1. Manejo de errores de RxJS: la mayoría de los operadores en RxJs detectan errores y reintentan. catchError se utiliza para manejar errores devolviendo un valor de reemplazo o generando un nuevo error. El reintento se utiliza para repetir automáticamente una operación un número específico de veces en caso de errores.
2. Implementación de mecanismos de reintento: Mejoran la experiencia del usuario de una aplicación al reintentar automáticamente las solicitudes fallidas. Puede implementar un mecanismo de reintento utilizando operadores RxJS como reintento y retraso. Por ejemplo, el siguiente código reintenta una solicitud HTTP hasta tres veces con un retraso de un segundo entre cada reintento.

 importar {de} desde 'rxjs';
 importar {catchError, retrasar, reintentar} desde 'rxjs/operators';
 importar {HttpClient} desde '@angular/common/http';

 @Inyectable({
 proporcionado en: 'raíz'
 })
 exportar clase DataService {
 URL de datos privada="

 constructor (http privado: HttpClient) { }

 obtener datos {
  devolver this.http.get<Data>(this.dataUrl).pipe(
   reintentar(3),
   atraparError(error => {
    console.error('Error al obtener datos:', error);
    retorno de (nulo);
   }),
   retraso(1000)
  );
 }
 }

En el código anterior, el método getData reintenta la solicitud HTTP hasta tres veces utilizando el operador de reintento. Si la solicitud aún falla después de tres intentos, el operador catchError registra el error y devuelve nulo. El operador de retraso agrega un retraso de un segundo entre cada reintento.

Prueba de servicios angulares

Las pruebas garantizan que la aplicación funcione según lo previsto y proporcionan un alto nivel de confianza de que cumple con los requisitos y especificaciones. También le ayuda a identificar errores y errores rápidamente. Esto reduce el tiempo y coste que pueden surgir posteriormente por problemas si no se identifican con antelación.

Configuración de pruebas unitarias para un servicio Angular

1. Cree un nuevo archivo con la extensión .spec.ts en el mismo directorio que el archivo de servicio que se está probando.
2. Importe las dependencias necesarias, incluido el servicio que se está probando.
3. Escriba uno o más casos de prueba utilizando el marco de prueba de Jasmine. Cada caso de prueba debe crear una instancia del servicio y llamar a uno de sus métodos, probando el valor de retorno con el resultado esperado, validando así la entrada del usuario y burlándose de ella.
4. Utilice las funciones de prueba de Jasmine, como expect y toEqual, para verificar los resultados de sus casos de prueba.

Conclusión

Dominar los conceptos y técnicas de los servicios Angular es crucial para que los desarrolladores creen aplicaciones Angular modulares y mantenibles. Con la ayuda de conceptos avanzados como inyección de dependencia, patrón singleton y técnicas de manejo de errores, los desarrolladores pueden crear servicios sólidos y tolerantes a fallas.

La subcontratación puede ofrecer varias ventajas, incluido el acceso a desarrolladores talentosos con experiencia en Angular y otros marcos. Esto puede ahorrar tiempo y recursos, permitiéndole centrarse en otros aspectos cruciales de su negocio. Además, también garantiza una entrega eficiente y rentable. Puede contratar una empresa que se especialice en brindar servicios de desarrollo Angular de primer nivel.

Explora tus opciones y evalúa los pros y los contras de diferentes estructuras, ya que cada proyecto es diferente. Es vital encontrar la mejor opción para su proyecto e impulsar su negocio a nuevas alturas. Al explorar varias opciones y comparar Angular con otros marcos populares como React o Vue, podrá tomar una decisión informada y encontrar la opción perfecta para su proyecto.