歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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

一些AngularJS相關文章鏈接

AngularJS權威教程 清晰PDF版  http://www.linuxidc.com/Linux/2015-01/111429.htm

希望你喜歡,並分享我的工作~帶你走近AngularJS系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹:請點這裡
AngularJS 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved