AngularJS學習教程
簡介
AngularJS 是Google的一個 JavaScript 框架，旨在簡化前端應用程序的開發。
AngularJS 是比較新的技術，版本 1.0 是在 2012 年發佈的。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。
AngularJS 是以一個 JavaScript 文件形式發佈的，可通過 script 標籤添加到網頁中
參考教程：
http://www.runoob.com/angularjs/angularjs-intro.html
引入方式：
<script src="http://{cdn.static}/libs/1.5.8/angular.min.js"></script>Demo運行地址：
http://www.runoob.com/try/try.php?filename=try_ng_intro遊覽器兼容性：
AngularJS 1.3以後拋棄了對IE8的支持。
AngularJS 1.2將繼續支持IE8
如果出現兼容性問題，請找度娘，G哥解決吧！
特性：
1) 雙向的數據綁定
2) HTML模板
3) MVVM（Moodel-View-ViewModel）
4) 依賴注入
5) Directives（指令）
6) 內置測試用例
接下來針對AngularJS 的特性一一做介紹，詳細的標籤使用大家可以參考教程自己深度挖掘。
雙向數據綁定
數據綁定可能是AngularJS最酷最實用的特性。它能夠幫助你避免書寫大量的初始代碼從而節約開發時間。
你可以聲明綁定的模型到 HTML 元素。當模型發生變化時，視圖會自動更新，反之亦然。這可以減少大量的傳統樣板代碼，保持模型和視圖同步。
Demo1：
Input輸入框和<h1>元素的雙向綁定：
Input輸入框數據的變化會被自動的更新到<h1>元素中，相對於jquery而言，避免聯動代碼的開發，讓頁面變的更清潔。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>Demo2：
checkbox和按鈕是否可以點擊雙向綁定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">點我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按鈕
</p>
<p>
{{ mySwitch }}
</p>
</div>
</body>
</html>HTML模板
AngularJS 使用 HTML 模板，這使事情變得簡單，並允許設計人員和開發人員同時工作。
最大的好處是爲設計師和開發者創建了一個緊密的工作流。設計師可以像往常一樣開發標籤，然後開發者拿過來添加上功能，通過數據綁定將會使得這個過程非常簡單。
Demo3：
將標題屬性綁定到<h1>標籤中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">{{x}}</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"菜鳥教程1",
"菜鳥教程2",
"菜鳥教程3",
"菜鳥教程4",
]
});
</script>
</body>
</html>Demo4：
循環圖片數組並且加入img模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function AlbumCtrl($scope) {
$scope.images = [
{"thumbnail":"img/image_01.jpg", "description":"Image 01 description"},
{"thumbnail":"img/image_02.jpg", "description":"Image 02 description"},
{"thumbnail":"img/image_03.jpg", "description":"Image 03 description"},
{"thumbnail":"img/image_04.jpg", "description":"Image 04 description"},
{"thumbnail":"img/image_05.jpg", "description":"Image 05 description"},
]
});
</script>
</body>
</html>MVVM（Moodel-View-ViewModel）
MVVM模式是Model-View-ViewMode（模型-視圖-視圖模型）模式的簡稱，其最早出現在微軟的WPF和Silverlight框架中。MVVM模式利用框架內置的雙向綁定技術對MVP（Model-View-Presenter）模式的變型，引入了專門的ViewModel（視圖模型）來實現View和Model的粘合，讓View和Model的進一步分離和解耦。
雙向綁定確實非常使用，通過封裝雙向綁定中間加了一個概念層ViewMode。
個人感覺跟jquery的mvc基本類似，只不過jquery需要額外的大量js開發。
依賴注入
依賴注入（Dependency Injection，即DI）
AngularJS擁有內建的依賴注入子系統，可以幫助開發人員更容易的開發，理解和測試應用。
DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個東西，DI負責找創建並且提供給我們。
得到核心的AngularJS服務，只需要添加一個簡單服務作爲參數，AngularJS會偵測並且提供給你：
function EditCtrl($scope, $location, $routeParams) {
// Something clever here...
}Demo5：
循環圖片數組並且加入img模板：
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 依賴注入</title>
</head>
<body>
<h2>AngularJS 依賴注入</h2>
<div ng-app = "mainApp" ng-controller = "CalcController">
<p>輸入一個數字: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>結果: {{result}}</p>
</div>
<script src="../angular.min.js"></script>
<script>
<span style="background-color: rgb(255, 255, 0);">// 定義一個模塊</span>
var mainApp = angular.module("mainApp", []);
<span style="background-color: rgb(255, 255, 0);">// 使用 value給defaultInput賦值</span>
mainApp.value("defaultInput", 5);
<span style="background-color: rgb(255, 255, 0);">// 創建MathService的factory和具體的方法 </span>
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
});
<span style="background-color: rgb(255, 255, 0);">// 封裝一個CalcService暴露調用</span>
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
<span style="background-color: rgb(255, 255, 0);">// 將CalcService和參數傳遞到控制器</span>
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
</script>
</body>
</html>Directives（指令）
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。
除了內置的指令以外，
還可以用來創建自定義的標籤。它們可以用來裝飾元素或者操作DOM屬性。
內置指令
ng-app 指令初始化一個 AngularJS 應用程序。
ng-init 指令初始化應用程序數據。
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。
ng-repeat 指令會重複一個 HTML 元素
Demo6：
<span style="background-color: rgb(255, 255, 51);"><!-- 指定一個AngularJS程序，並初始化 firstName 爲 'John' --></span>
<div ng-app="" ng-init="firstName='John'">
<p>在輸入框中嘗試輸入：</p>
<span style="background-color: rgb(255, 255, 0);"><!-- 將<input/>的輸入值綁定到firstName變量 --> </span>
<p>姓名：<input type="text" ng-model="firstName"></p>
<span style="background-color: rgb(255, 255, 0);"><!-- 輸出firstName變量 --></span>
<p>你輸入的爲： {{ firstName }}</p>
</div>自定義指令
其實就是自定義標籤
Demo7：
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Directives（自定義指令）</title>
</head>
<body>
<h2>AngularJS Directives（自定義指令）</h2>
<div ng-app="myApp">
<span style="background-color: rgb(255, 255, 0);"><!-- 自定義標籤使用 --> </span>
<runoob-directive></runoob-directive>
</div>
<script src="../angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
<span style="background-color: rgb(255, 255, 0);">//使用directive聲明標籤注意格式遇到大寫字母會加【-】 </span>
app.directive("runoobDirective", function() {
return {
template : "<h3>h3大小的自定義指令!</h3>"
};
});
</script>
</body>
</html>內置測試用例
暫時使用不到！當AngularJS的代碼量達到一定程度纔會用到。
需要使用karma和jasmine來進行ng模塊的單元測試.
什麼是Karma？
karma是一個單元測試的運行控制框架,提供以不同環境來運行單元測試,比如chrome,firfox,phantomjs等,測試框架支持jasmine,mocha,qunit,是一個以nodejs爲環境的npm模塊.
什麼是jasmine？
jasmine是一個行爲驅動開發的測試框架,不依賴任何js框架以及dom,是一個非常乾淨以及友好API的測試庫.
參考教程：
http://www.jb51.net/article/58230.htm