angularJS-通过provider实现全局变量的读取和赋值

系统管理员 2022-09-23 03:57 51阅读 0赞

## 简单全局变量的设置 ##

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中完成声明和初始化。

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方法即可，无需增加新的方法。