快捷導(dǎo)航

AngularJS基于provider實(shí)現(xiàn)全局變量的讀取和賦值方法

更新時(shí)間：2017年06月28日 10:31:21 作者：小魏的馬仔

這篇文章主要介紹了AngularJS基于provider實(shí)現(xiàn)全局變量的讀取和賦值方法,結(jié)合實(shí)例形式分析了AngularJS全局變量的聲明、賦值、讀取等相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS基于provider實(shí)現(xiàn)全局變量的讀取和賦值方法。分享給大家供大家參考，具體如下：

簡(jiǎn)單全局變量的設(shè)置

1，通過(guò)var 直接定義global variable，這根純js是一樣的。
2，用angularjs value來(lái)設(shè)置全局變量。
3，用angularjs constant來(lái)設(shè)置全局變量。

示例代碼如下：

在app文件中，聲明三種變量

'use strict';
/* App Module */
var test2 = 'tank';     //方法1，定義全局變量
var phonecatApp = angular.module('phonecatApp', [   //定義一個(gè)ng-app
 'ngRoute',
 'phonecatControllers',
 'tanktest'
]);
phonecatApp.value('test',{"test":"test222","test1":"test111"}); //方法2定義全局變量
phonecatApp.constant('constanttest', 'this is constanttest');  //方法3定義全局變量

在controller中對(duì)全局變量進(jìn)行讀取

'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，賦值
 }]);

注意事項(xiàng)

var test；設(shè)置后，無(wú)需在controller聲明的時(shí)候注入，直接使用即可。

value和contant，在app中初始化后，需要在controller聲明時(shí)候注入到controller中，才能夠使用。

這三種方式都存在一個(gè)問(wèn)題，即只能夠讀取全局變量，無(wú)法對(duì)全局變量進(jìn)行修改賦值。在很對(duì)業(yè)務(wù)邏輯中無(wú)法滿(mǎn)足業(yè)務(wù)需求。

使用provider實(shí)現(xiàn)全局變量。

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

在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>

在controller聲明的時(shí)候，注入。

app.controller('myCtrl1', function ($scope, userService) {
  var data = userService(0, 0, false);//讀取全局變量
}));
app.controller('myCtrl2', function ($scope, userService) {
  var data = userService(123, 111, true);//設(shè)置全局變量
}));

通過(guò)provider提供的get方法，實(shí)現(xiàn)參數(shù)的讀取和賦值。

注意事項(xiàng)

代碼中，我們對(duì)provider 的賦值操作進(jìn)行了取巧設(shè)計(jì)，當(dāng)?shù)谝粋€(gè)參數(shù)等于0的時(shí)候，默認(rèn)是讀取，當(dāng)?shù)谝粋€(gè)參數(shù)不為0的時(shí)候，實(shí)現(xiàn)的是設(shè)置后進(jìn)行讀取。這樣，公用一個(gè)get方法即可，無(wú)需增加新的方法。

更多關(guān)于A(yíng)ngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: