angularjs的service
1.首先我们创建一个模块
var module = angular.module( "my.new.module", [] );
2.然后写具体的service 可以看到它是一个很有趣的对象 ,以键值对的方式定义属性和值, 值可能是数组,json对象数组,或者函数
appServices.service('Book',['$rootScope',function($rootScope){ var service = { books: [ {title:'bbq',anthor:'李斯'}, {title:'barbecue',anthor:'loli'} ], addBook: function(a_book){ service.books.push(a_book); $rootScope.$broadcast( 'books.update' ); //这里相当于定义了一个回调函数,任何调用这个图书服务的指令,控制器,过滤器等可以选择实现这个books.update句柄 来进行addBook后想执行的操作,如更新$scope } } return service; }]);
note:这是通常一个简单的service的写法
$broadcast只能向child controller传递event与data
$emit只能向parent controller传递event与data
$on用于接收event与data
controller之间的层级关系 (controller可以任意嵌套):
<div class="box row" ng-controller="parentCtrl"> <div class="col-xs-12"> <a ng-click="clickMe()" >click me!->i belong parent controller</a> <div ng-controller="AChildCtrl"> <a ng-click="clickMe()" s>click me!->i belong child&&brother controller</a> </div> <div ng-controller="BChildCtrl"> <a ng-click="clickMe()" >click me!->i belong child&&brother controller</a> </div> </div> </div>
$broadcast $emit $on 的应用 appCtrls.controller('parentCtrl',['$scope',function($scope){ $scope.clickMe = function(){ var book = { title:'monkey' , author:'lee' } $scope.$broadcast('givetochild',book); } }]); appCtrls.controller('AChildCtrl',['$scope',function($scope){ var book = { title:'fifty shadows' , author:'mcdownload' } $scope.$emit = ('givetoparent', book); //向父级传值 }]); appCtrls.controller('BChildCtrl',['$scope',function($scope){ $scope.$on('givetochild',function(event,data){ console.log(data.title + ' ' + data.author); //输出 mokey 和 lee console.log(event); }); }]);
比较奇怪的现象是如果
appCtrls.controller('parentCtrl',['$scope',function($scope){ var book = { title:'monkey' , author:'lee' } $scope.$broadcast('givetochild',book); }]);
那么总是不会触发$on,得不到任何输出
但是如果,总会正常得到值
appCtrls.controller('parentCtrl',['$scope','$timeout',function($scope,$timeout){ $timeout(function(){ var book = { title:'monkey' , author:'lee' } $scope.$broadcast('givetochild',book); },10); }]);
service的使用简单代码实例为
template: <div class="box row" ng-controller="books.list"> <div class="col-xs-12"> <p ng-repeat="book in books">{{book.title}} -- {{book.author}}</p> <input type="text" ng-model="book_title" placeholder="请输入书名"><br> <input type="text" ng-model="book_author" placeholder="请输入作者"><br> <a ng-click="addBook()">添加书籍</a> </div> </div> controller: var appCtrls = angular.module('appCtrls',[]); appCtrls.controller('books.list',['$scope','Book',function($scope,Book){ $scope.books = Book.books; //取用图书服务 $scope.addBook = function(){ var a_book = { title:$scope.book_title , author:$scope.book_author } Book.addBook(a_book); } $scope.$on('books.update',function(event){ $scope.books = Book.books; }); }]); service: var appServices = angular.module('appCtrls'); appServices.service('Book',['$rootScope',function($rootScope){ var service = { books: [ {title:'bbq',author:'李斯'}, {title:'barbecue',author:'loli'} ], addBook: function(a_book){ service.books.push(a_book); $rootScope.$broadcast( 'books.update' ); } } return service; }]);
此外,$on还暴露了更多我们可以用到的东西,如果你需要的话
在$on的方法中的event事件参数,其对象的属性和方法如下
事件属性 目的 event.targetScope 发出或者传播原始事件的作用域 event.currentScope 目前正在处理的事件的作用域 event.name 事件名称 event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这只适用使用`$emit`发出的事件)
event.preventDefault() 这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。
直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。 event.defaultPrevented 如果调用了`preventDefault`则为true
angular 十分推崇以模块化的方式组织代码,从而管理数据,处理页面交互等
你可以看到我们总是先 var xxx= angular.module('xxx',[]) (先创建模块),然后你可以试试console.log(xxx);
你可以看到模块下的属性, constant是module的,service是module的,controller是module,filter是module的,animation是module的
它们的值都是一个function,在module启动后,由angularjs框架封装好的getter setter去invoke我们定义的对应的service,controller....
所以使用service来管理数据比控制器注入的scope要好的多,当你要在多个控制器间分享数据时,当任何时候控制器需要某些数据时,你可以使用注入service的方式,得到数据,
更好的是当你要跨域名分享数据时,你显然只需要在根module,或者什么地方的模块定义了service,然后引入这个第三方module的js文件就可以了,
你可能会担心不够clean,但是这完全不是问题,因为还记得angular的依赖注入系统麻,在你的app启动的module定义时加入注入这个module即可,这样这个module可以做得十分clean.
更有意思的一件事情是 service数据来源的方式不是constant或者Value, 通过service你完全使用异步$http之类的来得到数据
所以代码可以这样组织
var appServices = angular.module('appServices',[]); //这时我们给数据服务单独了一个模块 //然后我们让service 使用$http的方式,而不是直接定义数据 appServices.service('Book',['$rootScope', '$http',function($rootScope,$http){ var service = { books: [ {title:'bbq',author:'李斯'},{},{},... ], addBook: function(a_book){ .... }, booksNext: function(){ var req = { url: 'http://www.baidu.com', params: { name: 'lee', phone: 13243244176 } } $http(req) .success(function(data,status){ console.log(data);console.log('is success'); }) .error(function(data,status){ console.log(data);console.log('is error'); }); } } return service; }]);
然后我们的应用程序启动时这样的结构
//在根module这样 var app = angular.module('app', [ 'appCtrls', 'appFilters', 'appDirectives', 'appServices', //这里注入 'infinite-scroll', 'ngRoute', 'ngSanitize', 'ngStorage' ]); //或者在这里注入 var appCtrls = angular.module('appCtrls',['appServices']);
然后在控制器里具体使用(十分简单)
appCtrls.controller('books.list',['$scope','Book',function($scope,Book){ $scope.books = Book.books; //取用图书服务 Book.booksNext(); //取用图书列表的下一页 }]);