[セットトップ]AngularJS:グローバル変数設定のvalue vs constant vs rootscope vsサービス

7793 ワード

林炳文エヴァンカカのオリジナル作品.転載は出典を明記してください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でグローバル変数を設定します.つまり、コントローラごとにアクセスできる変数には、主に次のような方法があります.
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：全局变量设置之value vs constant vs rootscope vs 服务_第1张图片

三、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>

効果:

[置顶] 跟我学AngularJS：全局变量设置之value vs constant vs rootscope vs 服务_第2张图片

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){
..
});

エラーは次のとおりです.

[置顶] 跟我学AngularJS：全局变量设置之value vs constant vs rootscope vs 服务_第3张图片

使用する場合

app.config(function(myConstant){
//    constant   'myConstant'
});

すべて正常
四、サービス伝達値の定義
これはjavaで最もよく使われる方法ですが、実際にはオブジェクトを定義するサービスでget/setメソッドを設定することに相当します.この2つの方法でリアルタイムでデータを更新および取得

<!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 服务_第4张图片

変数から別のクラスメソッドを再定義する方法

JSON形式ファイルでのEC2インスタンス起動