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);
    },);
}]);

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:
                }
            }
            $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(); //取用图书列表的下一页
}]);