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


Posted in Javascript onJune 28, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
jquery 图片轮换效果
Jul 29 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
node.js中 stream使用教程
Aug 28 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
js消除图片小游戏代码
Dec 11 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 #Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 #Javascript
微信小程序后台解密用户数据实例详解
Jun 28 #Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 #Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 #Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 #Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 #Javascript
You might like
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
python实现按日期归档文件
2021/01/30 Python
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
初中英语教学随笔
2015/08/15 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
python库sklearn常用操作
2021/08/23 Python