angularjs的服务怎么理解

服务用来提供公用类库
http://blog.csdn.net/zcl_love_wx/article/details/51404390（参考）

一、3种创建自定义服务的方式

<div ng-app="myApp" ng-controller="myCtrl">
    <p>{{r}}</p>
</div>

1、Factory

factory方式创建的服务，作用就是返回一个有属性有方法的对象。相当于：var f = myFactory();

    var app = angular.module('myApp', []);
    //通过工厂模式创建自定义服务
    app.factory('myFactory', function() {
        var service = {};//定义Object对象
        service.name = "wy";
        var age;//定义一个私有化的变量
        //对私有属性写getter和setter方法
    service.setAge = function(newAge){
            age = newAge;
        }
        service.getAge = function(){
            return age; 
        }
        return service;//返回这个Object对象
    });
    //创建控制器
    app.controller('myCtrl', function($scope, myFactory) {
        myFactory.setAge(20);
        $scope.r =myFactory.getAge();
        alert(myFactory.name);
    });

在自定义服务里可以注入服务，但不能注入$scope作用域对象。
例如：
app.factory('myFactory', function($http,$q)

2、Service

通过service方式创建自定义服务，相当于new的一个对象：var s = new myService();，把属性和方法添加到this上才可以在controller里调用。

var app = angular.module('myApp', []);
    app.service('myService', function($http,$q) {
        this.name = "service";
        this.myFunc = function (x) {
            return x.toString(16);//转16进制
        }
        this.getData = function(){
            var d = $q.defer();
            $http.get("ursl")//读取数据的函数。
                .success(function(response) {
                d.resolve(response);
            })
                .error(function(){
                alert(0)
                d.reject("error");
            });
            return d.promise;
        }
    });
    app.controller('myCtrl', function($scope, myService) {
        $scope.r = myService.myFunc(255);
        myService.getData().then(function(data){
            console.log(data);//正确
        },function(data){
            alert(data)//错误
        });
    });

3、Provider

只有provder是能传 .config() 函数的 service,若想在 service 对象启用之前，先进行模块范围的配置，那就应该选择 provider。

4、在过滤器中注入自定义服务

<div ng-app="myApp">在过滤器中使用服务: '<h1>{{255 | myFormat}}'</h1></div>
<script>
    var app = angular.module('myApp', []);
    app.service('ser', function() {
        this.myFunc = function (x) {
            return x.toString(16);
        }
    });
    app.filter('myFormat',['ser', function(ser) {
        return function(x) {
            return hexafy.myFunc(x);
        };
    }]);
</script>

二、service与controller、directive交互

<button add-book-button>Add book</button>//自定义指令
<ul ng-controller="books.list">  
    <li ng-repeat="i in books">书名：{{i.title}}，作者：{{i.author}}</li>
</ul>


var appModule = angular.module(‘app‘, []);
    // service 单例，共享数据
    appModule.service(‘Book‘, [‘$rootScope‘, function($root){
        var service = {
            books: [
                {
                    "title": "书名1",
                    "author": "作者1"
                },
                {
                    "title": "书名2",
                    "author": "作者2"
                }
            ],
            addBook: function(book){
                service.books.push(book);
                // 给root下所有books.update派发事件
                $root.$broadcast(‘books.update‘);
            }
        };
        return service;
    }]);
    (1)
    // 在控制器里使用Book服务
    appModule.controller(‘books.list‘, [‘$scope‘, ‘Book‘, function(scope, Book){
        scope.books = Book.books;
        scope.$on(‘books.update‘, function(){
            scope.$apply(function(){
                scope.books = Book.books;
            });
        });
    }]);

    // (2)在指令里使用Book服务
    appModule.directive(‘addBookButton‘, [‘Book‘, function(Book){
        return {
            restrict: ‘A‘,
            link: function(scope, el){
                var n = 0;
                el.bind(‘click‘, function(){
                    Book.addBook({
                        "title": "新书"+(++n),
                        "author": "新作者"+n
                    });
                });
            }
        };
    }]);