Difference Between the Service, Factory, and Provider in Angular js

Services

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

Factories

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.

Providers

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.

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

Use this code to understand the difference between the Service, Factory, and Provider in Angular js.

var masterApp = angular.module("masterApp", []); 
var MyFunc = function() 
{
  this.name = "default name";

  this.$get = function() 
  {
   this.name = "new name"
   return "Hello from MyFunc.$get(). this.name = " + this.name;
  }; 

  return "Hello from MyFunc(). this.name = " + this.name;
};

// returns the actual function
masterApp.service( 'myService', MyFunc );

// returns the function's return value
masterApp.factory( 'myFactory', MyFunc );

// returns the output of the function's $get function
masterApp.provider( 'myProv', MyFunc );

masterApp.controller('sfpController', function($scope, myService, myFactory, myProv) 
 {
   $scope.serviceOutput = "myService = " + myService;
   $scope.factoryOutput = "myFactory = " + myFactory;
   $scope.providerOutput = "myProvider = " + myProv;
 });





 and the HTML : 


Service | Factory | Provider

{{serviceOutput}}



{{factoryOutput}}



{{providerOutput}}