Differences Between Providers in AngularJS

Arjan Wulder

AngularJSAfter reading a lot of articles and sample code it wasn't clear to me what the difference was between the several providers like provider, factory and service. Without this knowledge you could not select the proper provider. I will explain the differences between the providers with examples.



What is a provider?

If you look at the AngularJS docs you will find the next definition of a provider:

A provider is an object with a $get() method. The injector calls the $get method to create a new instance of a service. The Provider can have additional methods which would allow for configuration of the provider.

AngularJS uses $provide to register new providers. The providers basically create new instances, but only once for each provider. The $provide has six methods to create custom providers and I will explain each one of them with the help of sample code. These providers are available on $provide:


constant

A constant can be injected everywhere. A constant can not be intercepted by a decorator, that means that the value of a constant can never be changed.

var app = angular.module('app', []);

app.config(function ($provide) {
  $provide.constant('movieTitle', 'The Matrix');
});

app.controller('ctrl', function (movieTitle) {
  expect(movieTitle).toEqual('The Matrix');
});

AngularJS provides a convenience method for creating a constant. You can rewrite the lines 3-5 to:

app.constant('movieTitle', 'The Matrix');


value

A value is nothing more than a simple injectable value. The value can be a string, number but also a function. Value differs from constant in that value can not be injected into configurations, but it can be intercepted by decorators.

var app = angular.module('app', []);

app.config(function ($provide) {
  $provide.value('movieTitle', 'The Matrix')
});

app.controller('ctrl', function (movieTitle) {
  expect(movieTitle).toEqual('The Matrix');
})

AngularJS provides a convenience method for creating a value. You can rewrite the lines 3-5 to:

app.value('movieTitle', 'The Matrix');


service

A service is an injectable constructor. If you want you can specify the dependencies that you need in the function. A service is a singleton and will only be created once by AngularJS. Services are a great way for communicating between controllers like sharing data.

var app = angular.module('app' ,[]);

app.config(function ($provide) {
  $provide.service('movie', function () {
    this.title = 'The Matrix';
  });
});

app.controller('ctrl', function (movie) {
  expect(movie.title).toEqual('The Matrix');
});

AngularJS provides a convenience method for creating a service. You can rewrite lines 3-7 to:

app.service('movie', function () {
  this.title = 'The Matrix';
});


factory

A factory is an injectable function. A factory is a lot like a service in the sense that it is a singleton and dependencies can be specified in the function. The difference between a factory and a service is that a factory injects a plain function so AngularJS will call the function and a service injects a constructor. A constructor creates a new object so new is called on a service and with a factory you can let the function return anything you want. As you will see later on, a factory is a provider with only a $get method.

var app = angular.module('app', []);

app.config(function ($provide) {
  $provide.factory('movie', function () {
    return {
      title: 'The Matrix';
    }
  });
});

app.controller('ctrl', function (movie) {
  expect(movie.title).toEqual('The Matrix');
});

AngularJS also provides a convenience method for lines 3-9. You can rewrite it to:

app.factory('movie', function () {
  return {
    title: 'The Matrix';
  }
});


decorator

A decorator can modify or encapsulate other providers. There is one exception and that a constant cannot be decorated.

var app = angular.module('app', []);

app.value('movieTitle', 'The Matrix');

app.config(function ($provide) {
  $provide.decorator('movieTitle', function ($delegate) {
    return $delegate + ' - starring Keanu Reeves';
  });
});

app.controller('myController', function (movieTitle) {
  expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves');
});


provider

A provider is the most sophisticated method of all the providers. It allows you to have a complex creation function and configuration options. A provider is actually a configurable factory. The provider accepts an object or a constructor.

var app = angular.module('app', []);

app.provider('movie', function () {
  var version;
  return {
    setVersion: function (value) {
      version = value;
    },
    $get: function () {
      return {
          title: 'The Matrix' + ' ' + version
      }
    }
  }
});

app.config(function (movieProvider) {
  movieProvider.setVersion('Reloaded');
});

app.controller('ctrl', function (movie) {
  expect(movie.title).toEqual('The Matrix Reloaded');
});


Summary

  • All the providers are instantiated only once. That means that they are all singletons.
  • All the providers except constant can be decorated.
  • A constant is a value that can be injected everywhere. The value of a constant can never be changed.
  • A value is just a simple injectable value.
  • A service is an injectable constructor.
  • A factory is an injectable function.
  • A decorator can modify or encapsulate other providers except a constant.
  • A provider is a configurable factory.

Comments (18)

  1. Vincent - Reply

    September 6, 2013 at 9:52 pm

    The first parameter of the '$provide.decorator' call must be 'movieTitle'. No?

    • Arjan Wulder - Reply

      September 6, 2013 at 10:25 pm

      Thank you for pointing out the typo. I have changed it to 'movieTitle'.

  2. […] Differences Between Providers In AngularJS […]

  3. Miguel - Reply

    September 9, 2013 at 1:15 pm

    You're missing a return statement in the provider example. The $get function isn't returning.

    • Arjan Wulder - Reply

      September 9, 2013 at 1:21 pm

      Thanks! I've already corrected it.

  4. alireza - Reply

    December 26, 2013 at 6:22 pm

    Hi, I want to communicate with a RESTful Service. based on what i understand i should use provider because i need both get and set methods. Whenever I need to update something on a server i call set and whenever i want o get data from server i call get and inside this methods i will call the APIs. Am i right? or do I miss something?

  5. […] Differences Between Providers In AngularJS […]

  6. […] AngularJS中Providers之间的差异 […]

  7. AngularJS:2013好文回顾 / Owen Chen - Reply

    January 3, 2014 at 4:43 pm

    […] AngularJS中的Providers(Provide, Factory, Service)之间的区别 – Differences Between Providers In AngularJS […]

  8. sirkitree - Reply

    January 28, 2014 at 5:31 pm

    This is #gold. Thank you so much for writing this up.

  9. Nicolas - Reply

    January 28, 2014 at 10:54 pm

    Great article. Thx!

  10. ian - Reply

    January 29, 2014 at 3:45 am

    It would've been more helpful if you can explain when to use a provider and what problem is trying to resolve. Thanks for a good article.

  11. ian - Reply

    January 29, 2014 at 3:46 am

    What I meant was when to use a specific provider. Thanks.

  12. Mike - Reply

    January 30, 2014 at 4:20 pm

    Very nice article, however, it would be more helpful if you gave real world examples of each.
    Thanks!

  13. Francisc - Reply

    February 2, 2014 at 4:10 pm

    Nice and short, thanks.

  14. alma - Reply

    February 26, 2014 at 12:10 pm

    Wow, that was really good and useful post, congrats and thanks.

  15. semo - Reply

    April 7, 2014 at 10:09 am

    super, thx!

  16. Nick - Reply

    November 29, 2014 at 12:06 pm

    This is so much better than https://docs.angularjs.org/api/auto/service/$provide

    Thanks

Add a Comment