首页 > 代码库 > 初识angular体验(五)
初识angular体验(五)
大家好，好久不见啦，不知道朋友们这段时间学习的怎样了？都有没有提高呢？本人这期间基本把angular基础教程都看了一遍，感觉受益匪浅。
今天给大家说的是一个小知识点——全局变量，所谓全局变量懂JS的人都会明白，但是在angular里如何使用呢？让我们继续往下看。
在angualr里设置全局变量有2个函数，是以定义服务的形式注入进去的，constant()和value(),下面我看来看代码：
<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);
};
});
app.controller(‘myCtrl2‘, function($scope,myConstant) {
$scope.onclick2 = function() {
$scope.value2 = myConstant.value2 + (++myConstant.value3);
};
});<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(‘myConstant‘,{"value1":"哈哈","value2":"hello world",value3:1});
app.controller(‘myCtrl1‘, function($scope,myConstant) {
$scope.onclick1 = function() {
$scope.value1 = myConstant.value1 + (++myConstant.value3);
};
});
app.controller(‘myCtrl2‘, function($scope,myConstant) {
$scope.onclick2 = function() {
$scope.value2 = myConstant.value2 + (++myConstant.value3);
};
});上面两个代码运行的结果都是一样的，value3会随着每次点击都会增加，这样再次证明了value和constant设置全局变量的功力，有人问了两个代码运行结果一样，那有什么区别呢？
二者的区别就是value不可在config里注入，constant可以。
app.constant(‘myConstant‘,{"value1":"哈哈哈","value2":"hello world",value3:1});
app.value(‘myValue‘,{"value1":"哈哈哈","value2":"hello world",value3:1});
app.config(function(myValue){
..
});运行上面的代码会报错。
app.config(function(myConstant){
//可以得到constant定义的‘myConstant‘
});以上代码可以。
这就说明了constant可以在config中引用而value不行！好啦今天的知识点就到这里啦，下周见！！！！
本文出自 “学习改变命运” 博客，请务必保留此出处http://itzhongxin.blog.51cto.com/12734415/1919601
初识angular体验(五)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。