AngularJS学习（二）

一、XHR的使用

1、何为XHR

XHR即为：XMLHttpRequest
使用xhr进行网络访问。

var app=angular.module('app',[]);
        app.controller('Controller',function($scope,$http){
            $scope.hello='hello,world!';
            $http.get('../source/test.json').success(function (data){
                $scope.phones=data;
            });
        });

当然，这里的“../source/test.json”只是一个URI地址，当然可以换成网络上的一个URI资源地址。

二、基本函数的使用

1、$scope.$watch

用于给一个module对象注册一个改变（change）的监听事件，当module改变的时候，触发一个函数。eg：

app.controller('StartUpController',function($scope){
            $scope.start={hehe:0};
            jisuan=function(){
                $scope.start.haha=$scope.start.hehe*10;
            }
            $scope.$watch('start.hehe',jisuan);
        });

当start.hehe发生改变的时候，就会触发jisuan这个函数，将$scope.start.haha的数值进行计算。
这里Dom元素的代码是：


<form ng-controller="StartUpController">
<input ng-model="start.hehe">
<hr />
result:{{start.haha}}
</form>

2、上面的事件的监听，同样可以使用ng-change进行实现

app.controller('StartUpController',function($scope){
            $scope.start={hehe:0};
            $scope.jisuan=function(){
                $scope.start.haha=$scope.start.hehe*10;
            }
        });

DOM的代码是：

<form ng-controller="StartUpController">
<input ng-change="jisuan()" ng-model="start.hehe">
<hr />
result:{{start.haha}}
</form>

仔细看的话，会发现两种方法，一个会写成$scope.jisuan,而一个是写jisuan=...就行了，大概就是使用$scope.$watch的方法中仅仅是给一个module进行事件的监听，而因为module的改变儿触发的jisuan这个函数不是归$scope管理的，换言之：不需要在dom中进行controller；而第二种，需要进行ng-change的绑定。