AngularJS基于provider实现全局变量的读取和赋值方法
程序员文章站
2023-02-24 11:35:44
本文实例讲述了angularjs基于provider实现全局变量的读取和赋值方法。分享给大家供大家参考,具体如下:
简单全局变量的设置
1,通过var 直接定义glob...
本文实例讲述了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程序设计有所帮助。