[angular] - 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
                    });
                });
            }
        };
    }]);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,947评论 18 139
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,647评论 0 3
  • 1、angularjs的几大特性是什么? 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...
    2e9a10d418ab阅读 1,398评论 0 10
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,766评论 18 399
  • 秋黄叶落,秋风萧瑟 一度无心,畅谈我说 悠悠之心,心怀初恋易梦之 许多年了, 你一直在我的伤口中 幽居无声 我曾放...
    Qsc漠城阅读 266评论 0 1