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判断用户浏览器插件安装情况的代码
Jan 01 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
分页栏的web标准实现
Nov 01 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
js微信分享接口调用详解
Jul 23 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
window.open()实现post传递参数
2015/03/12 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
python实现QQ批量登录功能
2019/06/19 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
新加坡交友网站:be2新加坡
2019/04/10 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
建材投资建议书
2014/05/16 职场文书
汽车转让协议书范本
2014/12/07 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
推广普通话的宣传语
2015/07/13 职场文书
父亲节感言
2015/08/03 职场文书
经典祝酒词大全
2015/08/12 职场文书
2016春季运动会开幕词
2016/03/04 职场文书