AngularJS笔记—数据绑定

AngularJS,        一.数目绑定

           1.简单易行绑定

            上边达成了一个简易的加法运算的绑定,

             A.ng-app:表示该div以内都在AngularJS的接纳, 去掉ng-app=””
那么前边的绑定都将于事无补

             B.ng-models :  用于数据绑定,
也便是八个input的中间输入的新闻都会绑定到val一和val2变量里面。

             C.{{ FiledName }}: 双括号也是用于数据的绑定.

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
</script>
<head>
    <div ng-app="">
       <div >
            <input ng-model="val1" type="number" placeholder="input your number"> +
            <input ng-model="val2" type="number" placeholder="input your numer"> =
            {{ val1+val2 || 0 }}
        </div>
    </div>
</head>
<body>

</body>
</html>

            2.  $scope的使用

            上面有关联通过ng-model实现多少的绑定,其实所谓的数量绑定其实正是绑定到了$scope上.上面通过编写制定SumController方法达成了三个点击submit按钮就计算出多少个整数之和.

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<script type="text/javascript">

    function SumController($scope){
         $scope.addTwoNumber = function(){
             $scope.addNumber = $scope.val2+$scope.val1;
         };
     }

</script>
<head>
    <div ng-app="">
       <div ng-controller="SumController" >
            <input ng-model="val1" type="number" placeholder="input your number"> +
            <input ng-model="val2" type="number" placeholder="input your numer"> 
            <button ng-click="addTwoNumber()">Submit</button>
            {{ addNumber||0 }}
        </div>
    </div>
</head>
<body>
</body>
</html>

            3.$apply()用法                                                                                                   

            
上边有提到通过ng-model落成数量的绑定,其实所谓的数目绑定其实正是绑定到了$scope上.下边是二个简约的钟表程序,通过setInterval方法达成每过一秒更新clock值,在绑定中大家依然利用了apply方法.           

            A. setInterval
中调用updateClock()后会发现chrome的console中会每过一秒打字与印刷当前时间,可是界面没更新

            B. setInterval
中调用$scope.$apply(updateClock)后会发现chrome的console会每过壹秒答应叁遍当前时间,并且界面更新时间

           
C.为什么为那样?其实是调用setInterval方法循环触发updateClock方法与大家地方的经过ng-click的机制分歧.
ng-click会自动$watch,监察和控制数据变化从而立异界面。而原生JavaScript的setInterval中改变了多少无法监督到,所以要透过$apply来达成。

           
理解Angular中的$apply()以及$digest()

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<script type="text/javascript">

   function ClockController($scope){

       var updateClock = function(){
             $scope.clock = new Date();
             console.log($scope.clock); //数据观察
       }

       var clockInterval = setInterval(function(){

             // updateClock(); -- 不会更新
             $scope.$apply(updateClock);
       },1000);

       updateClock();
   }

</script>
<head>
    <div ng-app="">
       <div ng-controller="ClockController" >
            <h1>{{ clock }}</h1>
        </div>
    </div>
</head>
<body>
</body>
</html>

          二. 模块化
            
做过.net开发的都了然,在付出中我们会注解不一致的命名空间和分裂类,来贯彻代码的模块化管理,其实AngularJs同样也提供了近乎的点子,大家得以由此ng-app和ng-contrller完毕代码的模块化管理.

            
A.通过angular.module在后台注册一个模块,然后经过app.controller来添加contrller,那里的’SumController’和’TimeController’属于兄弟模块,两则之间的Scope绑定对象互不苦恼.

             B.三个html页面后台只好登记一个module,如若注册多个会报错.

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
     var app = angular.module('app',[]);
     app.controller('SumController',function($scope){
         $scope.addTwoNumber = function(){
             $scope.addNumber = $scope.val2+$scope.val1;
         };
     });

     app.controller('TimeController',function($scope){
         $scope.timeTwoNumber = function(){
             $scope.timeNumber = $scope.val2 * $scope.val1;
         };
     });

</script>
<head>
    <div ng-app="app">
       <div ng-controller="SumController" >
            <input ng-model="val1" type="number" placeholder="input your number"> +
            <input ng-model="val2" type="number" placeholder="input your numer"> 
            <button ng-click="addTwoNumber()">Submit</button>
            {{ addNumber||0 }}
        </div>
        <br/>
        <div ng-controller="TimeController">
            <input ng-model="val1" type="number" placeholder="input your number"> *
            <input ng-model="val2" type="number" placeholder="input your numer"> 
            <button ng-click="timeTwoNumber()">Submit</button>
            {{ timeNumber||0 }}
        </div>
    </div>
</head>
<body>
</body>
</html>

 

相关文章