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 相关文章推荐
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
移动端js触摸事件详解
Sep 18 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
求职简历自我评价范例
2014/03/12 职场文书
总经理工作职责范文
2014/03/14 职场文书
失恋33天观后感
2015/06/11 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang
Python实现聚类K-means算法详解
2022/07/15 Python