angularjs数据共享

前面提到了angularjs的每个应用是基于APP的，而每个功能模块属于一个module，每个module的一些增删改查等单项功能以及数据层都是依赖于$scope，每个$scope都有其独有的作用域，不同的功能模块对应着不同的作用域。不同模块之间的$scope是不可共享的，而在实际的项目中我们又会发现会有一些方法参数需要在多个功能模块module之间传递，需要被多个module之间共享，这就好比java中的工具类一样。angularjs也同样提供了这种方式来达到模块之间的数据共享问题。

1.angularjs数据共享

数据共享，包括方法共享，常量共享，变量共享等。将相同的操作抽象出一个公用的方法，来实现module之间的数据共享是常用的一种手段。angualrjs提供的数据共享方式很多，像我们前面提到的constant，service，value， factory，provider， decorator等方式来实现数据共享。

            

通过$provide供应商来为各个厂商提供不同的services服务，共享的数据可以是方法，string，json，array等。

1.1 Constant

顾名思义，常量共享，就是在js中定义一堆的常量数据，在各模块中被使用。

angular.module('main', ["pascalprecht.translate", "ngCookies"])

    .constant('ntpTimeZoneConstant', {
        edt: [{
            name: "International-Date-Line-West@UTC+12",
            value: "",
            dst: ""
        }, {name: "Coordinated-Universal-Time-11@UTC+11", value: "", dst: ""}, {
            name: "Aleutian-Islands@UTC+10",
            value: "",
            dst: ""
        }, {name: "Hawaii@UTC+10", value: "", dst: ""}]
    })
    .controller('ctrl1`', ["ntpTimeZoneConstant", "$scope", function (ntpTimeZoneConstant, $scope) {
        $scope.movieTitle = ntpTimeZoneConstant.edt[0].name;
    }]).controller('ctrl2', ["ntpTimeZoneConstant", "$scope", function (ntpTimeZoneConstant, $scope) {
        $scope.movieTitle = ntpTimeZoneConstant.edt[0].name;
        ;
    }]);

1.2 Value

Value的用法和constant相似，唯一的不同点就是，constant修饰的数值没法更改，

只能拿来引用。而value修饰的数值可以做修改。

angular.module('main', ["pascalprecht.translate", "ngCookies"])
    .value("testValue","value")
    .controller('ctrl1`', [ "$scope","testValue", function ($scope,testValue) {
        testValue = "value_1";
    }]).controller('ctrl2', ["$scope", "testValue",function ($scope,testValue) {
        $scope.testValue = testValue;
    }]);

1.3 Service

service是一个构造器，在angularjs中是单例存在的。

angular.module('main', [])
    .service("testService", function () {
        var vm = this;
        vm.aps = [];
        vm.getAps = function () {
            return vm.aps;
        }
        vm.setAps = function (aps) {
            vm.aps = aps;
        }
    })
    .controller('ctrl1`', ["$scope", "testService", function ($scope, testService) {
        var vm = this;
        vm.value = [1,2,3,4];
        testService.setAps(vm.value);
    }])
    .controller('ctrl2', ["$scope", "testService", function ($scope, testService) {
        var vm = this;
        vm.testValue = testService.getAps();
    }]);

1.4 Factory

factory是一个可注入的function，与service的区别在于，service是一个构造器，

而factory只是个普通的function。

angular.module('main', [])
    .service("testService", function () {
        var vm = this;
        vm.aps = [];
        vm.getAps = function () {
            return vm.aps;
        }
        vm.setAps = function (aps) {
            vm.aps = aps;
        }
    })
    .config(function ($provide) {
        $provide.factory("testFactory", function () {
            return {
                value:"The value is 3"
            }
        })
    })
    .controller('ctrl1`', ["$scope", "testFactory", function ($scope, testFactory) {
        var vm = this;
        vm.value = testFactory.value;
    }])
    .controller('ctrl2', ["$scope", "testFactory", function ($scope, testFactory) {
        var vm = this;
        vm.value = testFactory.value;
    }]);

1.5 Provide

只有provder是能传 .config() 函数的 service。如果想在 service 对象启用之前，先进行模块范围的配置，

那就应该选择 provider。需要注意的是：在config函数里注入provider时，名字应该是：

providerName+Provider，使用Provider的优点就是，你可以在Provider对象传递到

应用程序的其他部分之前在app.config函数中对其进行修改 ，你使用Provider创建一个service时，

唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。

 var app = angular.module('myApp', []);

    //需要注意的是：在注入provider时，名字应该是：providerName+Provider   
    app.config(function(myProviderProvider){
        myProviderProvider.setName("大圣");       
    });
    app.provider('myProvider', function() {
        var name="";
        var test={"a":1,"b":2};
        //注意的是，setter方法必须是(set+变量首字母大写)格式
        this.setName = function(newName){
            name = newName  
        }

        this.$get =function($http,$q){
            return {
                getData : function(){
                    var d = $q.defer();
                    $http.get("url")//读取数据的函数。
                        .success(function(response) {
                            d.resolve(response);
                        })
                        .error(function(){
                            d.reject("error");
                        });
                    return d.promise;
                },
                "lastName":name,
                "test":test
            }   
        }

    });
    app.controller('myCtrl', function($scope,myProvider) {
        alert(myProvider.lastName);
        alert(myProvider.test.a)
        myProvider.getData().then(function(data){
            //alert(data)
        },function(data){
            //alert(data)
        });
    });

1.6 Decorator

decorator装饰器，顾名思义需要对已存在的服务进行二次加工修饰。

在项目中可能会碰到这样的问题，我想 共用其他人已经定义的方法，

而别人定义的service功能又不够强大，在不影响其他功能的情况下，除了修改源码，

我们可以这么做修改已定义的service并且可以扩展它的功能，使得service功能更加饱满。

而angualrjs提供了 decorator这种方式来实现这种操作。

angular.module('main', [])
    .service("testService", function () {
        var vm = this;
        vm.username = [];
        vm.getUsername = function () {
            return vm.username;
        }
        vm.setUsername = function (username) {
            vm.username = username;
        }
    })
    .config('$provide",function ($provide) {
        $provide.decorator("testService",["$delegate"] ,function($delegate) {
            return {
                getUsername: function () {
                    return $delegate.getUsername()+"update";
                },
                getPassword: function () {
                    return 29;
                }
            }

        })
    })