O que é um provedor no AngularJS?

A função provider() nos permite criar um serviço configurável onde podemos definir a entrada por aplicativo para o serviço criado usando o provedor ().

Por exemplo, se precisarmos definir a chave de API para acessar um serviço no nível do aplicativo, podemos definir isso na configuração do módulo e passar a entrada para o provedor usando o serviço $provide. Todas as outras formas de criar serviços internamente usam o serviço $provide.

Criando um serviço usando $provide serviço em module.config

Vamos começar criando um serviço muito simples usando a função provider().

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

Vamos explorar o que está acontecendo no trecho acima. Para criar um serviço usando o provedor, precisamos usar o serviço $provide. A função de provedor do serviço $provide usa dois parâmetros: o nome do serviço e a função. Uma função de provedor deve ter uma função $get. Para criar um serviço simples usando o provider(), precisamos executar as cinco etapas a seguir:

1. Injetar o serviço $provide no método de configuração do aplicativo
2. Criar um provedor usando a função provider()
3. Passe dois parâmetros para a função provider(): o nome do serviço e uma função
4. A função de provedor deve conter uma função $get
5. Retornar um literal de objeto da função $get

Podemos usar o serviço globalsetting criado usando o provedor injetando-o em um controlador, conforme mostrado na listagem abaixo:

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

Eventualmente, podemos exibir dados do serviço de configuração globalsetting na exibição usando a diretiva ng-controller, conforme mostrado no snippet abaixo:

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

Criando um serviço usando o provedor () como uma função do objeto Module

Criamos um serviço usando o provedor dentro da configuração do módulo. Há também outra maneira de criar um serviço usando o provedor: o AngularJS também expôs a função provider() no objeto do módulo. Para simplificar, podemos usar diretamente o module.provider() para criar um serviço e registrar o serviço criado na configuração do módulo.

Para criar o serviço usando a função provider() no objeto do módulo, precisamos:

1. Create a service using the module.provider()
2. Registre o serviço no module.config()
3. Ao registrar o serviço, precisamos anexar o Provedor com o nome do serviço. Portanto, se o nome do serviço for globalsetting, nos registraremos em module.config como globalsettingProvider

Vamos recriar o serviço globalsetting usando a função module.provider():

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

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

Na etapa 2, precisamos injetar o serviço na configuração do aplicativo. Você se lembra de injetar o $routeProvider? Da mesma forma, precisamos injetar o globalsettingProvider na configuração do aplicativo, conforme mostrado no trecho abaixo:

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

Não há setter no serviço globalsetting, portanto, não estamos passando nenhum valor para o serviço criado usando o provedor. Podemos usar o serviço global da mesma forma que quando ele foi criado usando o serviço $provide na configuração:

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

Creating Setter for the Provider()

Vamos dar uma olhada no serviço globalsetting. No momento, estamos codificando o nome do aplicativo, mas em um cenário da vida real, podemos querer passar o nome do aplicativo do aplicativo do módulo principal. Para fazer isso, precisamos criar um setter para o provedor. Setters nada mais são do que uma função como $get no provedor.  Podemos criar um setter para o provedor de serviços globalsetting, conforme mostrado na listagem abaixo:

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

Vamos ver o que está acontecendo aqui:

1. Criamos uma função setter.
2. Estamos passando um parâmetro na função setter.
3. Também estamos definindo o nome do aplicativo com o parâmetro passado

Agora, ao injetar o globalserviceprovider na configuração do aplicativo, podemos passar o nome do aplicativo.

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

Eventualmente, globalservice pode ser usado no controlador, conforme mostrado na listagem abaixo:

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

Refatoração de fábrica () para usar $provide serviço

Como discutimos anteriormente, as funções service() e factory() são apenas açúcar sintático em $provide e usam internamente $provide. Vamos ver como poderíamos refatorar um serviço criado usando o factory() para usar $provide. Aqui estamos criando um serviço chamado greet usando o factory(), conforme mostrado na listagem abaixo:

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

Internamente, a função factory() usa o serviço $provide. Então, em vez de usar o método factory() no objeto do módulo, podemos criar o seguinte como o serviço:

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

Como você pode ver, o serviço $provide expõe um método factory(), que usa dois parâmetros: o nome do serviço e a função.  Portanto, podemos concluir que usar a função factory() para criar um serviço é uma sintaxe simplificada de $provide.factory().

Onde usar um provedor

Devemos usar um provedor quando estamos criando um serviço para todo o aplicativo. Por exemplo, quando estamos criando um serviço para recuperar dados da API, precisamos definir a chave de API uma vez por aplicativo. Podemos definir isso na configuração do aplicativo e passá-lo para a função setter do provedor.

E isso cobre isso para provedores AngularJS! Espero que você ache este post útil e obrigado por ler!