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 相关文章推荐
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
js精确的加减乘除实例
Nov 14 Javascript
微信小程序实现左右列表联动
May 19 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
印尼旅游网站:via
2017/11/12 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
剪枝的学问教学反思
2014/02/07 职场文书
计算机求职信
2014/07/02 职场文书
音乐学专业求职信
2014/07/22 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
博士论文答辩开场白
2015/06/01 职场文书
信息技术研修心得体会
2016/01/08 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js