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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
用JS实现飞机大战小游戏
Jun 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
PHP自定义大小验证码的方法详解
2013/06/07 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
Python Requests安装与简单运用
2016/04/07 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Tensorflow 实现释放内存
2020/02/03 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
如何利用python 读取配置文件
2021/01/06 Python
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
幼儿园中班评语大全
2014/04/17 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
OpenCV-Python实现轮廓拟合
2021/06/08 Python