¿Qué es un proveedor en AngularJS?

La función provider() nos permite crear un servicio configurable donde podemos establecer una entrada por aplicación para el servicio creado usando el proveedor ().

Por ejemplo, si necesitamos establecer la clave API para acceder a un servicio a nivel de aplicación, podemos establecerla en la configuración del módulo y pasar la entrada al proveedor mediante el servicio $provide. Todas las demás formas de crear servicios internamente utilizan el servicio $provide.

Creación de un servicio mediante $provide servicio en module.config

Comencemos creando un servicio muy simple usando la función provider().

app.config(function ($provide) {
    $provide.provider('globalsetting', function () {
        this.$get = function () {
            var appname = "Lawyer App";
            return {
                appName: appname
            };
        }
    })
});

Exploremos lo que está sucediendo en el fragmento anterior. Para crear un servicio usando provider, necesitamos usar el servicio $provide. La función de proveedor del servicio $provide toma dos parámetros: el nombre del servicio y la función. Una función de proveedor debe tener una función $get. Para crear un servicio simple usando el provider(), necesitamos realizar los siguientes cinco pasos:

1. Inserte el servicio $provide en el método de configuración de la aplicación
2. Creación de un proveedor mediante la función provider()
3. Pase dos parámetros a la función provider(): el nombre del servicio y una función
4. La función de proveedor debe contener una función $get
5. Devuelve un literal de objeto de la función $get

Podemos usar el servicio globalsetting creado usando el proveedor inyectándolo en un controlador como se muestra en la lista a continuación:

app.controller("ProductController", function ($scope, globalsetting) {
    $scope.name = globalsetting.appName;
});

Eventualmente, podemos mostrar datos del servicio de configuración global en la vista mediante el uso de la directiva ng-controller como se muestra en el fragmento a continuación:

<div ng-controller="ProductController">
        {{name}}
 </div>

Creación de un servicio utilizando el proveedor () como función del objeto módulo

Hemos creado un servicio usando el proveedor dentro de la configuración del módulo. También hay otra forma de crear un servicio usando el proveedor: AngularJS también ha expuesto la función provider() en el objeto del módulo. En aras de la simplicidad, podemos usar directamente module.provider() para crear un servicio y registrar el servicio creado en la configuración del módulo.

Para crear el servicio usando la función provider() en el objeto del módulo, necesitamos:

1. Create a service using the module.provider()
2. Registre el servicio en el module.config()
3. Al registrar el servicio, debemos agregar el nombre del servicio al proveedor. Entonces, si el nombre del servicio es globalsetting, nos registraremos en module.config como globalsettingProvider

Vamos a recrear el servicio globalsetting usando la función module.provider():

app.provider('globalsetting', function () {

    this.$get = function () {
        var appname = "Lawyer App";
        return {
            appName: appname
        };
    }
});

En el paso 2, debemos inyectar el servicio en la configuración de la aplicación. ¿Recuerdas haberte inyectado el $routeProvider? De la misma manera, necesitamos inyectar globalsettingProvider en la configuración de la aplicación como se muestra en el fragmento a continuación:

app.config(function (globalsettingProvider) {
   
});

No hay ningún establecedor en el servicio globalsetting, por lo que no estamos pasando ningún valor al servicio creado con el proveedor. Podemos usar globalservice de la misma manera que cuando se creó usando el servicio $provide en la configuración:

app.controller("ProductController", function ($scope, globalsetting) {
    $scope.name = globalsetting.appName;
});

Creating Setter for the Provider()

Echemos un vistazo al servicio de configuración global. En este momento estamos codificando el nombre de la aplicación, pero en un escenario de la vida real, es posible que deseemos pasar el nombre de la aplicación desde la aplicación del módulo principal. Para hacer esto, necesitamos crear un establecedor para el proveedor. Los setters no son más que una función como $get en el proveedor.  Podemos crear un establecedor para el proveedor de servicios de configuración global como se muestra en el listado a continuación:

app.provider('globalsetting', function () {
    var appname = "LAWYER APP";
    this.setAppName = function (value) {
        appname = value; 
    }
    this.$get = function () {      
        return {
            appName: appname
        };
    }
});

Veamos lo que está pasando aquí:

1. Creamos una función de establecimiento.
2. Estamos pasando un parámetro en la función setter.
3. También estamos configurando el nombre de la aplicación con el parámetro pasado

Ahora, mientras inyectamos el globalserviceprovider en la configuración de la aplicación, podemos pasar el nombre de la aplicación.

app.config(function (globalsettingProvider) {
    globalsettingProvider.setAppName("Infragistics App");
});

Eventualmente, globalservice se puede utilizar en el controlador como se muestra en la lista a continuación:

app.controller("ProductController", function ($scope, globalsetting) {
    $scope.name = globalsetting.appName;
});

Fábrica de refactorización () para usar $provide servicio

Como hemos comentado anteriormente, las funciones service() y factory() no son más que azúcar sintáctico en $provide y utiliza internamente $provide. Veamos cómo podríamos refactorizar un servicio creado usando el factory() para usar $provide. Aquí estamos creando un servicio llamado greet usando factory() como se muestra en la lista a continuación:

app.factory('greet', function () {
    return {
        message: "hello to my app"
    }
});

Internamente, la función factory() utiliza el servicio $provide. Entonces, en lugar de usar el método factory() en el objeto del módulo, podemos crear lo siguiente como servicio:

app.config(function ($provide) {
    $provide.factory('greet', function () {
        return {
            message: "hello to my app"
        }
    })
})

Como puedes ver, el servicio $provide expone un método factory(), que toma dos parámetros: el nombre del servicio y la función.  Por lo tanto, podemos concluir que usar la función factory() para crear un servicio es una sintaxis simplificada de $provide.factory().

Dónde usar un proveedor

Debemos usar un proveedor cuando estamos creando un servicio para toda la aplicación. Por ejemplo, cuando estamos creando un servicio para recuperar datos de la API, debemos establecer la clave de API una vez por aplicación. Podemos establecer eso en la configuración de la aplicación y pasarlo a la función setter del proveedor.

¡Y eso lo cubre para los proveedores de AngularJS! Espero que este post os sea útil, ¡y gracias por leer!