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给onclick赋值传参数的两种方法
Nov 25 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
vue3实现v-model原理详解
Oct 09 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
域名查询代码公布
2006/10/09 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python struct模块解析
2014/06/12 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
简单实现python聊天程序
2018/04/01 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Python程序控制语句用法实例分析
2020/01/14 Python
django orm模块中的 is_delete用法
2020/05/20 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
入党积极分子评语
2014/05/04 职场文书
同事欢送会致辞
2015/07/31 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技