Introducción angular a los servicios y ejemplo de inyección de dependencia

Servicio es una categoría amplia que abarca cualquier valor, función o característica que necesite una aplicación. Un servicio es típicamente una clase con un propósito limitado y bien definido. Debería hacer algo específico y hacerlo bien.

Angular distingue los componentes de los servicios para aumentar la modularidad y la reutilización. Al separar la funcionalidad relacionada con la vista de un componente de otros tipos de procesamiento, puede hacer que sus clases de componentes sean simples y eficientes.

Idealmente, el trabajo de un componente es permitir la experiencia del usuario y nada más. Un componente debe presentar propiedades y métodos para la vinculación de datos, con el fin de mediar entre la vista (representada por la plantilla) y la lógica de la aplicación (que a menudo incluye alguna noción de modelo).

Un componente puede delegar determinadas tareas a los servicios, como obtener datos del servidor, validar la entrada del usuario o iniciar sesión directamente en la consola. Al definir tales tareas de procesamiento en un clase de servicio inyectable, pone esas tareas a disposición de cualquier componente. También puede hacer que su aplicación sea más adaptable inyectando diferentes proveedores del mismo tipo de servicio, según corresponda en diferentes circunstancias.

Angular no hacer cumplir estos principios. Angular te ayuda seguir estos principios al facilitar la integración de la lógica de su aplicación en los servicios y hacer que esos servicios estén disponibles para los componentes a través de inyección de dependencia.

Ejemplos de servicios

A continuación, se muestra un ejemplo de una clase de servicio que se registra en la consola del navegador.

exportclassLoggerlog(msg:any)console.log(msg);error(msg:any)console.error(msg);warn(msg:any)console.warn(msg);

Los servicios pueden depender de otros servicios. Por ejemplo, aquí hay un HeroService eso depende de la Logger servicio, y también utiliza BackendService para conseguir héroes. Ese servicio, a su vez, podría depender de la HttpClient servicio para buscar héroes de forma asíncrona desde un servidor.

exportclassHeroServiceprivate heroes: Hero[]=[];constructor(private backend: BackendService,private logger: Logger)getHeroes()this.backend.getAll(Hero).then((heroes: Hero[])=>this.logger.log(`Fetched $heroes.length heroes.`);this.heroes.push(...heroes);// fill cache);returnthis.heroes;

Inyección de dependencia (DI)

DI está conectado al marco Angular y se usa en todas partes para proporcionar nuevos componentes con los servicios u otras cosas que necesitan. Los componentes consumen servicios; es decir, puedes inyectar un servicio en un componente, dando al componente acceso a esa clase de servicio.

Para definir una clase como un servicio en Angular, use el @Injectable

• los inyector es el mecanismo principal. Angular crea un inyector para toda la aplicación durante el proceso de arranque e inyectores adicionales según sea necesario. No es necesario crear inyectores.

• Un inyector crea dependencias y mantiene un envase de instancias de dependencia que reutiliza si es posible.

• A proveedor es un objeto que le dice a un inyector cómo obtener o crear una dependencia.

Para cualquier dependencia que necesite en su aplicación, debe registrar un proveedor con el inyector de la aplicación, de modo que el inyector pueda usar el proveedor para crear nuevas instancias. Para un servicio, el proveedor suele ser la propia clase de servicio.

Una dependencia no tiene por qué ser un servicio; podría ser una función, por ejemplo, o un valor.

Cuando Angular crea una nueva instancia de una clase de componente, determina qué servicios u otras dependencias necesita ese componente al observar los tipos de parámetros del constructor. Por ejemplo, el constructor de HeroListComponent necesidades HeroService.

constructor(private service: HeroService)

Cuando Angular descubre que un componente depende de un servicio, primero verifica si el inyector tiene instancias existentes de ese servicio. Si una instancia de servicio solicitada aún no existe, el inyector crea una utilizando el proveedor registrado y la agrega al inyector antes de devolver el servicio a Angular.

Cuando todos los servicios solicitados se han resuelto y devuelto, Angular puede llamar al constructor del componente con esos servicios como argumentos.

El proceso de HeroService La inyección se parece a esto.

Prestación de servicios

Debes registrar al menos uno proveedor de cualquier servicio que vaya a utilizar. El proveedor puede ser parte de los propios metadatos del servicio, haciendo que ese servicio esté disponible en todas partes, o puede registrar proveedores con módulos o componentes específicos. Registra proveedores en los metadatos del servicio (en el @Injectable() decorador), o en el @NgModule() o @Component() metadatos

• De forma predeterminada, el comando Angular CLI ng generate service registra un proveedor con el inyector raíz para su servicio al incluir metadatos del proveedor en el @Injectable() decorador. El tutorial utiliza este método para registrar el proveedor de la definición de clase HeroService.

  @Injectable(
   providedIn:'root',)

  Cuando proporciona el servicio en el nivel raíz, Angular crea una única instancia compartida de HeroService y lo inyecta en cualquier clase que lo solicite. Dar de alta al proveedor en el @Injectable() Los metadatos también permiten que Angular optimice una aplicación eliminando el servicio de la aplicación compilada si no se usa, un proceso conocido como temblor de árboles.

• Cuando registra un proveedor con un NgModule específico, la misma instancia de un servicio está disponible para todos los componentes de ese NgModule. Para registrarse en este nivel, utilice el providers propiedad de la @NgModule() decorador.

  @NgModule(
    providers:[
    BackendService,
    Logger
   ],...)

• Cuando registra un proveedor a nivel de componente, obtiene una nueva instancia del servicio con cada nueva instancia de ese componente. A nivel de componente, registre un proveedor de servicios en el providers propiedad de la @Component() metadatos.

  @Component(
    selector:'app-hero-list',
    templateUrl:'./hero-list.component.html',
    providers:[ HeroService ])

Para obtener información más detallada, consulte la sección Inyección de dependencias.