Angularjs 设置全局变量的方法总结


Posted in Javascript onOctober 20, 2016

AngularJS 设置全局变量的三种方法

angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种。要实现的功能是,在ng-app中定义的全局变量,在不同的ng-controller里都可以使用。

1,通过var 直接定义global variable,这根纯js是一样的。

2,用angularjs value来设置全局变量 。

3,用angularjs constant来设置全局变量 。

下面用一个例子,来说明,上面3种方法:

实例:

1,在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定义全局变量

phonecatApp.config(['$routeProvider',        //设置路由
 function($routeProvider) {
  $routeProvider.
   when('/phones', {
    templateUrl: 'partials/phone-list.html'   //这里没有设置controller,可以在模块中加上ng-controller
   }).
   when('/phones/:phoneId', {
    templateUrl: 'partials/phone-detail.html',
    controller: 'PhoneDetailCtrl'
   }).
   when('/login', {
    templateUrl: 'partials/login.html',
    controller: 'loginctrl'
   }).
   otherwise({
    redirectTo: '/login'
   });
 }]);

2,在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,赋值
 }]);

3,在html中看一下效果

<div data-ng-controller="PhoneListCtrl">
  {{test.test1}}
  {{constanttest}}
  {{test2}}
</div>

结果:test111 this is constanttest tank

其实我们可以通过其他方法来实现全局变量,例如:angularjs factory的功能。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 #Javascript
Angular表单验证实例详解
Oct 20 #Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 #Javascript
seajs学习教程之基础篇
Oct 20 #Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 #Javascript
Javascript中内建函数reduce的应用详解
Oct 20 #Javascript
基于AngularJS前端云组件最佳实践
Oct 20 #Javascript
You might like
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
python分割列表(list)的方法示例
2017/05/07 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
python可迭代对象去重实例
2020/05/15 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
婚纱摄影师求职信
2014/03/07 职场文书
销售团队口号大全
2014/06/06 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
法人代表证明书
2014/09/18 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
Python基础之条件语句详解
2021/06/16 Python
zabbix配置nginx监控的实现
2022/05/25 Servers