跟我学AngularJS：全局变量设置之value vs constant vs rootscope vs 服务[转]
2016-04-27 14:24
686 查看
林炳文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来说说
[html] view plain copy
appCommon.run(function($rootScope) {
$rootScope.paginationConf = {
currentPage : 1, // 分页开始
itemsPerPage : 15, // 分页每页显示条数
};
})
然后，其它Controller要用，直接
[html] view plain copy
app.controller('merchantController', function($scope) {
var limit = $scope.paginationConf.itemsPerPage;
var pageIndex = $scope.paginationConf.currentPage;
[html] view plain copy
.......................................
}）
这里需要注意的是，每个Controller层都会先在当前的scope找需要的变量，找不到，再到rootscope上去寻找。如果还是找不到，就会报错。
[html] view plain copy
<!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>
效果：
[html] view plain copy
<!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可以。下面是笔者做的一个测试
[html] view plain copy
app.constant('myConstant',{"value1":"林炳文","value2":"hello world",value3:1});
app.value('myValue',{"value1":"林炳文","value2":"hello world",value3:1});
然后在config来引入：
[html] view plain copy
app.config(function(myValue){
..
});
报错如下：
如果使用
[html] view plain copy
app.config(function(myConstant){
//可以得到constant定义的'myConstant'
});
一切正常
[html] view plain copy
<!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>
效果：
摘要：本文要讲讲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，直接使用需要的全局变量就可以了。[html] view plain copy
appCommon.run(function($rootScope) {
$rootScope.paginationConf = {
currentPage : 1, // 分页开始
itemsPerPage : 15, // 分页每页显示条数
};
})
然后，其它Controller要用，直接
[html] view plain copy
app.controller('merchantController', function($scope) {
var limit = $scope.paginationConf.itemsPerPage;
var pageIndex = $scope.paginationConf.currentPage;
[html] view plain copy
.......................................
}）
这里需要注意的是，每个Controller层都会先在当前的scope找需要的变量，找不到，再到rootscope上去寻找。如果还是找不到，就会报错。
二、用angularjs value来设置全局变量
使用实例如下：[html] view plain copy
<!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来设置全局变量
使用实例[html] view plain copy
<!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可以。下面是笔者做的一个测试
[html] view plain copy
app.constant('myConstant',{"value1":"林炳文","value2":"hello world",value3:1});
app.value('myValue',{"value1":"林炳文","value2":"hello world",value3:1});
然后在config来引入：
[html] view plain copy
app.config(function(myValue){
..
});
报错如下：
如果使用
[html] view plain copy
app.config(function(myConstant){
//可以得到constant定义的'myConstant'
});
一切正常
四、定义服务传值
这是Java中最常用的方法了，其实就相当于定义一个对象的服务中，并设置get/set方法。通过这两个方法来实时更新与获取数据[html] view plain copy
<!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:Service、Factory、Provider依赖注入使用与区别
- AngularJs ng-route路由详解
- AngularJS（1）——AngularJS指令机制
- angularJS directive详解
- angularjs开发中的坑
- angularJs依赖注入写法
- angularJs依赖注入服务
- [置顶] 跟我学AngularJs:AngulaJs开发技巧汇总（持续更新）
- angular自定义指令
- [Angular 2] Passing Observables into Components with Async Pipe
- [Angular 2] Dispatching Action with Payloads and type to Reducers
- Part 21 to 22 AngularJS anchorscroll
- angularjs 动态生成多个checkboxs，但只能选择一个
- angular控制器之间的通信
- 创建自己的AngularJS - 作用域继承（一）
- AngularJS基础
- 基于angularjs的瀑布流插件angular-waterfull.js
- angularJS 事件广播与接收[转]
- 学习angularjs总结（一）
- [Angularjs]ng-include 包含