AngularJS : Difference between Factory and Service

The main purpose of AngularJS service / factory function is to generate a single object or function that represents the service to rest of the application. That object or function is passed as a parameter to any other factory function which specifies a dependency on this service.

Factory

Factory can return anything which can be a class(constructor function), instance of class, string, number or boolean. If you return a constructor function, you can instantiate in your controller.

Factory recipe works better for JavaScript primitives and functions.

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.

Code :

var app = angular.module('myApp', []); 
// AngularJS Controller that uses the factory 
app.controller('myFactoryCtrl', function($scope, myFactory){ 
       $scope.artist = myFactory.getArtist(); 
}); 

// Factory definition

app.factory(‘myFactory’, function(){ 
       var _artist = 'Shakira'; var service = {};

       service.getArtist = function(){
             return _artist; 
       } 
       return service; 
}); 

Use : Factory is mostly preferable in all cases. It can be used when you have constructor function which needs to be instantiated in different controllers.

Use factories if you want to provide custom classes for your code (can't be done with services because they are already instantiated).

Service

Service does not need to return anything. But you have to assign everything in this variable. Because service will create instance by default and use that as a base object.

Service recipe works better for objects of custom type

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().

Code :

var app = angular.module('myApp', []); 
// AngularJS Controller that uses the service 
app.controller('myServiceCtrl', function($scope, myService){ 
       $scope.artist = myService.getArtist(); 
}); 
// Service definition
   
app.service('myService', function(){ 
       var _artist = 'Nelly';
       this.getArtist = function(){
            return _artist; 
       }
 }); 

Use : Service is a kind of Singleton Object. The Object return from Service will be same for all controller. It can be used when you want to have single object for entire application. Eg: Authenticated user details

Actual code of service in angularJS (you can see it in angular.js)

Code :

function service(name, constructor) { 
      return factory(name, ['$injector', function($injector) { 
            return $injector.instantiate(constructor); 
      }]);
} 

It just a wrapper around the factory. If you return something from service, then it will behave like Factory.

The return result from Factory and Service will be cache and same will be returned for all controllers.

Conclusion :

I hope that this article would have helped you in understanding difference between Factory and Service in AngularJS. Your feedback and constructive contributions are always welcome.