林炳文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，直接使用需要的全局变量就可以了。

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

然后，其它Controller要用，直接

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

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

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

使用实例如下：

  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="myCtrl1">
  10. <button ng-click="onclick1()">请点击我1</button>
  11. {{value1}}
  12. </div>
  13. <div ng-controller="myCtrl2">
  14. <button ng-click="onclick2()">请点击我2</button>
  15. {{value2}}
  16. </div>
  17. </body>
  18. <script type="text/javascript">
  19. var app = angular.module('myApp', []);
  20. app.value('myValue',{"value1":"林炳文","value2":"hello world",value3:1});
  21. app.controller('myCtrl1', function($scope,myValue) {
  22. $scope.onclick1 = function() {
  23. $scope.value1 = myValue.value1 + (++myValue.value3);
  24. };
  25. });
  26. app.controller('myCtrl2', function($scope,myValue) {
  27. $scope.onclick2 = function() {
  28. $scope.value2 = myValue.value2 +  (++myValue.value3);
  29. };
  30. });
  31. </script>
  32. </html>

效果：

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

使用实例

  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="myCtrl1">
  10. <button ng-click="onclick1()">请点击我1</button>
  11. {{value1}}
  12. </div>
  13. <div ng-controller="myCtrl2">
  14. <button ng-click="onclick2()">请点击我2</button>
  15. {{value2}}
  16. </div>
  17. </body>
  18. <script type="text/javascript">
  19. var app = angular.module('myApp', []);
  20. app.constant('myConstant',{"value1":"林炳文","value2":"hello world",value3:1});
  21. app.controller('myCtrl1', function($scope,myConstant) {
  22. $scope.onclick1 = function() {
  23. $scope.value1 = myConstant.value1 + (++myConstant.value3);
  24. myConstant.value1 = $scope.value1;
  25. myConstant.value2 = $scope.value1;
  26. };
  27. });
  28. app.controller('myCtrl2', function($scope,myConstant) {
  29. $scope.onclick2 = function() {
  30. $scope.value2 = myConstant.value2 +  (++myConstant.value3);
  31. myConstant.value1 = $scope.value2;
  32. myConstant.value2 = $scope.value2;
  33. };
  34. });
  35. </script>
  36. </html>

效果：

value与constant区别

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

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

然后在config来引入：

  1. app.config(function(myValue){
  2. ..
  3. });

报错如下：

如果使用

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

一切正常

四、定义服务传值

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

  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>

效果：

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

  1. Adobe Edge Animate –EdgeCommons Log和全局变量设置功能

    Adobe Edge Animate –EdgeCommons Log和全局变量设置功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 一.Log功能 当 ...

  2. ios开发中全局变量设置和调用方法

    ios开发中,全局变量设置和调用方法如下:在AppDelegate.h文件中设置全局变量:@interface ***AppDelegate{NSString *myName;}@property ( ...

  3. AngularJS动态设置CSS

    使用AngularJS动态设置CSS大致有2种思路: 1.通过动态设置class名称 比如先定义2个样式: .show-true{    display:block;} .show-flase{    ...

  4. 跟我学AngularJs:Controller数据共享、继承、通信使用具体解释

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主讲了AngularJs中的Controller中数据共享.继承.通信的具体使用 本 ...

  5. 从0开始学angularjs－笔记02

    上一节课主要跟大家讲解了angularjs的几种特性和看了一个简单的双向绑定的例子.最近都没有时间写博客了....忙成狗呀...今天周末,在写一篇吧~~ 今天主要跟大家详细讲解一下angularjs的 ...

  6. 跟我学AngularJs:AngularJs入门及第一个实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...

  7. iOS 全局变量设置的几种方式~

    在iOS开发过程中关于全局变量的几个方法 1. 在APPDelegate中声明并初始化全局变量.AppDelegate可以在整个应用程序中调用,在其他页面中可以使用代码段获取AppDelegate的全 ...

  8. 跟我学AngularJs:Service、Factory、Provider依赖注入使用与差别

    林炳文Evankaka原创作品. 转载请注明出处http://blog.csdn.net/evankaka        本教程使用AngularJs版本号:1.5.3        AngularJ ...

  9. postman全局变量设置

    1.点击小齿轮进入到变量添加页面,点击Globals添加全局变量 2.输入变量名称和变量值 3.接口中设置变量

随机推荐

  1. C#编程（三十七）----------结构比较

    结构比较 数组和元组都实现接口IStructuralEquatable和IStructuralComparable.这两个接口不仅可以比较引用,还可以比较内容.这些接口都是显示实现的,所以在使用时需要 ...

  2. 警告 7 隐藏了继承的成员。如果是有意隐藏，请使用关键字 new

    public new bool Print(string 承包方编码, MapPrint.My2Progress pMy2Progress, bool Label2ZJ)

  3. C++类静态数据成员与类静态成员函数

    from:://http://blog.csdn.net/taina2008/article/details/1684834 把类中的函数都定义成静态函数,这样相当于在编译时就分配了空间,这样不需要实 ...

  4. itunes connect 改版后无法访问的处理办法

    很悲剧,今天要提交版本,结果itunes connect改版,然后进不去了, 限于无限loading- 是网速慢吗?再等等,先吃个饭,待会再来看-   ------------------------ ...

  5. [Web 前端] SuperAgent中文使用文档

    cp from : https://blog.csdn.net/gebitan505/article/details/58585846 superagent是nodejs里一个非常方便的客户端请求代理 ...

  6. Orchard模块开发全接触2：新建 ProductPart

    一:创建 Part 1:项目引用 Orchard.Framework: 2:创建 Models 文件夹: 3:在 Models 文件夹下创建类 ProductPartRecord,如下: public ...

  7. C# 根据注册表获取当前用户的常用目录整理

    1.使用C#获取当前程序或解决方案的路径 2.使用C#获取当前登录用户的相关目录 3.也可以获取当前系统通用目录 4.获取Windows系统的目录,从注册表中获取. 一.当前用户的目录,HKEY_Cu ...

  8. emouse思·睿—评论与观点整理之五

    虽说我主要做的硬件,平时的兴趣爱好比较关注移动互联网,混迹于虎嗅.爱范儿.雷锋网.36Kr.cnBeta.瘾科技.i黑马.TechWeb等这类科技以及创业媒体,遗憾的是系统的去写的并不多,好在还算充分 ...

  9. source insight 4.0.086破解

     source insight 4.0.093 破解: 1. 安装原版软件:Source Insight Version 4.0.0093 - March 20, 2018 2. 替换原主程序:sou ...

  10. 【转载】Qt Creator 添加自定义注释

    原文:https://blog.csdn.net/liang19890820/article/details/54925434 自定义注释注释的原则是有助于对程序的阅读理解,不宜太多,也不能太少(一般 ...