AngularJS四大特效
MVC模式、模塊化設計、自動化雙向數據綁定、依賴注入
如果了解了后端開發知識，想必對這些詞匯不會陌生，AngularJS融合了后端開發的一些思想，雖然身為前端框架，但與jQuery框架卻是完全不相同的東西。
AngularJS分為幾個模塊，需要使用哪個模塊的功能，就直接引入對應的模塊，這種模塊化設計具備高內聚、低耦合的特點。
官方提供的模塊有：ng、ngRoute、ngAnimate
用戶也可以自定義模塊：angular.module('模塊名', [])
這里的ng是引擎engine的縮寫，類似於Nginx的Ngin也是engine的縮寫(諧音？)
Demo1 - 表達式
在當前目錄下新建一個demo-1.html文件，並將angular.min.js文件放置在同一目錄下。
<html>
<head>
<title>AngularJS入門小Demo-1 表達式</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>
通過在html中引入angular.min.js，並在body標簽中加入ng-app指令，則會對{{}}里的表達式進行計算。雙擊打開這個html文件，會發現頁面顯示的是200，如果不加載ng-app指令，頁面顯示的則是{{100+100}}。
Demo2 - 雙向綁定
<html>
<head>
<title>AngularJS入門小Demo-2 雙向綁定</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
請輸入姓名：<input ng-model="name"><br>
請輸入姓名：<input ng-model="name"><br>
{{name}}
</body>
</html>
通過ng-model來綁定變量，雙擊上邊的頁面文件，在任意一個輸入框中輸入字符，都會影響到綁定同一變量的標簽元素。比起用js或者jQuery來實現這個功能，AngularJS的寫法要簡單快捷很多。
Demo3 - 初始化指令
<html>
<head>
<title>AngularJS入門小Demo-3 初始化指令</title>
<script src="angular.min.js"></script>
</head>
<body ng-app ng-init="name='JOJO'">
請輸入姓名：<input ng-model="name"><br>
{{name}}
</body>
</html>
通過ng-init指令來對變量進行初始化，比如上邊的html頁面，在打開或刷新后，name變量的值會被初始化為JOJO。
Demo4 - 控制器
<html>
<head>
<title>AngularJS入門小Demo-4 控制器</title>
<script src="angular.min.js"></script>
<script>
//建立模塊
//第一個參數是自定義的模塊名，第二個參數是引用的模塊名
var app = angular.module("myApp", []);
//創建控制器
app.controller("myController", function($scope){
$scope.add = function() {
return parseInt($scope.x) + parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
第一個數：<input ng-model="x"><br>
第二個數：<input ng-model="y">
結果：{{add()}}
</body>
</html>
自定義一個模塊，為模塊創建一個控制器，控制器里可以定義一些邏輯來處理綁定的變量。這里的控制器也有個參數$scope，這個參數表示作用域，可以通過該作用域來獲取操作變量，它就是視圖層和控制層交互數據的橋梁。
更多和$scope相關的，可以了解下這篇文章關於AngularJS學習整理---淺談$scope(作用域) 新手必備！。
Demo5 - 事件指令
<html>
<head>
<title>AngularJS入門小Demo-5 事件指令</title>
<script src="angular.min.js"></script>
<script>
//建立模塊
//第一個參數是自定義的模塊名，第二個參數是引用的模塊名
var app = angular.module("myApp", []);
//創建控制器
app.controller("myController", function($scope){
$scope.add = function() {
return $scope.z = parseInt($scope.x) + parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
第一個數：<input ng-model="x"><br>
第二個數：<input ng-model="y">
<button ng-click="add()">運算</button><br>
結果：{{z}}
</body>
</html>
ng-click表示事件指令，類似於js里的綁定事件的用法。
Demo6 - 循環數組
<html>
<head>
<title>AngularJS入門小Demo-6 循環數組</title>
<script src="angular.min.js"></script>
<script>
//建立模塊
//第一個參數是自定義的模塊名，第二個參數是引用的模塊名
var app = angular.module("myApp", []);
//創建控制器
app.controller("myController", function($scope){
$scope.list = [101, 252, 345, 836];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>
使用ng-repeat來循環數組，類似於foreach的遍歷操作。
Demo7 - 循環對象數組(JSON)
<html>
<head>
<title>AngularJS入門小Demo-7 循環對象數組</title>
<script src="angular.min.js"></script>
<script>
//建立模塊
//第一個參數是自定義的模塊名，第二個參數是引用的模塊名
var app = angular.module("myApp", []);
//創建控制器
app.controller("myController", function($scope){
$scope.list = [
{name:'張三', math:99, chinese:88},
{name:'李四', math:17, chinese:46},
{name:'趙五', math:60, chinese:60}
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>學科</td>
<td>分數</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.math}}</td>
<td>{{entity.chinese}}</td>
</tr>
</table>
</body>
</html>
實際應用中前后端一般通過JSON對象來交互，和上邊的demo類似。
Demo8 - 內置服務$http
前端數據一般從后端獲得，我們一般使用AngularJS的內置服務$http來獲取后端數據，下邊的demo需要在容器中運行(比如Tomcat)。
首先建立一個demo-8.html文件，將頁面和angular.min.js一起放置到web項目的webapp目錄下。
<html>
<head>
<title>AngularJS入門小Demo-8 內置服務$http</title>
<script src="angular.min.js"></script>
<script>
//建立模塊
//第一個參數是自定義的模塊名，第二個參數是引用的模塊名
var app = angular.module("myApp", []);
//創建控制器
app.controller("myController", function($scope, $http){
$scope.findList = function() {
$http.get("data.json").success(
function(response) {
$scope.list = response;
}
);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
<table>
<tr>
<td>姓名</td>
<td>學科</td>
<td>分數</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.math}}</td>
<td>{{entity.chinese}}</td>
</tr>
</table>
</body>
</html>
接着在同一目錄下，新建一個data.json文件，內容如下：
[
{"name":"張三", "math":99, "chinese":88},
{"name":"李四", "math":17, "chinese":46},
{"name":"趙五", "math":60, "chinese":60}
]
需要注意的是，在.json文件中的數據必須嚴格遵守JSON的規范，所有key必須使用雙引號，value除了數值型以外的類型也必須使用雙引號。在Demo7中由於是在js中書寫的，所以可以不必遵守嚴格的JSON格式。另外可以看到，這個$http的用法和AJAX很相似，其實其內部就是封裝的AJAX。
本文最后附上所有demo源碼，demo-8在里邊的web項目里。可以通過mvn tomcat7:run來啟動該web項目(或者雙擊源碼里的start.bat來啟動項目)，接着在瀏覽器地址欄輸入localhost:8080/demo-8.html，即可得到該JSON數據。