AngularJS Service is very useful for providing repeated behavior, shared state, caches and factories. AngularJS Service are singleton for the scope of the application and each service is instantiated once and each part of your application gets access to the same instance of the service.

AngularJS Service is completely driven by the AngularJS dependency injection system and all internal services or your own create service can be injected into other service, directive or controller by specifying it as a dependency.

The $ prefix in AngularJS means they are internal services like $log, $http, $window and so on and it makes it easy to tell difference from your own custom service.

Difference Between a Factory, Service and Provider.

Provider

The Provider is the core engine behind the Factory and Service providers, it’s configurable and has a $get method. For example I have created a provider called messageServiceThree and it contains a configuration method called setName() and $get method that returns some values and a value from setName().

module.provider('messageServiceThree', function() {
	var name;
	
	this.setName = function (value)
	{
		name = value;
	};
	
	this.$get = function() {
		return {
			sayHello: 'Hello, World! from ' + name
		}
	};
})

The setName() method of the Provider can only be called within a configuration function of a module API. For example I have create a config function and injected the messageServiceThreeProvider,  please note that you need to include the word ‘Provider’ at the end of the name to inject or else it won’t work. So in the configuration I am passing a string value to the setName() method.

module.config(['messageServiceThreeProvider', function(messageServiceThreeProvider) {
		messageServiceThreeProvider.setName('Provider');
	}])

Now we need to call the $get method and return an object with a property called sayHello which contains the final result which includes the value we have set inside the configuration.

module.controller('AppControllerThree',['$scope', 'messageServiceThree',function($scope, messageServiceThree) {
	$scope.message = '';
	$scope.showMessage = function() {
		$scope.message = messageServiceThree.sayHello;
	};
}])

Factory

The Factory definition allows you to return a function or an object which will become the public API for the service. Below is an example factory called messageServiceOne that returns an object with a property called sayHello with some string values:

module.factory('messageServiceOne',function(){
	return {
		sayHello: 'Hello, World! from Factory'
	};
})

Service

The Service definition allows you to define a Javascript class instead of a function or an object. AngularJs will call new each time an instance of the class is created. Below is an example of a service called messageServiceTwo that defines a Javascript class with a property called sayHello with some string values:

module.service('messageServiceTwo', function(){
	this.sayHello = 'Hello, World! from Service';
})

You can download a copy of the complete source code for this post from GitHub here.