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 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
JavaScript简介
Feb 15 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
小程序自定义组件实现城市选择功能
Jul 18 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
python中的闭包用法实例详解
2015/05/05 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
django2 快速安装指南分享
2018/01/05 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
数组越界问题
2015/10/21 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
第二课堂活动总结
2014/05/07 职场文书
承诺书格式范文
2014/06/03 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL