Next to creating controllers and directives, AngularJS also supports “singleton” services. Services, like on the server-side, offer a great way for separating logic from your controllers. In AngularJS anything that’s either a primitive type, function or object can be a service. Although the concept of service is quite straight forward, the declaration of them in AngularJS isn’t:
The other 3 are only barely documentedThis post describes each option and when to use it in more detail.
Registering a existing value as a serviceYou can register an existing value as service, using the following methods of the Module type:
constant(name, value)“. intended for registering configuration data and should therefore only be used with primitives or object containing just data.value(name, value)“: registers a primitive, existing object instance or function. The big difference between the “constant” and “value” methods is that:
Consider the following example using both styles:
var app = angular.module('myApp', []);
app.constant('magicNumber', 42);
app.constant('bookTitle', "Hitchhiker's Guide");
function UsingConstantServiceCtrl(magicNumber, bookTitle) {
$scope.magicNumber = magicNumber;
$scope.bookTitle = bookTitle;
}
(function() {
var existingServiceInstance = {
getMagicNumber: function() {
return 42; // Note that we are using an "hard-coded" magic number
}
};
app.value('magicNumberService', existingServiceInstance);
}());
function UsingValueServiceCtrl(magicNumberService) {
$scope.magicNumberFromService = magicNumberService.getMagicNumber();
}
Instead of supplying an existing value, you could also register a factory function for the service. However since services in AngularJS are “singletons” the factory function is invoked once. A factory function can optionally take parameters which, just like controllers and directives, which will be injected by AngularJS. Using the earlier registered magicNumber ‘service’, you can now declare a service using the “factory(name, providerFunction)” (extensively documented) method:
(function() {
// registers a service factory with "magicNumber" injected
app.factory('magicNumberService', function(magicNumber) {
return {
getMagicNumber: function() {
return magicNumber;
}
};
});
}());
Instead of registering a factory function that returns an instance of a service, you could also register a constructor function for your service object using the “service(name, constructor)” method:
(function() {
var MyService = function(magicNumber) { // "magicNumber" is injected
this.getMagicNumber = function() {
return magicNumber;
};
};
app.service('magicNumberService', MyService);
}());
Last but not least… there is way more advanced way to register a service factory using “provider(name, providerType)” which can be configured used the “Module#config(configFn)” . Using the “provider(name, providerType)” you can register a so-called “providerType”. This “providerType” can be either an existing object or a constructor function containing:
factory(name, providerFunction)“Using “provider(name, providerType)” we can make our service configurable:
app.provider('magicNumberService', {
// internal configuration data; configured through setter function
magicNumber: null,
// configuration method for setting the magic number
setMagicNumber: function(magicNumber) {
this.magicNumber = magicNumber;
},
$get: function(magicNumber) {
// use the magic number explicitly provided through "setMagicNumber" or
// otherwise default to the injected "magicNumber" constant
var toBeReturnedMagicNumber = this.magicNumber || magicNumber;
// return the service instance
return {
getMagicNumber: function() {
return toBeReturnedMagicNumber;
}
};
}
});
To allow configuration each service registered with ”provider(name, providerType)” automatically gets a “special” additional service with the “Provider” postfix. This special “…Provider” service (i.e. “magicNumberServiceProvider”) can be used solely in combination with “Module#config(configFn)” to configure the service prior to its construction:
app.config('magicNumberServiceProvider', function() {
magicNumberServiceProvider.setMagicNumber(99);
});
There is no right or wrong when it comes the various way in which you can register a service. Some might argue that “factory(name, providerFunction)” would be preferable since it’s extensively documented. Others would prefer registering existing service instances using “value(name, value)“. To ease choosing between the 4 different ways I will shortly recap all of them:
value(name, value)” or “constant(name, value)” to register an existing value:
factory(name, providerFunction)“: registers a factory function responsible for creating the “singleton” service instance. Just like “value(name, value)” a factory function could return anything from primitive type, function or object instance.service(name, constructor)“: registers the constructor function which will be constructed using a “new” keyword.provider(name, providerType)“: the most advanced way to register a service. Most often there is no need for your service to be configurable through a “…Provider” service, unless you are writing a reusable JavaScript library containing AngularJS services.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4