跟我學AngularJS：全局變量設置之value vs constant vs rootscope vs 服務[轉]

時間 2019-11-19

標籤 angularjs 全局變量設置 value constant rootscope 服務欄目 AngularJS 简体版

原文原文鏈接

林炳文Evankaka原創做品。轉載請註明出處http://blog.csdn.net/evankakajavascript

摘要：本文要講講Angular中value vs. constant以及全局變量的設置html

本教程使用AngularJS版本：1.5.3java

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

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

AngualrJS中設置全局變量，即每一個Controller中均可以訪問的變量，主要有如下幾種方法：github

一、經過var 直接定義global variable，至關於直接用jsapp

2.、用angularjs rootscope來設置全局變量。學習

三、用angularjs value來設置全局變量。測試

四、用angularjs constant來設置全局變量。spa

五、定義服務傳值

這裏第1種很簡單，不說。下面從第2-5來講說

1、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上去尋找。若是仍是找不到，就會報錯。

2、用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>

效果：

3、用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'
});

一切正常

4、定義服務傳值

這是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>

效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。