你的位置:首页 > Java教程

[Java教程]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>