以前整理的，可供參考。
安裝：
1.首先要安裝node.js和它的npm包管理系統。（nodejs相關待整理）
2.安裝grunt
.grunt是一個基於任務的Javascript工程命令行構建工具。
在dos窗口輸入：npm install grunt-cli -g
具體模塊安裝：npm install(grunt或grunt模塊的名稱) --save-dev
3.安裝Karma runner
在dos窗口輸入：npm install karma-cli -g
安裝Karma：npm install karma --save-dev
安裝你項目需要的組件：npm install karma-jasmine karma-chrome-launcher --sava-dev
4.下載angular.js
在這個網站下載：https://code.angularjs.org/
選定一個2.0以前的版本。
一、AngularJS簡介
AngularJS是一個JavaScript框架。它可通過<script>標簽添加到HTML頁面。
AngularJS通過指令擴展了HTML，且通過表達式綁定數據到HTML。
1.AngularJS通過ng-directives擴展了HTML。
Ng-app指令定義一個AngularJS應用程序。
Ng-model指令把元素值（比如輸入域的值）綁定到應用程序。
Ng-bind指令把應用程序數據綁定到HTML視圖。
2.什么是AngularJS
AngularJS使得開發現代的單一頁面應用程序變得更加容易。
·AngularJS把應用程序數據綁定到HTML元素。
·AngularJS可以克隆和重復HTML元素。
·AngularJS可以隱藏和顯示HTML元素。
·AngularJS可以在HTML元素“背后”添加代碼。
·AngularJS支持輸入驗證。
3.AngularJS指令
AngularJS指令是以ng作為前綴的HTML屬性。
Ng-init指令初始化AngularJS應用程序變量。
* HTML5允許擴展的（自制的）屬性，以data-開頭。
AngularJS屬性以ng-開頭，但是可以使用data-ng-來讓網頁對HTML5有效。
4.AngularJS表達式
AngularJS表達式寫在雙大括號內：{{expression}}。
AngularJS表達式把數據綁定到HTML，這與ng-bind指令有異曲同工之妙。
AngularJS將在表達式書寫的位置“輸出”數據。
AngularJS表達式很像Javascript表達式：它們可以包含文字、運算符和變量。
5.AngularJS應用
AngularJS模塊（module）定義了AngularJS應用。
AngularJS控制器（Controller）用於控制AngularJS應用。
Ng-app指令定義了應用，ng-controller定義了控制器。
AngularJS模塊定義應用：
Var app = angular.module(‘myApp’,{});
AngularJS控制器控制應用：
App.controller(‘myCtrl’,function($scope){ $scope.firstName = “John”; $scope.lastName = “Doe”; })
二、AngularJS表達式
AngularJS使用表達式把數據綁定到HTML。
1.AngularJS數字
<div ng-app=”” ng-init=”quantity=1;cost=5”>
<p>總價：{{quantity * cost}}</p>
</div>
使用ng-bind的相同實例：
<div ng-app=”” ng-init=”quantity=1;cost=5”> <p>總價：<span ng-bind=”quantity * cost”></span></p> </div>
2.AngularJS字符串
<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe’”> <p>姓名：{{firstName + “ “ + lastName}}</p> </div>
使用ng-bind的相同實例：
<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe’”> <p>姓名：<span ng-bind=”firstName + ‘ ‘ + lastName”></span></p> </div>
3.AngularJS對象
<div ng-app=”” ng-init=”person={firstName:’John’,lastName:’Doe’}”> <p>姓為{{person.lastName}}</p> </div>
4.AngularJS數組
<div ng-app=”” ng-init=”points=[1,15,19,2,40]”> <p>第三個值為{{points[2]}}</p> </div>
5.AngularJS表達式與JavaScript表達式
類似於JavaScript表達式，AngularJS表達式可以包含字母，操作符，變量。
與JavaScript表達式不同，AngularJS表達式可以寫在HTML中；AngularJS表達式不支持條件判斷，循環及異常；AngularJS表達式支持過濾器。
三、AngularJS指令
AngularJS通過被稱為指令的新屬性來擴展HTML。
AngularJS通過內置的指令來為應用添加功能。
AngularJS允許你自定義指令。
1.AngularJS指令
AngularJS指令是擴展的HTML屬性，帶有前綴ng-。
Ng-app指令初始化一個AngularJS應用程序。
Ng-init指令初始化應用程序數據。
Ng-model指令把元素值（比如輸入域的值）綁定到應用程序。
2.數據綁定
AngularJS中的數據綁定，同步了AngularJS表達式與AngularJS數據。
在下一個示例中，兩個文本域是通過兩個ng-model指令同步的。
<div ng-app=”” ng-init=”quantity=1;price=5;”> <h2>價格計算器</h2> 數量：<input type=”number” ng-model=”quantity”> 價格：<input type=”number” ng-model=”price”> <p><b>總價：</b>{{quantity*price}}</p> </div>
3.重復HTML元素
Ng-repeat指令會重復一個HTML元素：
<div ng-app=”” ng-init=”names=[‘Jani’,’Hege’,’Kai’]”> <p>使用ng-repeat來循環數組</p> <ul> <li ng-repeat=”x in names”> {{x}} </li> </ul> </div>
Ng-repeat指令用在一個對象數組上：
<div ng-app=”” ng-init=”names=[{name:’Jani’,country:’Norway’},{name:’Hege’,country:’Sweden’},{name:’Kai’,country:’Denmark’}]”> <p>循環對象：</p> <ul> <li ng-repeat=”x in names”> {{x.name + ‘,’ + x.country}} </li> </ul> </div>
* AngularJS完美支持數據庫的CRUD（增加Create、讀取Read、更新Update、刪除Delete）應用程序。把實例中的對象想象成數據庫中的記錄。
4.ng-app指令
Ng-app指令定義了AngularJS應用程序的根元素。
Ng-app指令在網頁加載完畢時會自動引導（自動初始化）應用程序。
5.ng-init指令
Ng-init指令為AngularJS應用程序定義了初始值。
通常情況下，不使用ng-init。您將使用一個控制器或模塊來代替它。
6.ng-model指令
Ng-model指令綁定HTML元素到應用程序數據。
Ng-model指令也可以：
·為應用程序數據提供類型驗證（number、email、required）。
·為應用程序數據提供狀態（invalid、dirty、touched、error）。
·為HTML元素提供CSS類。
·綁定HTML元素到HTML表單。
7.ng-repeat指令
Ng-repeat指令對於集合中（數組中）的每個項會克隆一次HTML元素。
8.創建自定義的指令
可以使用.directive函數來添加自定義的指令。
要調用自定義指令，HTML元素上需要添加自定義指令名。
使用駝峰法來命名一個指令，runoobDirective，但在使用它時需要以-分割，runoob-directive：
<body ng-app=”myApp”> <runoob-directive></runoob-directive> <script> Var app = angular.module(“myApp”,[]); App.directive(“runoobDirective”,function(){ Return{ Template : “<h1>自定義指令！</h1>” }; }); </script> </body>
可以通過以下方式來調用指令：
·元素名
·屬性
·類名
·注釋
以下實例方式也能輸出同樣結果：
元素名：
<runoob-directive></runoob-directive>
屬性：
<div runoob-directive></div>
類名：
<div class=”runoob-directive”></div>
注釋：
<!-- 指令：runoob-directive -->
*需要在該實例添加replace屬性，否則評論是不可見的。
*必須設置restrict的值為”M”才能通過注釋來調用指令。
<body ng-app=”myApp”> <!-- directive: runoob-directive --> <script> Var app = angular.module(“myApp”,[]); App.directive(“runoobDirective”,function(){ Return { Restrict : “M”, Replace : true, Template : “<h1>自定義指令！</h1>” }; }); </script> </body>
9.限制使用
可以限制指令只能通過特定的方式來調用。
通過添加restrict屬性，並設置值為”A”，來設置指令只能通過屬性的方式來調用：
Var app = angular.module(“myApp”,[]); App.directive(“runoobDirective”,function(){ Return { Restrict : “A”, Template : “<h1>自定義指令！</h1>” }; });
Restrict值可以是以下幾種：
·E只限元素名使用
·A只限屬性使用
·C只限類名使用
·M只限注釋使用
Restrict默認值為EA，即可以通過元素名和屬性名來調用指令。
四、AngularJS模型
Ng-model指令用於綁定應用程序數據到HTML控制器(input,select,textarea)的值。
可以將輸入域的值與AngularJS創建的變量綁定。
<div ng-app=”myApp” ng-controller=”myCtrl”> 名字：<input ng-model=”name”> </div> <script> Var app = angular.module(‘myApp’,[]); App.controller(‘myCtrl’,function($scope){ $scope.name = “John Doe”; }) </script>
1.雙向綁定
雙向綁定，在修改輸入域的值時，AngularJS屬性的值也將修改：
<div ng-app=”myApp” ng-controller=”myCtrl”> 名字：<input ng-model=”name”> <h1>你輸入了：{{name}}</h1> </div>
2.驗證用戶輸入
<form ng-app=”” name=”myForm”> Email: <input type=”email” name=”myAddress” ng-model=”text”> <span ng-show=”myForm.myAddress.$error.email”> 不是一個合法的郵箱地址 </span> </form>
*以上實例中，提示信息會在ng-show屬性返回true的情況下顯示。
3.應用狀態
Ng-model指令可以為應用數據提供狀態值(invalid,dirty,touched,error)：
<form ng-app=”” name=”myForm” ng-init=”myText = ‘test@runoob.com’”> Email: <input type=”email” name=”myAddress” ng-model=”myText” required> <p>編輯郵箱地址，查看狀態的改變。</p> <h1>狀態</h1> <p>Valid:{{myForm.myAddress.$valid}}(如果輸入的值是合法的則為true)。</p> <p>Dirty:{{myForm.myAddress.$dirty}}(如果值改變則為true)。</p> <p>Touched:{{myForm.myAddress.$touched}}(如果通過觸屏點擊則為true)。</p> </form>
4.CSS類
Ng-model指令基於它們的狀態為HTML元素提供了CSS類：
<style> Input.ng-invalid{ Background-color: lightblue; } </style>
<form ng-app=”” name=”myForm”> 輸入你的名字： <input name=”myName” ng-model=”myText” required> </form> <p>編輯文本域，不同狀態背景顏色會發生變化</p> <p>文本域添加了required屬性，該值時必須的，如果為空則是不合法的。</p>
Ng-model指令根據表單域的狀態添加/移除以下類：
·ng-empty
·ng-not-empty
·ng-touched
·ng-untouched
·ng-valid
·ng-invalid
·ng-dirty
·ng-pending
·ng-pristine