AngularJS笔记—数据绑定

        一.数据绑定

           1.简短绑定

            下面实现了一个简便的加法运算的绑定,

             A.ng-app:表示该div以内且以AngularJS的行使, 去丢ng-app=””
那么后面的绑定都用无济于事

             B.ng-models :  用于数据绑定,
也不怕是少数只input的里输入的消息还见面绑定到val1和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会每过1秒答应同糟当前工夫,并且界面更新时间

           
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>

 

相关文章