Services
Angular的services是一种通过依赖注入绑定在一起的可替换的对象，你可以使用services在你的app中共享你的代码！
Angular的services有下面的特性
- 懒汉模式 - 只有当某一个application模块用到services时，才会初始化
- 单例模式 - 每个依赖services的模块都会得到一个来自services工厂产生的单一实例的引用
一般系统自带的services前面都会带有$美元符号.
要使用augular的service,你只需要把service的依赖注入到模块中（比如controller,service,filter或者directive),Angular的依赖注入子系统会自动完成剩下的所有工作。
<!DOCTYPE html>
<html ng-app="myServiceModule">
<head>
<meta charset="utf-8">
<script src="https://wx.gtimg.com/bower_components/angular/angular.js"></script>
</head>
<body ng-controller="MyController">
<div>
<p>Let's try this simple notify service, injected into the controller...</p>
<p> {{ name }} (you have to click 3 times to see an alert)</p>
</div>
<script>
var app = angular.module('myServiceModule',[]);
app.controller('MyController', ['$scope', function ($scope) {
$scope.name="hello world";
}]);
</script>
</body>
</html>
再来给factory增加点功能
<!DOCTYPE html>
<html ng-app="myServiceModule">
<head>
<meta charset="utf-8">
<script src="https://wx.gtimg.com/bower_components/angular/angular.js"></script>
</head>
<body >
<div ng-controller="MyController">
<p>Let's try this simple notify service, injected into the controller...</p>
<input ng-init="message='test'" ng-model="message">
<button ng-click="callNotify(message);">notify </button>
<p> {{ name }} (you have to click 3 times to see an alert)</p>
</div>
<div ng-controller="MyController2">
<input ng-model="message1">
<button ng-click="callNotify(message1);">notify </button>
</div>
<script>
var app = angular.module('myServiceModule',[]);
app.factory('notify',function(){
var msgs = [];
return function(msg){
msgs.push(msg);
console.log(msg + " "+ msgs.length);
if(msgs.length == 3){
alert("hello world");
msgs=[];
}
}
});
app.controller('MyController', ['$scope','notify', function ($scope,notify) {
$scope.callNotify = function (msg){
notify(msg);
}
}]);
app.controller('MyController2', ['$scope','notify', function ($scope,notify) {
$scope.callNotify = function (msg){
notify(msg);
}
}]);
</script>
</body>
</html>
factory解析,每个factory都是一个实例对象，所以你可以看到里面的msgs变量是会随着点击不停的增加。
再增加一个控制器
<!DOCTYPE html>
<html ng-app="myServiceModule">
<head>
<meta charset="utf-8">
<script src="https://wx.gtimg.com/bower_components/angular/angular.js"></script>
</head>
<body >
<div ng-controller="MyController">
<p>Let's try this simple notify service, injected into the controller...</p>
<input ng-init="message='test'" ng-model="message">
<button ng-click="callNotify(message);">notify </button>
<p> {{ name }} (you have to click 3 times to see an alert)</p>
</div>
<div ng-controller="MyController2">
<input ng-model="message1">
<button ng-click="callNotify(message1);">notify </button>
</div>
<script>
var app = angular.module('myServiceModule',[]);
app.factory('notify',function(){
var msgs = [];
return function(msg){
msgs.push(msg);
console.log(msg + " "+ msgs.length);
if(msgs.length == 3){
alert("hello world");
msgs=[];
}
}
});
app.controller('MyController', ['$scope','notify', function ($scope,notify) {
$scope.callNotify = function (msg){
notify(msg);
}
}]);
app.controller('MyController2', ['$scope','notify', function ($scope,notify) {
$scope.callNotify = function (msg){
notify(msg);
}
}]);
</script>
</body>
</html>
另外，不同的控制器也可以只操作一个factory,由于factory只有一个实例，所以你能看到下面的效果
在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了。这就是为什么使用controllers在应用里面传递数据不可靠的原因
factory和services的区别
Factory和Services是最常用的两种方法，Service针对于对象会工作的更好一些，Factory可以编写JavaScript原语和函数
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-10-12 15:20:46