Consejos Tecnológicos

Agregar servicio al ejemplo de código de módulo

¿Cuáles son los servicios en la aplicación Angular?

Servicio es un término general que se clasifica ampliamente como un valor, función o característica que nuestra aplicación puede requerir. Los servicios están diseñados para reutilizar código diseñado para un propósito específico.

Los servicios angulares distinguen elementos de sus servicios para que estos servicios puedan reutilizarse. Esto aumenta la modularidad de las aplicaciones angulares. Un servicio en una aplicación Angular puede ser casi cualquier cosa, puede ser un elemento, un componente o un módulo para algún propósito específico.

Todos los servicios en Angular App son clases con un propósito claro. Tiene un propósito y le sirve bien.

Algunos servicios muy conocidos incluyen:

  • Servicio de inicio de sesión: se utiliza para iniciar y cerrar sesión.
  • Adquisición de datos: Obtener datos y expresarlos de forma formateada.
  • Servicio de datos: Obtener y recibir datos.
  • Bus de mensajes: se utiliza para comunicarse a través de un conjunto de interfaces compartidas.
  • Calculadora de impuestos: calcula los impuestos sincronizándolos con el sistema legal actual.
  • Calculadora EMI: Calculadora de cuotas mensuales sencilla, utilizada principalmente para cálculos relacionados con préstamos.
  • Configuración de la aplicación: La configuración general en todo el soporte de la aplicación.

Reutilización

Al crear aplicaciones grandes, la reutilización es muy importante. No se debería exigir que las clases creadas para un propósito común se construyan una y otra vez. Esto incluso puede dar lugar a malentendidos de algunas categorías importantes. Necesitamos lograr la separación de preocupaciones para aislar diferentes clases para diferentes propósitos. Esto se puede lograr a través de los servicios de Angular.

En Angular 13 Framework, los servicios son objetos que se instancian como máximo una vez en todo el ciclo de vida de cualquier aplicación Angular o módulo Angular.

Todos los servicios de Angular contienen muchos métodos para mantener los datos a lo largo del ciclo de vida de la aplicación. Por lo tanto, se ha convertido en un medio para compartir varias responsabilidades dentro de uno o más componentes.

Servicios e inyección de dependencia

Los servicios nos brindan características inyectables. La aplicación Angular nos proporciona un decorador @Injectable para crear servicios. Llamada por el módulo del proveedor de servicios, la clase así creada puede inyectarse en cualquier otro módulo o componente.

El proceso de dos pasos para crear un servicio en una aplicación Angular es:

  1. Usa el decorador @Injectable para crear una clase.
  2. Utilice la inyección de dependencia para inyectar clases o registrar clases con proveedores de servicios.

En Angular 13 Framework, una de las formas de implementar la inyección de dependencia DI es usar la inyección de servicios. Las dependencias son servicios u objetos de clases que ayudan a realizar sus funciones. La inyección de dependencia o DI es un patrón de diseño en el que una clase necesita dependencias de fuentes externas en lugar de construirlas.

Construcción y prestación de servicios

Construyamos un servicio para mantener registros de empleados:

paso 1: Instale Node.js:

Angular requiere Node.js versión 14.XX o superior.Puedes empezar desde

https://nodejs.org/en/download/

La última versión es: node-v16.13.1-x64

Instale node.js después de descargar:

Angular: agregar servicio al ejemplo de código del módulo

Después de instalar Node.js en el sistema, abra el símbolo del sistema de node.js.

Para verificar su versión, ejecute node -v en una ventana de terminal / consola.Angular: agregar servicio al ejemplo de código del módulo

Paso 2: Instale Angular CLI usando npm

Instale Angular CLI usando el siguiente comando

npm install -g @ angular / cli

o

npm install -g @ angular / cli @ más recienteAngular: agregar servicio al ejemplo de código del módulo

o

Vaya directamente al sitio web oficial de Angular CLI https://cli.angular.io/

Verá el comando cli completo utilizado para crear la aplicación Angular. Debe ejecutar el primer comando para instalar Angular CLI. Estos pasos son los mismos para Windows y Mac.

Angular: agregar servicio al ejemplo de código del módulo

Para verificar la versión de CLI de Nodo y Angular, use el comando ng –version.

Angular: agregar servicio al ejemplo de código del módulo

Paso 3: Cree una aplicación llamada ngApp4Service

sintaxis:

De nuevo nombre_aplicación

C: > Nueva App4Service

Requiere

¿Quieres agregar enrutamiento angular?sí

¿Qué formato de hoja de estilo desea utilizar?

> CSS

Angular: agregar servicio al ejemplo de código del módulo

Angular: agregar servicio al ejemplo de código del módulo

Etapa 4: Genere servicio a través de CLI:

Sintaxis para crear un servicio:

Generar servicio [options]

Servicios [options]

Generemos el servicio requerido: aquí crearemos el servicio «empleado».

Vaya a la carpeta de la aplicación e instale el servicio requerido: «Empleados»:

Angular: agregar servicio al ejemplo de código del módulo

Paso 5: Edite el archivo ts del servicio:

Servicios para almacenar datos de empleados: Personal Service.ts

Nombre del archivo: Personal Service.ts

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class EmployeeService {

public _empList: Array = [];  
    constructor() {  
        this._empList = [{name:'Jay Choudhury', city:'Ghaziabad'}];  
    }  
     returnEmpData(): Array {  
        return this._empList;  
    }  
     addEmpData(item: any): void {  
        this._empList.push(item);  
    }  
}

Paso 6: Importar servicios para empleados:

Servicio de importación app.module.ts:

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';  
import { FormsModule, ReactiveFormsModule } from '@angular/forms';  
import { AppComponent } from './app.component';  
import { EmployeeService } from './employee.service';  
@NgModule({  
  declarations: [  
    AppComponent  
  ],  
  imports: [  
    BrowserModule, FormsModule, ReactiveFormsModule  
  ],  
  providers: [EmployeeService],  
  bootstrap: [AppComponent],  
  schemas: [NO_ERRORS_SCHEMA]  
})  
export class AppModule { }

Paso 7: Servicio de uso: Personal:

editar: app.component.ts

import { Component, OnInit } from '@angular/core';  
import { EmployeeService } from './employee.service';  
@Component({    
  selector: 'app-root',  
      templateUrl: './app.component.html',  
      styleUrls : ['./app.component.css']  
      })  
export class AppComponent implements OnInit {  
      public model: any = {};  
      public source: Array;  
      constructor(public service: EmployeeService) {  
            this.source = this.service.returnEmpData();  
            }  
       ngOnInit(): void { }  
       public submit(): void {  
            if (this.validate()) {  
                this.service.addEmpData(this.model);  
                this.reset();  
            }  
        }  
      public reset(): void {  
       this.model = {};  
   }  
       public validate(): boolean {  
               let status: boolean = true;  
               if (typeof (this.model.name) === "undefined") {  
                      alert('Name is Blank');  
                      status = false;  
                      return status;        
               }  
               else if (typeof (this.model.city) === "undefined") {  
                      alert('City is Blank');  
                      status = false;  
                      return status;        
               }  
               return status;  
        }  
 }

editar app.component.html:

       

Employee Form

                                                         
Employee Name
City
           
     

Employee Details

     
       
                                                                                                                         
Employee's Name City
{{item.name}}{{item.city}}
 
         
   
 

Paso 8: Ejecutar el servicio de inspección:

Vaya a la carpeta de la aplicación:

C: > ng servicio

Angular: agregar servicio al ejemplo de código del módulo

Ejecutar en el host local:

http: // localhost: 4200 /

Obtenemos el formulario de empleado.

Podemos agregar más detalles para el empleado y luego ver los resultados.

Angular: agregar servicio al ejemplo de código del módulo

Angular: agregar servicio al ejemplo de código del módulo

Importancia del servicio

La aplicación Angular proporciona servicios Angular como componentes reutilizables de la aplicación. Utiliza el decorador @Injectable para construir el servicio. Un servicio puede invocarse como un elemento común a través de múltiples componentes y compartirse para varios propósitos. Esto ayuda a evitar el trabajo repetitivo y aumenta la velocidad de desarrollo de la aplicación.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba