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 相关文章推荐
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
JSONObject使用方法详解
Dec 17 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
vue中锚点的三种方法
Jul 06 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
详解 TypeScript 枚举类型
Nov 02 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入门
2006/10/09 PHP
用PHP制作的意见反馈表源码
2007/03/11 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
JavaScript 10件让人费解的事情
2010/02/15 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
Python重新引入被覆盖的自带function
2014/07/16 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
Python内置函数及功能简介汇总
2020/10/13 Python
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
造价工程师个人求职信
2013/09/21 职场文书
就业自我评价
2014/02/04 职场文书
工程专业应届生求职信
2014/02/19 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
政风行风评议心得体会
2014/10/21 职场文书
基石观后感
2015/06/12 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python