<!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>
再增加一个控制器
<!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>
在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除。而controllers在不需要的时候就会被销毁了。这就是为什么使用controllers在应用里面传递数据不可靠的原因
factory和services的区别
Factory和Services是最常用的两种方法,Service针对于对象会工作的更好一些,Factory可以编写JavaScript原语和函数
版权声明:本文为博主原创文章,未经博主允许不得转载。
原文地址:http://blog.csdn.net/u013011841/article/details/47298307