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 相关文章推荐
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
字节飞书面试promise.all实现示例
Jun 16 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模板引擎SMARTY
2006/10/09 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
python help函数实例用法
2020/12/06 Python
介绍下static、final、abstract区别
2015/01/30 面试题
Java servlet面试题
2012/03/04 面试题
考博自荐信
2013/10/25 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
24年收藏2000多部退役军用电台
2022/02/18 无线电
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python