Blog

What is a Provider () in AngularJS?

Dhananjay Kumar / Monday, February 22, 2016

The provider() function allows us to create a configurable service where we can set input per application for the service created using the provider (). For example, if we need to set API key to access a service on the application level, we can set that in the module config and pass input to the provider using the $provide service. All the others ways to create services internally use the $provide service.

Creating a service using $provide service in module.config

Let us start by creating a very simple service using the provider() function.  

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

 Let’s explore what is going on in the above snippet. To create a service using provider, we need to use the $provide service. The provider function of the $provide service takes two parameters: the name of the service and the function. A provider function must have a $get function. To create a simple service using the provider(), we need to perform following five steps:

  1. Inject the $provide service in the app config method
  2. Create a provider using the provider() function
  3. Pass two parameters to the provider() function: the name of the service and a function
  4. The provider function must contain a $get function
  5. Return an object literal from the $get function

We can use the globalsetting service created using the provider by injecting it in a controller as shown in the listing below:

app.controller("ProductController", function ($scope, globalsetting) {

    $scope.name = globalsetting.appName;

});

Eventually, we can display data from the globalsetting setting service on the view by using the ng-controller directive as shown in the snippet below:

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

Creating a service using the provider () as a function of the module object

We have created a service using the provider inside the config of module. There is also another way to create a service using the provider: AngularJS also has exposed the provider() function on the module object. For simplicity’s sake, we can directly use the module.provider() to create a service and register the created service in the config of module.

To create the service using the provider() function on the module object, we need to:

  1. Create a service using the module.provider()
  2. Register the service in the module.config()
  3. While registering the service, we need to append the Provider with the service name. So if the service name is globalsetting, we will register in module.config as globalsettingProvider

Let us recreate the globalsetting service using the module.provider() function:

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

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

In step 2, we need to inject the service into the app config. Do you remember injecting the $routeProvider? In the same way, we need to inject the globalsettingProvider in the app config as shown in the snippet below:

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

There is no setter in the globalsetting service, so we are not passing any value to the service created using the provider. We can use globalservice in the same way as when it was created using the $provide service in the config:

app.controller("ProductController", function ($scope, globalsetting) {

    $scope.name = globalsetting.appName;

});

Creating Setter for the provider()

Let us take a look at the globalsetting service. Right now we are hardcoding the name of the app, but in a real-life scenario, we may want to pass the name of the app from the main module app. To do this, we need to create a setter for the provider. Setters are nothing but a function like $get in the provider.  We can create a setter for the globalsetting service provider as shown in the listing below:

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

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

});

Let’s see what’s going on in here:

  1. We created a setter function.
  2. We are passing a parameter in the setter function.
  3. We’re also setting the appname with the parameter passed 

Now while injecting the globalserviceprovider to the app config, we can pass the name of the app.

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

Eventually, globalservice can be used in the controller as shown in the listing below:

app.controller("ProductController", function ($scope, globalsetting) {

    $scope.name = globalsetting.appName;

});

Refactoring factory () to use $provide service

As we discussed earlier, the service() and factory() functions are just syntactic sugar on $provide and internally uses $provide. Let us see how we could refactor a service created using the factory() to use $provide. Here we’re creating a service called greet using the factory() as shown in the listing below:

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

Internally, the factory() function uses the $provide service. So instead of using the factory() method on the module object, we can create the following as the service:

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

As you can see, the $provide service exposes a factory() method, which takes two parameters: the name of the service and the function.  So we can conclude that using the factory() function to create a service is a simplified syntax of $provide.factory().

 

Where to use a Provider

We should use a provider when we are creating a service for the entire application. For example, when we are creating service to retrieve data from the API we need to set the API key once per application. We can set that in the config of the app and pass that to the setter function of the provider.

And that about covers it for AngularJS providers! I hope you find this post useful, and thanks for reading!