初识angular体验(五)

前端之家收集整理的这篇文章主要介绍了初识angular体验(五)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

大家好,好久不见啦,不知道朋友们这段时间学习的怎样了?都有没有提高呢?本人这期间基本把angular基础教程都看了一遍,感觉受益匪浅。

今天给大家说的是一个小知识点――全局变量,所谓全局变量懂JS的人都会明白,但是在angular里如何使用呢?让我们继续往下看。

在angualr里设置全局变量有2个函数,是以定义服务的形式注入进去的,constant()和value(),下面我看来看代码

<divng-controller="myCtrl1">
<buttonng-click="onclick1()">请点击我1</button>
{{value1}}
</div>
<divng-controller="myCtrl2">
<buttonng-click="onclick2()">请点击我2</button>
{{value2}}
</div>
</body>
<scripttype="text/javascript">
varapp=angular.module('myApp',[]);
app.constant('myConstant',{"value1":"哈哈","value2":"helloworld",value3:1});
app.controller('myCtrl1',function($scope,myConstant){
$scope.onclick1=function(){
$scope.value1=myConstant.value1+(++myConstant.value3);

};
});
app.controller('myCtrl2',myConstant){
$scope.onclick2=function(){
$scope.value2=myConstant.value2+(++myConstant.value3);

};
});
<divng-controller="myCtrl1">
<buttonng-click="onclick1()">请点击我1</button>
{{value1}}
</div>
<divng-controller="myCtrl2">
<buttonng-click="onclick2()">请点击我2</button>
{{value2}}
</div>
</body>
<scripttype="text/javascript">
varapp=angular.module('myApp',[]);
app.value('myConstant',myConstant){
$scope.onclick2=function(){
$scope.value2=myConstant.value2+(++myConstant.value3);

};
});

上面两个代码运行的结果都是一样的,value3会随着每次点击都会增加,这样再次证明了value和constant设置全局变量的功力,有人问了两个代码运行结果一样,那有什么区别呢?

二者的区别就是value不可在config里注入,constant可以。

app.constant('myConstant',{"value1":"哈哈哈",value3:1});
app.value('myValue',value3:1});
app.config(function(myValue){
..
});

运行上面的代码会报错。

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

以上代码可以。

这就说明了constant可以在config中引用而value不行!好啦今天的知识点就到这里啦,下周见!!!!

猜你在找的Angularjs相关文章