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操作二级联动实现代码
Jul 27 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
动态加载jquery库的方法
Feb 12 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
vue 实现element-ui中的加载中状态
Nov 11 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
linux中cd命令使用详解
2015/01/08 PHP
php session 写入数据库
2016/02/13 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
php strftime函数的详细用法
2018/06/21 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python处理CSV与List的转换方法
2018/04/19 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
师范应届生语文教师求职信
2013/10/29 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
上课玩手机检讨书
2014/02/08 职场文书
社区健康教育实施方案
2014/03/18 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
主婚人致辞精选
2015/07/28 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers