AngularJS筆記---數據綁定

時間 2019-11-08

標籤 angularjs 筆記數據綁定欄目 AngularJS 简体版

原文原文鏈接

一.數據綁定javascript

1.簡單綁定html

下面實現了一個簡單的加法運算的綁定,java

A.ng-app：表示該div之內都在AngularJS的應用, 去掉ng-app="" 那麼後面的綁定都將無效chrome

B.ng-models : 用於數據綁定, 也就是兩個input的裏面輸入的信息都會綁定到val1和val2變量裏面。app

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"> =
            <span>{{ val1+val2 || 0 }}</span>
        </div>
    </div>
</head>
<body>

</body>
</html>

2. $scope的使用ui

上面有提到經過ng-model實現數據的綁定，其實所謂的數據綁定其實就是綁定到了$scope上.下面經過編寫SumController方法實現了一個點擊submit按鈕就計算出兩個整數之和.spa

<!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>
            <span>{{ addNumber||0 }}</span>
        </div>
    </div>
</head>
<body>
</body>
</html>

3.$apply()用法 .net

上面有提到經過ng-model實現數據的綁定，其實所謂的數據綁定其實就是綁定到了$scope上.下面是一個簡單的時鐘程序，經過setInterval方法實現每過一秒更新clock值，在綁定中咱們仍是用到了apply方法. code

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>
            <span>{{ addNumber||0 }}</span>
        </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>
            <span>{{ timeNumber||0 }}</span>
        </div>
    </div>
</head>
<body>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。