今天我们来讨论下angularJS中定义全局变量的三种方法
1.首先是最简单的,定义在js中,方法外面的全局变量,这样任意js都可以访问其值
var variable="This is a global variable~"; //定义好后,直接使用即可
2.然后是使用angularJS中的.value定义全局变量,方法如下
angular.module('starter') //使用value定义全局变量 .value('valueMethod',{ valueGlobalVariable : "This is a global variable~" }); //这样,我们可以通过访问叫做valueMethod的value来访问其中的valueGlobalVariable字段储存的值
3.最后是通过angularJS中的.constant来定义全局变量
angular.module('starter') //使用constant定义全局变量 .constant('constantMethod',{ constantGlobalVariable:"This is a global variable~" }); //这样,我们可以通过访问叫做constantMethod的constant来访问其中的constantGlobalVariable字段储存的值
区别:
大家现在可能会疑问,除了第一种js全局变量定义方法外,剩余两种都是angularJS中提出来的,那么为什么angular要使用两种定义
全局变量的方法呢?他们又是否有区别
.value和.constant最大的区别在于
1.value中储存的值是可以被修改的,但是constant的一经声明就无法修改,可以理解为常量,这样的话,我们可以根据需求
来定义可以修改的全局变量还是不可修改的全局变量
2.constant可以注入到.config()中,但是value却不可以,这是在底层代码中就做好了限制的,比如我们ionic的项目,要在
app.js中的.config()中注入一个储存全局变量的js,那么这个js中定义的只能是constant,不可以是value
示例
在某公共JS中:
var commonGlobalVariable = "这是普通全局变量定义方法"; angular.module('starter') //value .value('valueMethod',{ valueGlobalVariable : "这是通过value定义全局变量" }); angular.module('starter') //constant .constant('constantMethod',{ constantGlobalVariable:"这是通过constant定义全局变量" });
在controller中:
angular.module('starter.controllers', []) .controller('DashCtrl', function($scope,valueMethod,constantMethod) { console.debug("方法1:"+commonGlobalVariable); //打印普通全局变量的值 console.debug("方法2:"+valueMethod.valueGlobalVariable); //打印通过value定义的全局变量的值 console.debug("方法3:"+constantMethod.constantGlobalVariable); //打印通过constant定义的去全局变量的值 $scope.method1 = commonGlobalVariable; $scope.method2 = valueMethod.valueGlobalVariable; $scope.method3 = constantMethod.constantGlobalVariable; })
在html中:
执行后结果:
现在大家应该可以体会到angularJS中定义全局变量的方法以及他们的异同了吧。