一：了解AngularJS
AngularJS是一款非常優秀的前端高級 JS 框架，由 Misko Hevery 等人創建 2009 年被 Google 收購，用於其多款產品 有一個全職的開發團隊繼續開發和維護這個庫 有了這一類框架就可以輕松構建 SPA 應用程序 single page web application 通過指令擴展了 HTML，通過表達式綁定數據到 HTML。
二：AngularJS的優勢
1.更少的代碼，實現更強勁的功能
2.帶領前端進入MVC時代
（mvc模式：Model（模型）是應用程序的核心，指的是程序在數據庫中存儲數據。
View（視圖）是應用的界面，將數據庫里的數據展現出來，展現給程序的使用者。
Controller（控制器）處理用戶的交互行為，程序使用者更改數據，由控制器接受並發送給模型。）
三：AngularJS的特性
1.MVC
2.模塊化
3.自動化雙向數據綁定 使用{{ }}對動態數據綁定，綁定到元素的innerHTML
4.指令系統 ng-
5.表單驗證
6.HTML組件化
7.Angular 在構建 增加、查詢、修改、刪除的頁面應用時能發揮最大優勢。CRUD
四：AngularJS語法特點
1.Angular 最大程度的減少了頁面上的 DOM 操作；
2.讓 JavaScript 中專注業務邏輯的代碼；
3.通過簡單的指令結合頁面結構與邏輯數據；
4.通過自定義指令實現組件化編程；
5.代碼結構更合理；
6.維護成本更低；
7.Angular 解放了傳統 JavaScript 中頻繁的 DOM 操作
五：AngularJS的用法
1.編寫第一個Angular應用
當網頁加載完畢，AngularJS 自動開始執行； HTML 頁面中 ng-xxx 的屬性稱之為指令（Directive）； ng-app 指令告訴 AngularJS，<html> 元素是 AngularJS 應用程序管理的邊界； {{ }} 雙花括號里面的叫做數據綁定表達式，可以是任何有效的JavaScript值、變量或語句。而在頁面上顯示的是表達式計算后的結果值。 | 管道符號可以給表達式添加過濾器，如 | number:2， |currency
<html ng-app>
<head></head>
<body>
{{"現在開始學習Angular"}}
</body>
</html>
2.Module.controller() 控制器
第二行代碼創建了一個名為userCtrl的控制器，以及一個控制器函數 控制器函數接受一個名為$scope的參數
var app = angular.module(“myApp”, []); //myApp模塊名 app是模塊實例
app.controller(“userCtrl” ,function($scope){ //userCtrl是控制器的名字
$scope.name= “趙敏”; //$scope用來保存數據，定義方法
});
3.ng-指令用法
（1）ng-model
ng-model 指令把文本框的值綁定到變量 name 上； {{ name }} 表達式就是把應用程序變量 name 綁定到某個dom元素的innerHTML
例： 請輸入你的名字：<input type="text" id="username" ng-model="name"> 你的名字是： <span>{{name}}</span>
（2）ng-bind指令
ng-bind 指令將指定變量或表達式的值顯示在元素的innerHTML 如果給定的變量或表達式修改了，指定元素的 innerHTML 也會修改。
例： <input type="text" ng-model="text"> --將文本框的值綁定到text變量 你輸入的值是:
<span ng-bind="text"></span> --動態顯示text變量的值
（3）ng-init 指令
初始化應用時創建一個變量，並給變量賦值 ng-init 執行給定的表達式 建議用controller代替
例： <div ng-app="" ng-init="myText='Hello World!'">
<h1>{{myText}}</h1>
（4）ng-click指令
Angular的點擊事件處理器，給元素通過click事件綁定$scope對象的方法
例： <input type="text" ng-model="text"> <button ng-click="show()">顯示輸入值</button>
$scope.show = function(){ alert("您輸入的內容是：" + $scope.text); }
（5）ng-repeat 指令
根據綁定數組成員的數量，復制被綁定的元素 在ng-repeat指令復制元素的過程中，還提供了幾個專有變量：
$index 返回當前對象或屬性的下標
$first 當前對象為集合中的第一個對象時返回true
$last 當前對象為集合中的最后一個對象時返回true
$middle 當前對象既不是集合中第一個對象又不是最后一個對象返回true
$even 集合中的偶數編號返回true
$odd 集合中的奇數編號返回true ng-repeat-start ng-repeat-end 重復生成多個頂層元素
（6）ng-class 指令
給元素添加CSS類:不能直接添加類名，需通過以下三種方式添加：
1. 直接綁定值為CSS類名的$scope對象屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="../../css/bootstrap.css" rel="stylesheet"> <style> .red { color: red; } </style> </head> <body ng-app="myApp"> <div ng-controller="listController"> <span ng-class="red1">曹總</span> </div> <script src="../../script/angular.min.js"></script> <script> var app = angular.module("myApp", []); app.controller("listController", function($scope) { $scope.red1='red'; }); </script> </body> </html>
2. 以字符串數組方式選擇性添加CSS類 表達式 ? ‘style1’:‘style2’
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .style1 { height: 200px; width: 200px; background: salmon; } .style2 { background: violet; } </style> </head> <body> <div ng-app ng-init="data={style1:true,style2:false}"> <!--ng-class指令會根據設置對象的情況決定是否添加某些class類名--> <div ng-class="{style1:data.style1,style2:data.style2}"></div> <!--<div ng-class="style1:true,style2:false"></div>--> <input type="button" value="變化顏色" ng-click="data.style2 = !data.style2"> </div> <script src="../../script/angular.min.js"></script> <script> var data = { style1:true, style2:false } </script> </body> </html>
3. 通過key/value對象的方式添加多個CSS類 ng-class=”{style1:true,style2:false}”o.startsWith(‘D’); indexOf() contains() ng-class-odd 綁定奇數行樣式 ng-class-even 綁定偶數行樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="../../css/bootstrap.css" rel="stylesheet"> <style> .red { color: red; } .green { color: greenyellow; } </style> </head> <body ng-app="myApp"> <div ng-controller="listController"> <ul> <li ng-repeat = "item in datas" ng-class="{red:item.startsWith('張')">{{ item }} </li> </ul> </div> <script src="../../script/angular.min.js"></script> <script> var app = angular.module("myApp", []); app.controller("listController", function($scope) { $scope.datas = ["張三","李四","王五","趙六","張"]; }); </script> </body> </html>
（7）ng-style 指令
ng-style 指令為 HTML 元素添加 style 屬性。 ng-style 屬性值必須是對象，表達式返回的也是對象 對象由 CSS 屬性和值注冊，即 key：value 。
ng-style=” {color: 'white'}”
（8）ng-show/ng-hide指令
ng-show 值為true或flase 顯示或隱藏元素 ng-hide 值為true或flase 隱藏或顯示元素
（9）ng-if指令
從DOM中添加和移除元素 ng-if=”true”時保留元素 ng-if=“false”時移除元素
（10）ng-swich指令
ng-switch-when =“” 值為指定value值的時候 顯示元素
ng-switch-default 沒有匹配的value值時顯示元素
（11）ng-link/ng-src指令
綁定元素的link或src地址 <img ng-src="{{item.url}}"> AngularJS 設置圖片地址的指令：ng-src AngularJS 代碼執行前不顯示圖片。
（12）ng-include指令
該指令從服務器獲取一段HTML片段，編譯並處理該片段中包含的任何angular指令，並添加到DOM元素中。
<ng-include src=" 'a.html' " ></ng-include>
src: 指定要加載內容的URL src的值必須為表達式 onload: 指定一個在內容被加載時調用的表達式 autoscroll:指定內容在加載時是否滾動到這部分視圖所在的區域
（13）ng-cloak指令
使用一個CSS樣式隱藏內聯綁定表達式，(在文檔第一次加載會短暫可見)。 ng-cloak 指令用於在 AngularJS 應用在加載時防止 AngularJS 代碼未加載完而出現的問題。 AngularJS 應用在加載時，文檔可能會由於AngularJS 代碼未加載完而出現顯示 AngularJS 代碼，進而會有閃爍的效果， ng-cloak 指令是為了防止該問題的發生。 該指令沒有參數。
<span ng-cloak>{{ 表達式 }}</span>
4.Module.directive自定義指令
指令是Angular最強大的特性，通過指令能擴展並增強HTML。 當內置指令無法滿足需求時，可以創建自定義指令。 自定義指令是通過Module.directive方法創建的。 Module.directive() 方法接受兩個參數，第一個是指令名，第二個是函數。 該函數用return語句返回另一個指令函數，使用該自定義指令，Angular就會調用這個函數。 指令函數接受三個參數，第一個scope，用於檢查在視圖中可用的數據。 第二個參數element是一個jqLite對象，jqLite是Angular提供一個剪裁版本的jQuery 第三個參數是attrs。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="../../css/bootstrap.css" rel="stylesheet"> <script src="../../script/angular.min.js"></script> <script> var m= angular.module("my", []) m.controller("ctr1", function ($scope) { $scope.dayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; $scope.today = $scope.dayNames[new Date().getDay()]; //getDay星期是從0開始的，星期日的下標是0 }); m.controller("ctr2", function ($scope) { $scope.dayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; $scope.tommorrow = $scope.dayNames[(new Date().getDay() + 1) % 7]; }); m.directive('highlight', function () { return function (scope,element,attrs) { if(scope.today == attrs['highlight']){ element.css("color",'red'); }else{ element.css("color",'green') } } }) </script> </head> <body ng-app="my"> <div class="container"> <h2>今天是星期幾？</h2> <p ng-controller="ctr1" highlight="星期二">今天是{{ today }}</p> <p ng-controller="ctr2" highlight="星期一">明天是{{ tommorrow }}</p> </div> </body> </html>