Although angular provides many useful services, in some special applications, we will find it useful to write custom services. If we want to do this, we first need to register a service factory method in the module, either through api (/api/) or directly through $provide api (/api/AUTO.$provide) in the module configuration method.
All angular services are involved in DI (https:///article/) can either register yourself using the name (id) in the angular DI system (injector), or declare dependencies on existing services in other factory methods.
1. Registering Services
In order to register a service, we must have a module and make this server a part of this module. Then, we can register the service through the Module API or in the module configuration function. The following pseudo-code will show these two registration methods.
Using the api:
var myModule = (‘myModule',[]);
(‘serviceId',function() {
var someService;
//Factory method body, build someService return someService;
});
Use $provide service:
(‘myModule',[],function($provide) {
$(‘serviceId',function() {
var someService;
//Factory method body, build someService return someService;
});
});
Note that we do not need to register a service instance, instead, the factory method will be instantiated when it is called.
2. Dependencies
The service can not only be dependent, but also have its own dependencies. Dependencies can be specified in the parameters of the factory method. read(https:///article/) More about DI in angular, the uses of array tags and $inject attribute, making DI declarations more concise. (Read more about the DI in Angular and the use of array notation and $inject property to make DI annotation minification-proof…)
Here is a very simple service example. This service relies on $window service (passed through factory method parameters), and only has one method. This service simply stores all notifications, after the third one, this service will display all notifications.
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
<head>
<meta charset="UTF-8">
<title>services</title>
</head>
<body>
<div ng-controller="MyController">
<input type="text" ng-model="msg"/>
<button ng-click="saveMsg()">save msg</button>
<ul>
<li ng-repeat="msg in msgs">{{msg}}</li>
</ul>
</div>
<script src="../angular-1.0." type="text/javascript"></script>
<script type="text/javascript">
var app = ("MainApp",[],function($provide) {
$("notify",["$window","$timeout",function(win,timeout) {
var msgs = [];
return function(msg) {
(msg);
if(==3) {
timeout(function() {
(("\n"));
msgs = [];
},10);
}
}
}])
});
("MyController",function($scope,notify) {
$ = [];
$ = function() {
();
notify();
= "";
};
});
</script>
</body>
</html>
3. Instantiating Angular Services
All services in angular are lazily instantiated. This means that the service is created only when other instantiated services or application components that depend on it are dependent. In other words, angular will not instantiate the service until the service is requested directly or indirectly.
4. Services as singletons
Finally, we must realize that all angular services are a singleton application. This means that each injector has and only one instance of a given service. Since angular is extremely annoying to destroy global state, it is feasible to create multiple injectors so that each has an instance of a specified service. Except for the strong demand in testing, there are generally few such needs.
The above is the information about Angular Services. We will continue to add relevant information in the future. Thank you for your support for this site!