一.数据绑定

? ? ? ? ? 1.简单绑定

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

? ? ? ? ? ? A.ng-app：表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效

? ? ? ? ? ? B.ng-models :? 用于数据绑定, 也就是两个input的里面输入的信息都会绑定到val1和val2变量里面。

? ? ? ? ? ? C.{{ FiledName }}: 双括号也是用于数据的绑定.

?

<script src="angular.min.js">
<script type="text/java script">


? ?

?

? ? ? ? ? ? 2.? $scope的使用

? ? ? ? ? ? 上面有提到通过ng-model实现数据的绑定，其实所谓的数据绑定其实就是绑定到了$scope上.下面通过编写SumController方法实现了一个点击submit按钮就计算出两个整数之和.

?

<script src="angular.min.js">
<script type="text/java script">
?
? ? function SumController($scope){
? ? ? ? $scope.addTwoNumber = function(){
? ? ? ? ? ? $scope.addNumber = $scope.val2+$scope.val1;
? ? ? ? };
? ? }
? ?


? ?

?

? ? ? ? ? ? 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,监控数据变化从而更新界面。而原生java script的setInterval中更改了数据无法监控到，所以要通过 apply来实现。

? ? ? ? ? ? 理解Angular中的apply()以及 digest()

?

<script src="angular.min.js">
<script type="text/java script">
?
? function ClockController($scope){

? ? ? var updateClock = function(){
? ? ? ? ? ? $scope.clock = new Date();
? ? ? ? ? ? console.log($scope.clock); //数据观察
? ? ? }

? ? ? var clockInterval = setInterval(function(){

? ? ? ? ? ? // updateClock(); -- 不会更新
? ? ? ? ? ? $scope.$apply(updateClock);
? ? ? },1000);

? ? ? updateClock();
? }

? ?

?

? ? ? ? ? 二. 模块化
? ? ? ? ? ? 做过.net开发的都知道，在开发中我们会声明不同的命名空间和不同类，来实现代码的模块化管理，其实AngularJs同样也提供了类似的方法，我们可以通过ng-app和ng-contrller实现代码的模块化管理.

? ? ? ? ? ? A.通过angular.module在后台注册一个模块,然后通过app.controller来添加contrller,这里的'SumController'和'TimeController'属于兄弟模块，两则之间的Scope绑定对象互不干扰.

? ? ? ? ? ? B.一个html页面后台只能注册一个module，如果注册多个会报错.

?

<script src="angular.min.js">
<script type="text/java script">
? ? 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;
? ? ? ? };
? ? });
? ? ?


? ?

一些AngularJS相关文章链接：

希望你喜欢，并分享我的工作~带你走近AngularJS系列：