1. 程式人生 > >angularJS-通過provider實現全域性變數的讀取和賦值

angularJS-通過provider實現全域性變數的讀取和賦值

簡單全域性變數的設定

1,通過var 直接定義global variable,這根純js是一樣的。
2,用angularjs value來設定全域性變數 。
3,用angularjs constant來設定全域性變數 。

示例程式碼如下:

  1. 在app檔案中,宣告三種變數
'use strict';  

/* App Module */  

var test2 = 'tank';         //方法1,定義全域性變數  

var phonecatApp = angular.module('phonecatApp', [     //定義一個ng-app  
  'ngRoute',  
  'phonecatControllers'
, 'tanktest' ]); phonecatApp.value('test',{"test":"test222","test1":"test111"}); //方法2定義全域性變數 phonecatApp.constant('constanttest', 'this is constanttest'); //方法3定義全域性變數
  1. 在controller中對全域性變數進行讀取
'use strict';  

/* Controllers */  

var phonecatControllers = angular.module('phonecatControllers'
, []); phonecatControllers.controller('PhoneListCtrl', ['$scope','test','constanttest', function($scope,test,constanttest) { $scope.test = test; //方法2,將全域性變數賦值給$scope.test $scope.constanttest = constanttest; //方法3,賦值 $scope.test2 = test2; //方法1,賦值
}]);

注意事項

  • var test;設定後,無需在controller宣告的時候注入,直接使用即可。
  • value和contant,在app中初始化後,需要在controller宣告時候注入到controller中,才能夠使用。

這三種方式都存在一個問題,即只能夠讀取全域性變數,無法對全域性變數進行修改賦值。在很對業務邏輯中無法滿足業務需求。

使用provider實現全域性變數。

步驟與上面的value和contant差不多。

  1. 在app中完成宣告和初始化。
    <script type="text/javascript">
        var app = angular.module('ngRouteWxCtb', ['ngRoute','ngCookies']);

        //TODO:provider of globle uid and weixinIsInit param
        app.provider('userService', function () {
            var data = {uid:0,weixinIsInit:false};
            var f = function (uid,weixinIsInit) {
                if (uid != 0)
                {
                    data.uid= uid;
                    data.weixinIsInit = weixinIsInit;
                }
                return data;
            };
            this.$get = function () {
                return f;
            };
        });
    </script>
  1. 在controller宣告的時候,注入。
app.controller('myCtrl1', function ($scope, userService) {

    var data = userService(0, 0, false);//讀取全域性變數
    }));
app.controller('myCtrl2', function ($scope, userService) {

    var data = userService(123, 111, true);//設定全域性變數
    }));
  1. 通過provider提供的get方法,實現引數的讀取和賦值。

注意事項

  • 程式碼中,我們對provider 的賦值操作進行了取巧設計,當第一個引數等於0的時候,預設是讀取,當第一個引數不為0的時候,實現的是設定後進行讀取。這樣,公用一個get方法即可,無需增加新的方法。