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>