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 相关文章推荐
js实现目录定位正文示例
Nov 14 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
用Node写一条配置环境的指令
Nov 14 Javascript
js实现列表按字母排序
Aug 11 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
使用Mock.js生成前端测试数据
Dec 13 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
用PHP4访问Oracle815
2006/10/09 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python定时器实例代码
2017/11/01 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
铭立家具面试题
2012/12/06 面试题
小学教师岗位职责
2013/11/25 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
广告业务员岗位职责
2015/02/13 职场文书
通讯稿格式及范文
2015/07/22 职场文书
远程教育学习心得体会
2016/01/23 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技