angular是干什么的
它可以輕松構建SPA(單一頁面應用程序)
- 只有一個頁面（整個應用的載體）
- 內容全部是由ajax方式呈現出來的
傳統的網頁開發：會有很多頁面放在服務器端，比如說log-in.html ，sign-in.html之類的
使用angular：只有一個頁面，比如說叫index.html，它只是一個空殼子。瀏覽器請求下載以后，頁面什么都沒有。在瀏覽器渲染的時候，里面的腳本會在后台向服務器請求一些數據。所以，服務器里面是一堆數據。
spa的好處：局部刷新，速度快，用戶體驗上有明顯的變化，減少請求大小（header body曾經都是重復請求的），可以實現傳統方式無法實現的功能（比如說網易雲的界面的，雖然轉跳了頁面，但是仍然可以播放音樂，這是因為audio表單沒有更新）
原理是這樣的：
同時呢，ng(Angularjs可以簡寫成ng) 還通過指令拓展了HTML，通過表達式綁定數據到HTML。
指令和表達式是ng里面非常重要的概念，使得js從dom操作中完全解脫出來了，未來，js很少會直接用於dom操作
也就是說，document.getElementById()這種方式，有可能會淹沒在歷史的潮流中（個人觀點哈）
Angular四個特性：MVC/模塊化/自動化雙向數據綁定/指令系統
如何引入
- 通過cdn的方式，就像引入其他腳本一樣引入
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> - 各個 angular.js 版本下載： https://github.com/angular/angular.js/releases
- 如果你的電腦安裝了nodejs，可以通過npm來安裝，直接
$npm install angular; - 使用Bower來安裝
$bower install angular，但是這樣只會把包安裝在本地，不會寫進配置文件中。先$bower init,一路回車，然后bower install angular --save
先看一個例子
然后結果是：
這里的新東西，分別是ng-app="" 和{{5+5}}，分別是angular的指令和表達式。
指令
Ng-app="" 這樣的HTML屬性，是以ng— 開頭的，他們被稱為AngularJS 指令，可以用於拓展html，你可以用內置的指令，也可以用自定義的指令。
內置的指令
ng-app 指令定義一個 AngularJS 應用程序，告訴 AngularJS 應用當前這個元素是根元素。
a. 這個指令可以加在任何地方，body標簽啦，p標簽啦。這個很實用，因為一張頁面，可能只有一 個地方時要用angularjs來實現的，其他地方我不想用，那么就可以只在一個div上添加ng-app=""，不會影響其他。
b. 所有 AngularJS 應用都必須要並且只有一個根元素，所有被ng管理的代碼，都必須包裹在ng-app中，可以被視為入口
c. HTML 文檔中只允許有一個 ng-app 指令，如果有多個 ng-app 指令，則只有第一個會被使用。
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序, 也被稱為雙向數據綁定指令
效果就是，把當前元素 （你把ng-model寫在哪里，那里就是當前元素）的value值和ng表達式建立綁定 關系。
比如下面的例子：
將會輸出：
再比如下面這個例子：
背后實際上是做了這樣的事情：
執行到ng-model的時候，angular會創建一個數據模型，執行到“user.name”的時候，會創建一個對象，並且添加一個name的屬性。並且把這個name的屬性，和寫ng-angular的那個元素建立綁定的關系。
所以這里的ng-model=“obj.name”起到了這樣的作用：把value 和{{expression}}建立了雙向綁定。
然后這里{{user.name}}做的事情是：
把他的標簽的innerHTML屬性和數據模型中的name屬性綁定在一起。
所以ng-model 指令也可以：
a. 為應用程序數據提供類型驗證（number、email、required）。
b. 為應用程序數據提供狀態（invalid、dirty、touched、error）。
c. 為 HTML 元素提供 CSS 類。
d. 綁定 HTML 元素到 HTML 表單。
ng-bind 指令把應用程序數據綁定到 HTML 視圖。效果和{{expression}}相同
ng-repeat指令會重復一個 HTML 元素
比如下面的代碼：
會輸出：
在上面這個例子中，ng-repeat指令並不是重復了{{x}},而是重復了其所在的那個標簽，重復的個數，就是“x in aa”中有多少個x的個數。不信請看下面：
“x in a”其中的a不僅可以是數組，也可以是一個對象。當a是一個對象的時候，x是其中每一個屬性值。
再看一個關於ng-repeat例子，代碼如下：
注意：x in a ; x 不能有重復的值，如果有重復的值，需要加tracked by index(唯一且不重復的值)
Ng-class 用於給 HTML 元素動態綁定一個或多個 CSS 類。
比如說，我想在上面那個例子，做成顏色交叉變色的效果，就是像這樣：
那么代碼塊不用Ng-class可以這樣寫：
這里是在表達式這里做了一個判斷，ng-class其中一個用法就是這個：
ng-class="{ class1:使用條件1，class2：使用條件1}"
也就是說，當使用條件1成立時，用class1的屬性，當使用條件2成立時，用class2的屬性
再來一段代碼：
創建自定義的指令，你可以使用 .directive 函數來添加自定義的指令。封裝一些常用，共有的一些東西。Angular 對於dom的操作還有一些可能，那就是自定義指令。
注意：使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive。
代碼如下：
事實上，調用指令還可以通過元素名、類名和注釋。上面的代碼，寫成這樣也是可以的：
<shichen-jin></shichen-ijn>
<p class="shichen-jin></p> (此時restrict值必須設為 "C",)
<!-- 指令: shichen-jin --> (此時restrict值必須設為“M")
ng-src指令,覆蓋了 
元素的 src 屬性，確保的 AngularJS 代碼執行前不顯示圖片。當解析到imghtml的標簽時，會先訪問url地址，而此時{{url}}還沒有解析好，所以會報錯，而通過ng-src=""，則會先執行angular解析，然后再html解析
Ng -switch
上面，我們學習啦指令，下面，我們來講表達式
表達式{{expression}}
controller（控制器）如何將數據傳遞給view(視圖)呢？表達式就是干的這個活，AngularJS 將在表達式書寫的位置"輸出"數據。
比如說：
里面{{expression}}所在的位置，就是數據要寫入的位置
AngularJS 表達式 很像 JavaScript 表達式：里面可以放數字、字符串、數組和對象；
放數字
放字符串
放對象：
放數組：
什么是mvc思想？
- 將應用程序的組成划分為三個部分：model 、view、controller
- 控制器的作用是初始化模型用的；
- 模型是用來存儲數據的
- 視圖是用來展示數據
模塊：
- angular很重要的一個特征是實現了模塊化編程，我們可以通過以下的方式創建一個模塊，對頁面進行功能上的划分。
- 你可以把模塊想象成樂高積木中的一個小積木，是應用程序中的最小單元。
- 可以將重復使用的指令或者過濾器做成模塊以便服用
- 定義一個myapp的模塊：
var myApp =angular.module(“myAPP”,[])//第二個參數是該模塊依賴的其他模塊 - 注意：必須指定第二個參數，否則是獲取已經定義的模塊
控制器：
控制器的語法
- 由於控制器必須是在模塊下的，要想創建控制器，必須先創建模塊
- 創建一個特定模塊
mymodule下的控制器，命名為mycontroller：mymodule.controlller("mycontroller",function($scope){……}) - 上面控制器的回調函數中，傳遞的參數只能是
$scope，$scope實質是一種作用域,數據必須掛在$scope下，才能在表現層中出現 - 但是其實上面的做法是不推薦的，理由：既然參數是
$scope不能變，因為依賴注入就考它，但是壓縮代碼的話，會把$scope變成a這樣的簡單字符，所以壓縮代碼后是會報錯了。 - 所以注冊控制器的標准寫法是：
mymodule.controller("mycontroller",["$scope",function(a){……}])
也就是在原來控制器回調函數的位置，換成一個數組，數組前部是要傳入的參數，數組最后一個是回調函數。 - 更加簡潔的寫法是：
控制器的職責：
-
為模型設置初始值
-
通過
$scope對象把數據模型和函數行為暴露給視圖（這兩點在昨天的例子中已經展示了）
-
監視模型 的變化，做出相應的行為。
angular的api提供了$watch的方法：
在上面這段代碼中，當$scope作用域中的name發生變化時，會被$scope.$watch監聽到，然后觸發函數