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:


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');


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');


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';


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';


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');


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) {

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


  • 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 (33)

  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.

  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


  17. yeyanbo - Reply

    March 6, 2015 at 8:10 am

    very clear and useful!thanks

  18. Amit - Reply

    May 28, 2015 at 7:20 am

    really nice and clear. thanks

  19. ramanan - Reply

    June 25, 2015 at 9:14 am

    really nice and very clear .. thanks much

  20. Sandesh Magdum - Reply

    September 18, 2015 at 4:12 pm

    Nice and simple to understand explanation in lucid language.
    Thank you Arjan 🙂

  21. Madan - Reply

    October 16, 2015 at 1:33 pm

    That's awesome. It saved my hell of hours. Thank you very much.

  22. Zay Yar Phone - Reply

    January 17, 2016 at 1:59 am

    Thank you Sir! You should be the one writing the AngularJS Documentation. This is going to be be one of the best bookmark of the AngularJS. Hopefully we can see more of something like this for the Angular 2.0.

  23. alencdave - Reply

    January 18, 2016 at 8:06 am

    very good article. Lucid and very well explaining a complex topic in simple terms.

    for Decorator, is it possible to write it as app.decorator(...) or we have to use $provide.decorator always?

  24. Pavan - Reply

    February 5, 2016 at 8:16 am

    Superb article

  25. thathsara - Reply

    February 5, 2016 at 3:10 pm

    when i read this article it is 3 years old. author released this article on a special day of my life. yes, actually this article is so helpful to me as my birthday to understand the differences among providers. thank you!

  26. Manik - Reply

    July 16, 2016 at 9:32 pm

    Nice Article

  27. Cassandra Blankenbeckle - Reply

    July 19, 2016 at 12:02 am

    Examples are the best way to learn AngularJS. Assume you already know JAVASCRIPT, then what more you required? Only Examples are good enough to get basics of AngularJS. Thanks for admin for sharing the above examples.


  28. Nirupma - Reply

    September 29, 2016 at 8:04 am

    Nicely written article !!

  29. Nilachal - Reply

    October 17, 2016 at 9:18 am

    Thanks a lot. A lot of doubts got cleared after going through the tutorial.

  30. Sandeep - Reply

    December 27, 2016 at 8:55 am

    Thanks a lot. Clears out a lot of confusions. Request you to provide examples of when to use providers, when to use services and when to use factories.

  31. prakyath - Reply

    January 31, 2017 at 4:21 pm

    Thank you so much..very clean and neat..

Add a Comment