码迷,mamicode.com
首页 > 其他好文 > 详细

Angular Services详解

时间:2015-08-05 16:21:24      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:angular   web   angularjs   

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原语和函数

技术分享

版权声明:本文为博主原创文章,未经博主允许不得转载。

Angular Services详解

标签:angular   web   angularjs   

原文地址:http://blog.csdn.net/u013011841/article/details/47298307

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!