AngularJS Services - factory, service, provider

Services

In my previous blog post, I talked about the differences between value and constant services. This blog post will continue to discuss the factory, service and provider services in AngularJS.

factory

factory is an AngularJS service that allows you to inject a function. The syntax for declaring factory service is as below:

1
2
3
4
angular.module("services", [])
    .factory("factoryName", [function(){
       //function logic
    }])

factory comes in handy when you would like to inject a function instead of a variable that the value service provide. Below is a simple example of using factory to inject a function that returns the greet message, “Hello world from factory!”.

1
2
3
4
5
6
7
//service.js
angular.module("services", [])
    .factory("greet", function() {
        return {
            message: "Hello world from factory!"
        }
    })

1
2
3
4
5
//main.js
angular.module("root", ["services"])
    .controller("index", function($scope, greet) {
        $scope.message = greet.message;
    });

If you would like to try this code on your browser, you can use the index.html from my previous blogpost.

service

service is pretty much like factory whereby you can inject function using service. The difference is that in service, constructor function is injected and variables and methods are created with this keyword. An example of how a service is created is as below:

1
2
3
4
5
6
7
8
angular.module("services", [])
    .service("serviceName", [function(){
    //function logic
    this.pi = 3.14;
    this.method1 = function(){
       //method1 logic
    } 
}])

I have also created a simple service to print “Hello world from service!” in the example below:

1
2
3
4
5
6
7
8
//service.js
angular.module("services", [])
    .service("greet", function() {
        this.message = function()
        {
            return "Hello world from service!";
        }
    })

1
2
3
4
5
//main.js
angular.module("root", ["services"])
    .controller("index", function($scope, greet) {
        $scope.message = greet.message();
    });

provider

Another useful AngularJS services is provider. It uses the $get method which is available in AngularJS. provider is a function that must return an object containing the $get property. Let’s take a look at an example on how to use provider to print our “Hello world from Provider!” message.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//service.js
angular.module("services", [])
    .provider("greet", function() {
        var type;
        return {
            setType: function (value) {
              type = value
            },
            $get: function(){
              return {
                message: type + "!",
              }
            }
        }
    })

1
2
3
4
5
6
7
8
9
//main.js
angular.module("root", ["services"])
    //the function argument needs to be the providerName + "Provider"
    .config(function (greetProvider) {
      greetProvider.setType("Hello world from Provider")
    })
    .controller("index", function($scope, greet) {
        $scope.message = greet.message;
    });

Things to note on this example is the greetProvider. We need to make sure that it matches the provider name that you have created and concatenate it with the Provider word in order for AngularJS to recognize it. Also, note that provider is able to be injected to config().

Below is a summary table of all the services I have discussed.

Further recommended readings to learn more about services in AngularJS are listed below:

• Angular.js: service vs provider vs factory?
• Services
• Angular JS–Part 13, Services