林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka

摘要：本文要讲讲Angular中value vs. constant以及全局变量的设置

本教程使用AngularJS版本：1.5.3

AngularJs GitHub: https://github.com/angular/angular.js/

AngularJs下载地址：https://angularjs.org/

AngualrJS中设置全局变量，即每个Controller中都可以访问的变量，主要有以下几种方法：

1、通过var 直接定义global variable，相当于直接用js

2.、用angularjs rootscope来设置全局变量。

3、用angularjs value来设置全局变量。

4、用angularjs constant来设置全局变量。

5、定义服务传值

这里第1种很简单，不说。下面从第2-5来说说

一、angularjs rootscope来设置全局变量

像使用rootscope，笔者的建议是放在run中，这里其这controller中都不用引入rootscope，直接使用需要的全局变量就可以了。

appCommon.run(function($rootScope) {
$rootScope.paginationConf = {
currentPage : 1, // 分页开始
itemsPerPage : 15, // 分页每页显示条数
};
})

然后，其它Controller要用，直接

app.controller('merchantController', function($scope) {
var limit = $scope.paginationConf.itemsPerPage;
var pageIndex = $scope.paginationConf.currentPage;

.......................................
}）

这里需要注意的是，每个Controller层都会先在当前的scope找需要的变量，找不到，再到rootscope上去寻找。如果还是找不到，就会报错。

二、用angularjs value来设置全局变量

使用实例如下：

<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS学习</title>
<script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl1">
<button ng-click="onclick1()">请点击我1</button>
{{value1}}
</div>
<div ng-controller="myCtrl2">
<button ng-click="onclick2()">请点击我2</button>
{{value2}}
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.value('myValue',{"value1":"林炳文","value2":"hello world",value3:1});
app.controller('myCtrl1', function($scope,myValue) {
$scope.onclick1 = function() {
$scope.value1 = myValue.value1 + (++myValue.value3);
};
});
app.controller('myCtrl2', function($scope,myValue) {
$scope.onclick2 = function() {
$scope.value2 = myValue.value2 + (++myValue.value3);
};
});
</script>
</html>

效果：

三、用angularjs constant来设置全局变量

使用实例

<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS学习</title>
<script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl1">
<button ng-click="onclick1()">请点击我1</button>
{{value1}}
</div>
<div ng-controller="myCtrl2">
<button ng-click="onclick2()">请点击我2</button>
{{value2}}
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.constant('myConstant',{"value1":"林炳文","value2":"hello world",value3:1});
app.controller('myCtrl1', function($scope,myConstant) {
$scope.onclick1 = function() {
$scope.value1 = myConstant.value1 + (++myConstant.value3);
myConstant.value1 = $scope.value1;
myConstant.value2 = $scope.value1;
};
});
app.controller('myCtrl2', function($scope,myConstant) {
$scope.onclick2 = function() {
$scope.value2 = myConstant.value2 + (++myConstant.value3);
myConstant.value1 = $scope.value2;
myConstant.value2 = $scope.value2;
};
});
</script>
</html>

效果：

value与constant区别

value不可在config里注入，constant可以。下面是笔者做的一个测试

app.constant('myConstant',{"value1":"林炳文","value2":"hello world",value3:1});
app.value('myValue',{"value1":"林炳文","value2":"hello world",value3:1});

然后在config来引入：

app.config(function(myValue){
..
});

报错如下：

如果使用

app.config(function(myConstant){
//可以得到constant定义的'myConstant'
});

一切正常

四、定义服务传值

这是Java中最常用的方法了，其实就相当于定义一个对象的服务中，并设置get/set方法。通过这两个方法来实时更新与获取数据

<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS入门学习</title>
<script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body>
<div ng-controller="childCtrl1">
{{name}}
<button ng-click="setName()">set name to jack jack jack</button>
</div>
<div ng-controller="childCtrl2">
{{name}}
<button ng-click="setName()">set name to tom tom tom</button>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.factory('dataService', function() {
var name = '我是林炳文';
var service = {};
service.getName = function() {
return name;
};
service.setName = function(newName) {
name = newName;
};
return service;
});
app.controller('childCtrl1', function($scope,dataService) {
$scope.name = dataService.getName();
$scope.setName = function() {
dataService.setName( "set name to jack jack jack");
$scope.name = dataService.getName();
};
});
app.controller('childCtrl2', function($scope,dataService) {
$scope.name = dataService.getName();
$scope.setName = function() {
dataService.setName( "set name to tom tom tom");
$scope.name = dataService.getName();
};
});
</script>
</html>

效果：

跟我学AngularJS：全局变量设置之value vs constant vs rootscope vs 服务[转]的更多相关文章

Adobe Edge Animate –EdgeCommons Log和全局变量设置功能
Adobe Edge Animate –EdgeCommons Log和全局变量设置功能版权声明: 本文版权属于北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 一.Log功能当 ...
ios开发中全局变量设置和调用方法
ios开发中,全局变量设置和调用方法如下:在AppDelegate.h文件中设置全局变量:@interface ***AppDelegate{NSString *myName;}@property ( ...
AngularJS动态设置CSS
使用AngularJS动态设置CSS大致有2种思路: 1.通过动态设置class名称比如先定义2个样式: .show-true{ display:block;} .show-flase{ ...
跟我学AngularJs:Controller数据共享、继承、通信使用具体解释
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主讲了AngularJs中的Controller中数据共享.继承.通信的具体使用本 ...
从0开始学angularjs－笔记02
上一节课主要跟大家讲解了angularjs的几种特性和看了一个简单的双向绑定的例子.最近都没有时间写博客了....忙成狗呀...今天周末,在写一篇吧~~ 今天主要跟大家详细讲解一下angularjs的 ...
跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
iOS 全局变量设置的几种方式~
在iOS开发过程中关于全局变量的几个方法 1. 在APPDelegate中声明并初始化全局变量.AppDelegate可以在整个应用程序中调用,在其他页面中可以使用代码段获取AppDelegate的全 ...
跟我学AngularJs:Service、Factory、Provider依赖注入使用与差别
林炳文Evankaka原创作品. 转载请注明出处http://blog.csdn.net/evankaka 本教程使用AngularJs版本号:1.5.3 AngularJ ...
postman全局变量设置
1.点击小齿轮进入到变量添加页面,点击Globals添加全局变量 2.输入变量名称和变量值 3.接口中设置变量

随机推荐

C#编程（四十六）----------正则表达式
正则表达式 1.定义一个Regex类的实例 Regex regex=new Regex(“”); 这里初始化参数就是一个正则表达式,”\d”表示配置数字 2.判断是否匹配判断一个字符串,是否匹配一个 ...
hibernate 注解联合主键映射
联合主键用Hibernate注解映射方式主要有三种: 第一.将联合主键的字段单独放在一个类中,该类需要实现java.io.Serializable接口并重写equals和hascode,再将该类注解 ...
WordPress主题开发实例：get_term_by()获取指定分类链接
根据名称获取链接 <?php //根据名称获取对应的id $term=get_term_by('name','新闻动态','category'); $term_id=$term->term ...
IT狂人第一至四季/全集The IT Crowd迅雷下载
本季第一至四季 The IT Crowd (2006)看点:<IT狂人>史上最囧,最雷,最脑残,最出乎意料,最不按常理出牌的IT “精英们”登上银屏了.让超擅长收发邮件.单击和双击鼠标的I ...
Charles抓包https
Charles抓包https 灰灰是只小贱狗 2018.05.08 10:46 字数 762 阅读 7800评论 3喜欢 3 抓取HTTPS请求包,对数据进行排查检验 1.安装Charles 2.电脑 ...
[转]Hadoop Hive sql语法详解
转自 : http://blog.csdn.net/hguisu/article/details/7256833 Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式 ...
Spring框架中IoC(控制反转)的原理（转）
原文链接:Spring框架中IoC(控制反转)的原理一.IoC的基础知识以及原理: 1.IoC理论的背景:在采用面向对象方法设计的软件系统中,底层实现都是由N个对象组成的,所有的对象通过彼此的合作, ...
Verilog 加法器和减法器(1)
两个一位的二进制数x,y相加,假设和为s,进位为cout,其真值表为: 从真值表中,我们可以得到:s = x^y, cout = x&y,实现两个一位数相加的逻辑电路称为半加器. 实现该电路的 ...
2、Python特征
Python特征 Python编程语言中的定位脚本语言高阶动态编程语言简单易学 Python是一种代表简单主义思想的语言.Python的这种伪代码本质是它最大的优点之一.它使你能够专注于解决问题 ...
[leetcode]Merge Intervals @ Python
原题地址:https://oj.leetcode.com/problems/merge-intervals/ 题意: Given a collection of intervals, merge al ...