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实现table单双行不同显示并能单行选中
Jul 25 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 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
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
php中取得文件的后缀名?
2012/02/20 PHP
php使用websocket示例详解
2014/03/12 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
[01:31]完美与DOTA2历程
2014/07/31 DOTA
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
对python中return与yield的区别详解
2020/03/12 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
Laravel中Kafka的使用详解
2021/03/24 PHP
抽样调查项目计划书
2014/04/24 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript