AngularJS基于provider实现全局变量的读取和赋值方法

本文实例讲述了AngularJS基于provider实现全局变量的读取和赋值方法。分享给大家供大家参考，具体如下：

简单全局变量的设置

1，通过var 直接定义global variable，这根纯js是一样的。
2，用angularjs value来设置全局变量。
3，用angularjs constant来设置全局变量。

示例代码如下：

在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定义全局变量

在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差不多。

在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声明的时候，注入。

app.controller('myCtrl1', function ($scope, userService) {
  var data = userService(0, 0, false);//读取全局变量
}));
app.controller('myCtrl2', function ($scope, userService) {
  var data = userService(123, 111, true);//设置全局变量
}));

通过provider提供的get方法，实现参数的读取和赋值。

注意事项

代码中，我们对provider 的赋值操作进行了取巧设计，当第一个参数等于0的时候，默认是读取，当第一个参数不为0的时候，实现的是设置后进行读取。这样，公用一个get方法即可，无需增加新的方法。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

# AngularJS # provider # 全局变量 # 读取 # 赋值 # 实例讲解JavaScript预编译流程 # JavaScript 详解预编译原理 # JavaScript运行过程中的“预编译阶段”和“执行阶段” # 通过JSP的预编译消除性能瓶颈 # JavaScript防止全局变量污染的方法总结 # JS全局变量和局部变量最新解析 # 浅谈JavaScript的全局变量与局部变量 # Angularjs全局变量被作用域监听的正确姿势 # javascript中局部变量和全局变量的区别详解 # 浅析JavaScript预编译和暗示全局变量 # 第一个 # 的是 # 进阶 # 相关内容 # 感兴趣 # 给大家 # 三种 # 不为 # 一个问题 # 更多关于 # 中对 # 才能够 # 所述 # 程序设计 # 进行了 # 这根 # 很对 # 这三种 # 操作技巧

返回目录在线咨询

上一篇：Go语言JSON解析：如何避免长整型数据变为浮点数
下一篇：杭州SEO优化策略：提升网站排名的实用技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

AngularJS基于provider实现全局变量的读取和赋值方法

您的项目需求