AngularJS學習（一）
一、angularJS簡介
1、使用angularJS可以方便的進行dom元素的操作，而不需要進行一些較為複雜的監聽類事件的註冊·
2、使用方法：
其一：本地引用js檔案：注意相對路徑的書寫就行了。
<script src="../js/angular.min.js"></script>其二：使用內容分發網路（CDN）進行載入類庫。
官方的類庫地址是
<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>，但是貌似不翻牆上不了。
二、MVC模式的使用
1、angularJS使用mvc的思想進行設計，使用module進行模型的繫結，在檢視層上進行展示，使用controller進行DOM元素的控制。
2、api的展示：
2.1、ng-app
<html ng-app>：整個html頁面的所有dom元素都會被angularJS“控制”。
2.2、ng-module
<input ng-model="query">表明這個input輸入框中的內容和一個叫“query”的module進行“雙向繫結”，所謂雙向繫結，是指“dom元素的變化會引起程式碼中繫結的module的變化，同時，程式碼控制的module的變化也會引起展示層dom元素的變化”。
2.3、ng-bind
<h5 ng-bind="result"></h5>這種繫結只是程式碼中module的變化會引起dom元素的變化，但是這種變化只有人為（程式碼）的進行控制，才會展示出來。譬如下面：
>
<input ng-model="first">
<input ng-model="second">
<hr/>
<h5 ng-bind="result"></h5>
<button ng-click="cala()">ee</button>
</body>賦予了點選事件的一個button，點選的時候進行cala計算，將結果賦給$scope.result，而這裡將result和input標籤進行繫結，既可以進行展示。和
ng-module相較而言，ng-bind更加註重一種資料的被動展示性，而ng-module則注重實時更新的特性。
2.4、ng-controller
<body ng-app="app" ng-controller="Controller">表明整個<body>中的dom將由“controller”這個控制器進行控制。
標準的使用控制器的方法有兩種：1、
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 0},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet.",
"age": 2}
];
$scope.orderProp = 'age';
}
在這個controller中，定義了“phones”這個陣列，“orderProp”這個字串常量。
2、var app=angular.module('app',[]);
app.controller('Controller',function($scope){
$scope.cala=function(){
$scope.hehe='hihihi';
var a=parseInt($scope.first,10);
var b=parseInt($scope.second,10);
$scope.result=a+b;
window.alert("sorry,you are wrong!")
}
});
這裡先定義一個module是“app”，這樣定義的好處是：可以反覆使用，在不同的<div>或者其他的需要使用這個module的標籤中使用。 繼而在這個module上面定義一個controller控制器。需要注意的是，這樣定義的話，module和controller就分離了，比放在一個<body>上定義一個controller，需要這樣說明定義：
<body ng-app="app" ng-controller="Controller">
2.5、ng-change
當資料發生改變的時候，會觸發這個
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>事實上，這種
ng-change的也可以這樣來做：
使用$scope.$watch進行監控，類似於註冊的一個監聽器。