[angular] - angularjs的服务怎么理解

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

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

{{r}}

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

在自定义服务里可以注入服务,但不能注入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、在过滤器中注入自定义服务

在过滤器中使用服务: '

{{255 | myFormat}}'

二、service与controller、directive交互

//自定义指令
  • 书名:{{i.title}},作者:{{i.author}}
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 }); }); } }; }]);

你可能感兴趣的:([angular] - angularjs的服务怎么理解)