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中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
js选项卡的制作方法
2017/01/23 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
ES6入门教程之let和const命令详解
2017/05/17 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
python错误处理详解
2014/09/28 Python
Python用GET方法上传文件
2015/03/10 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
详解python 爬取12306验证码
2019/05/10 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
小学生新年寄语
2014/04/03 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
老公婚前保证书
2015/02/28 职场文书
员工工作表扬信
2015/05/05 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android