AngularJS Services Part 4: Value and Constant

So far we saw the magic of creating AngularJS services using Provider, Factory and Service. In this post, we will look at two more types of services - Value and Constant.

Value #

The Value service is basically a service that returns a single value, like, string, object, number or an array. For instance:

(function(){
  angular.module('app', [])
    .value("Number", 24)

    .value("String", "Hey, how are you?")

    .value("Object", {
      prop1: 'prop1',
      prop2: 'prop2'
    })

    .value("Array", [1,2,3,4,5]);
})();

The Value service is basically like writing a service using Provider, whose $get function returns a plain value (string/object/number/array).

(function(){
  angular.module('app', [])

    .provider("Value", function(){
      this.$get = function(){
        return "I am a value.";
      };
    });

})();

If you are unfamiliar of the way Provider works, take a look here. One drawback of Value is that it cannot be injected into a module configuration function, unlike Provider. On the other hand, it can be decorated using an Angular decorator.

Constant #

The Constant service is really the same like Value, with two key differences:

1. It can be injected into a module configuration function, like Provider.
2. A Constant service cannot be decorated using an Angular decorator.

For consistency’s sake, lets see how constants are defined:

(function(){
  angular.module('app', [])

    .constant("Pi", 3.1415)
    .constant('e', 2.718);
})();

One last note - injecting Value and Constant services in controllers is done just like any other services.