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 相关文章推荐
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
js实现点击选项置顶动画效果
Aug 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
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
PHP连接access数据库
2015/03/27 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
Vue自定义指令详解
2017/07/28 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
python生成IP段的方法
2015/07/07 Python
Python部署web开发程序的几种方法
2017/05/05 Python
numpy自动生成数组详解
2017/12/15 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
幼儿教师自我鉴定
2013/11/02 职场文书
银行个人求职自荐信范文
2013/12/16 职场文书
医院实习介绍信
2014/01/12 职场文书
高中生期末评语大全
2014/01/28 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
工程项目经理任命书
2014/06/05 职场文书
药店采购员岗位职责
2014/09/30 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python