跟我学AngularJS：全局变量设置之value vs constant vs rootscope vs 服务[转]

跟我学AngularJS：全局变量设置之value vs constant vs rootscope vs 服务[转]
林炳文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，直接使用需要的全局变量就可以了。
[html] view plain copy
1. appCommon.run(function($rootScope) {
2. $rootScope.paginationConf = {
3. currentPage : 1, // 分页开始
4. itemsPerPage : 15, // 分页每页显示条数
5. };
6. })
然后，其它Controller要用，直接
[html] view plain copy
1. app.controller('merchantController', function($scope) {
2. var limit = $scope.paginationConf.itemsPerPage;
3. var pageIndex = $scope.paginationConf.currentPage;
[html] view plain copy
1. .......................................
2. }）
这里需要注意的是，每个Controller层都会先在当前的scope找需要的变量，找不到，再到rootscope上去寻找。如果还是找不到，就会报错。

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

使用实例如下：
[html] view plain copy
1. <!DOCTYPE html>
2. <html lang="zh" ng-app="myApp">
4. <head>
5. <meta charset="UTF-8">
6. <title>AngularJS学习</title>
7. <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
8. </head>
10. <body>
11. <div ng-controller="myCtrl1">
12. <button ng-click="onclick1()">请点击我1</button>
13. {{value1}}
14. </div>
15. <div ng-controller="myCtrl2">
16. <button ng-click="onclick2()">请点击我2</button>
17. {{value2}}
18. </div>
19. </body>
20. <script type="text/javascript">
21. var app = angular.module('myApp', []);
22. app.value('myValue',{"value1":"林炳文","value2":"hello world",value3:1});
23. app.controller('myCtrl1', function($scope,myValue) {
24. $scope.onclick1 = function() {
25. $scope.value1 = myValue.value1 + (++myValue.value3);
26. };
27. });
28. app.controller('myCtrl2', function($scope,myValue) {
29. $scope.onclick2 = function() {
30. $scope.value2 = myValue.value2 + (++myValue.value3);
31. };
32. });
33. </script>
34. </html>
效果：

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

使用实例
[html] view plain copy
1. <!DOCTYPE html>
2. <html lang="zh" ng-app="myApp">
4. <head>
5. <meta charset="UTF-8">
6. <title>AngularJS学习</title>
7. <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
8. </head>
10. <body>
11. <div ng-controller="myCtrl1">
12. <button ng-click="onclick1()">请点击我1</button>
13. {{value1}}
14. </div>
15. <div ng-controller="myCtrl2">
16. <button ng-click="onclick2()">请点击我2</button>
17. {{value2}}
18. </div>
19. </body>
20. <script type="text/javascript">
21. var app = angular.module('myApp', []);
22. app.constant('myConstant',{"value1":"林炳文","value2":"hello world",value3:1});
23. app.controller('myCtrl1', function($scope,myConstant) {
24. $scope.onclick1 = function() {
25. $scope.value1 = myConstant.value1 + (++myConstant.value3);
26. myConstant.value1 = $scope.value1;
27. myConstant.value2 = $scope.value1;
28. };
29. });
30. app.controller('myCtrl2', function($scope,myConstant) {
31. $scope.onclick2 = function() {
32. $scope.value2 = myConstant.value2 + (++myConstant.value3);
33. myConstant.value1 = $scope.value2;
34. myConstant.value2 = $scope.value2;
35. };
36. });
37. </script>
38. </html>
效果：

value与constant区别

value不可在config里注入，constant可以。下面是笔者做的一个测试
[html] view plain copy
1. app.constant('myConstant',{"value1":"林炳文","value2":"hello world",value3:1});
2. app.value('myValue',{"value1":"林炳文","value2":"hello world",value3:1});
然后在config来引入：
[html] view plain copy
1. app.config(function(myValue){
2. ..
3. });
报错如下：

如果使用
[html] view plain copy
1. app.config(function(myConstant){
2. //可以得到constant定义的'myConstant'
3. });
一切正常

四、定义服务传值

这是Java中最常用的方法了，其实就相当于定义一个对象的服务中，并设置get/set方法。通过这两个方法来实时更新与获取数据
[html] view plain copy
1. <!DOCTYPE html>
2. <html lang="zh" ng-app="myApp">
3. <head>
4. <meta charset="UTF-8">
5. <title>AngularJS入门学习</title>
6. <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
7. </head>
8. <body>
9. <div ng-controller="childCtrl1">
10. {{name}}
11. <button ng-click="setName()">set name to jack jack jack</button>
12. </div>
13. <div ng-controller="childCtrl2">
14. {{name}}
15. <button ng-click="setName()">set name to tom tom tom</button>
16. </div>
17. </body>
18. <script type="text/javascript">
19. var app = angular.module('myApp', []);
20. app.factory('dataService', function() {
21. var name = '我是林炳文';
22. var service = {};
23. service.getName = function() {
24. return name;
25. };
26. service.setName = function(newName) {
27. name = newName;
28. };
29. return service;
30. });
31. app.controller('childCtrl1', function($scope,dataService) {
32. $scope.name = dataService.getName();
33. $scope.setName = function() {
34. dataService.setName( "set name to jack jack jack");
35. $scope.name = dataService.getName();
36. };
37. });
38. app.controller('childCtrl2', function($scope,dataService) {
39. $scope.name = dataService.getName();
40. $scope.setName = function() {
41. dataService.setName( "set name to tom tom tom");
42. $scope.name = dataService.getName();
43. };
44. });
45. </script>
46. </html>
效果：
相关阅读:
分类、回归问题Loss
eclipse导入原代码打包war包的方法
 linux安装java,tomcat,mysql
将代码部署到tomcat的方式
 记一次电脑密码重置恢复的过程win11
java内部类与静态内部类
 Ribbon 实现客户端负载均衡与LoadBalanced注解
 公式选股基本定义和函数，常用例子
 How To: Use C Macros Efficiently in Your Code
ASP.NET 将DataTable解析成JSON
原文地址：https://www.cnblogs.com/fx2008/p/5438738.html

跟我学AngularJS：全局变量设置之value vs constant vs rootscope vs 服务[转]

一、angularjs rootscope来设置全局变量

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

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

四、定义服务传值