首页 > 代码库 > 初识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体验(五)