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 相关文章推荐
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 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
php 伪静态之IIS篇
2014/06/02 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
微信小程序版翻牌小游戏
2018/01/26 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
pyshp创建shp点文件的方法
2018/12/31 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
python实现最大优先队列
2019/08/29 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
python实现批量转换图片为黑白
2020/06/16 Python
Python 发送邮件方法总结
2020/08/10 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
学校春季防火方案
2014/06/08 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
离婚协议书范文2015
2015/01/26 职场文书
公司借条范本
2015/05/25 职场文书