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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
JS实现手写 forEach算法示例
Apr 29 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
js实现选项卡效果
2020/03/07 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python异常处理操作实例详解
2018/05/10 Python
详解python中init方法和随机数方法
2019/03/13 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
学习十八届三中全会精神实施方案
2014/02/17 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
检讨书格式范文
2015/05/07 职场文书
学历证明范文
2015/06/16 职场文书
基于docker安装zabbix的详细教程
2022/06/05 Servers