please wait

  • Ekta Singhania Feb-15-2019 09:33:46 AM ( 3 months ago )

    What are the differences between a ServiceProvider and Factory in AngularJS?

  • Harsh Vashishth Feb-15-2019 10:22:41 AM ( 3 months ago )

    I found that all the Angular terms were intimidating for beginners. We started off with this cheatsheet that was a little easier for our programmers to understand while learning Angular…. Hope this helps your team too

  • Raman Tripathi Feb-15-2019 10:40:44 AM ( 3 months ago )

    In my opinion, the best way to understand the difference is using Angular's own documentation: it is extremely well explained and uses a peculiar example to help you understand it. 

  • Jasmin Bhasin Feb-15-2019 10:42:32 AM ( 3 months ago )

    From the AngularJS mailing list I got an amazing thread that explains service vs factory vs provider and their injection usage. Compiling the answers:


    Syntax: module.service( 'serviceName', function ); 
    Result: When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words new FunctionYouPassedToService().


    Syntax: module.factory( 'factoryName', function ); 
    Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.


    Syntax: module.provider( 'providerName', function ); 
    Result: When declaring providerName as an injectable argument you will be provided with (new ProviderFunction()).$get(). The constructor function is instantiated before the $get method is called - ProviderFunction is the function reference passed to module.provider.

    Providers have the advantage that they can be configured during the module configuration phase.

    See here for the provided code.

    Here's a great further explanation by Misko:

    provide.value('a', 123);
    function Controller(a) {

    In this case the injector simply returns the value as is. But what if you want to compute the value? Then use a factory

    provide.factory('b', function(a) {
      return a*2;
    function Controller(b) {

    So factory is a function which is responsible for creating the value. Notice that the factory function can ask for other dependencies.

    But what if you want to be more OO and have a class called Greeter?

    function Greeter(a) {
      this.greet = function() {
        return 'Hello ' + a;

    Then to instantiate you would have to write

    provide.factory('greeter', function(a) {
      return new Greeter(a);

    Then we could ask for 'greeter' in controller like this

    function Controller(greeter) {
      expect(greeter instanceof Greeter).toBe(true);
      expect(greeter.greet()).toEqual('Hello 123');

    But that is way too wordy. A shorter way to write this would be provider.service('greeter', Greeter);

    But what if we wanted to configure the Greeter class before the injection? Then we could write

    provide.provider('greeter2', function() {
      var salutation = 'Hello';
      this.setSalutation = function(s) {
        salutation = s;
      function Greeter(a) {
        this.greet = function() {
          return salutation + ' ' + a;
  • Rukhsar Fatima Feb-15-2019 10:47:05 AM ( 3 months ago )


    1) When you’re using a Factory you create an object, add properties to it, then return that same object. When you pass this factory into your controller, those properties on the object will now be available in that controller through your factory.

    app.controller(‘myFactoryCtrl’, function($scope, myFactory){
      $scope.artist = myFactory.getArtist();
    app.factory(‘myFactory’, function(){
      var _artist = Shakira’;
      var service = {};
      service.getArtist = function(){
        return _artist;
      return service;

    2) When you’re using Service, AngularJS instantiates it behind the scenes with the ‘new’ keyword. Because of that, you’ll add properties to ‘this’ and the service will return ‘this’. When you pass the service into your controller, those properties on ‘this’ will now be available on that controller through your service.

    app.controller(‘myServiceCtrl’, function($scope, myService){
      $scope.artist = myService.getArtist();
    app.service(‘myService’, function(){
      var _artist = Nelly’;
      this.getArtist = function(){
        return _artist;

    3) Providers are the only service you can pass into your .config() function. Use a provider when you want to provide module-wide configuration for your service object before making it available.

    app.controller(‘myProvider’, function($scope, myProvider){
      $scope.artist = myProvider.getArtist();
      $ = myProvider.thingOnConfig;
    app.provider(‘myProvider’, function(){
     //Only the next two lines are available in the app.config()
     this._artist = ‘’;
     this.thingFromConfig = ‘’;
      this.$get = function(){
        var that = this;
        return {
          getArtist: function(){
            return that._artist;
          thingOnConfig: that.thingFromConfig
      myProviderProvider.thingFromConfig = This was set in config’;

    Non TL;DR

    1) Factory 
    Factories are the most popular way to create and configure a service. There’s really not much more than what the TL;DR said. You just create an object, add properties to it, then return that same object. Then when you pass the factory into your controller, those properties on the object will now be available in that controller through your factory. A more extensive example is below.


Please login

Similar Discussion

Recommended For You