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在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
详解Puppeteer 入门教程
May 09 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
Python高效编程技巧
2013/01/07 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
python实现朴素贝叶斯算法
2018/11/19 Python
django云端留言板实例详解
2019/07/22 Python
python实现宿舍管理系统
2019/11/22 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python打开音乐文件的实例方法
2020/07/21 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
学校安全教育月活动总结
2014/07/07 职场文书
财务统计员岗位职责
2015/04/14 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技
python中使用redis用法详解
2022/12/24 Redis
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技