AngularJS與jQuery區別？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【AngularJS與jQuery區別？】
1.背景介紹
AngularJS與jQuery區別？
表現在資料雙向繫結，實質就是DOM的操作形式不一樣。JQuery通過選擇器找到DOM元素，再賦予元素的行為； 而AngularJS則是，將指令與DOM繫結在一起，再擴充套件指令的行為。 所以AngularJS開發最理想的結果就是，在頁面HTML與CSS的設計時，設計工程師只需要關注指令的使用；而在背後的邏輯開發上，架構工程師則是不需要知道如何操作DOM，只需要關注指令背後的行為要如何實現就行；測試工程師也可以開發針對指令的單元測試。 指令就是DOM與邏輯行為的媒介，本質就是DOM繫結的獨立邏輯行為函式。
指令是一個Dom元素上的標籤(和元素上的屬性, CSS 類樣式一樣，屬於這個Dom元素)， 它告訴AngualrJS 的 HTML 編譯器，去附加一個行為到這個Dom元素上去，這個行為可以改變這個Dom元素，或者這個Dom元素的子元素。 AngularJS 通過被稱為 指令 的新屬性來擴充套件 HTML。 AngularJS 通過內建的指令來為應用新增功能。AngularJS 內建指令是擴充套件的 HTML 屬性，帶有字首 ng-
2.知識剖析
ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
ng-if
ng-if指令可以根據表示式的值在DOM中生成或移除一個元素。如果賦值給ng-if的表示式的值是false，那 對應的元素將會從DOM中移除，否則生成一個新的元素插入DOM中。 需要注意的是，當一個元素被ng-if從DOM中移除，同它關聯的作用域也會被銷燬。而且當它重新加入DOM中時，會通過原 型繼承從它的父作用域生成一個新的作用域。也就是說ng-if會新建作用域，而ng-show和ng-hide則不會。 ng-if同no-show和ng-hide指令最本質的區別是，它不是通過CSS顯示或隱藏DOM節點，而是刪除或者新增節點。
ng-class
ng-class 指令用於給 HTML 元素動態繫結一個或多個 CSS 類。 ng-class 指令的值可以是字串，物件，或一個數組。 如果是字串，多個類名使用空格分隔。 如果是物件，需要使用 key-value 對，key 為你想要新增的類名，value 是一個布林值。只有在 value 為 true 時類才會被新增。 如果是陣列，可以由字串或物件組合組成，陣列的元素可以是字串或物件。 甚至還可以使用複雜一點三元表示式。
ng-options
ng-options 指令用於使用 options 填充 select 元素的選項。 ng-options屬性可以在表示式中使用陣列或物件來自動生成一個select中的option列表。ng-options與ng-repeat很相似， 很多時候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處，例如減少記憶體提高速度，以及提供選擇框的 選項來讓使用者選擇。而且 ng-options 的選項是一個物件，ng-repeat 是一個字串。
ng-value
ng-value 指令用於設定 input 或 select 元素的 value 屬性。 和value相比，它的值可以是表示式，所以相比之下可以實現更多需求。 比如當需要使用ng-repeat來動態生成input[]的時候，ng-value是很有用處的。
ng-click
ng-click 指令告訴了 AngularJS HTML 元素被點選後需要執行的操作。 如果是使用ng-click來實現函式的執行的話，還可以進行傳參。 一個ng-click可以觸發多個操作，比如： "<"button ng-click="function1();function2()"><"/button">" 先執行function1後執行function2
3.常見問題
ng-option表示式的寫法？
它有哪幾種形式
4.解決方案
ng-option表示式的寫法？
ng-options的值可以是一個內涵表示式（comprehension expression）， 其實這只是一種有趣的說法，簡單來說就是它可以接收一個數組或者物件， 並對它們進行迴圈，將內部的內容提供給select標籤內部的選項。它可以是一下兩種形式。
它有哪幾種形式
它有以下兩種形式。 陣列作為資料來源 用陣列中的值做標籤。(label for value in array)
用陣列中的值作為選中的標籤。(select as label for value in array)
用陣列中的值做標籤組。(label group by group for value in array)
用陣列中的值作為選中的標籤組。(select as label group by group for value in array track by trackexpr)
物件作為資料來源 用物件的鍵-值（key-value）做標籤。(label for (key , value) in object)
用物件的鍵-值作為選中的標籤。(select as label for (key , value) in object)
用物件的鍵-值作為標籤組。(label group by group for (key, value) in object)
用物件的鍵-值作為選中的標籤組。(select as label group by group for (key, value) in ob)
5.編碼實戰
6.擴充套件思考
ng-if的作用域問題
ng-if指令會建立一個子級作用域，因此，如果在ng-if指令中添加了元素， 並向元素屬性增加 ng-model指令，那麼ng-model指令對應的作用域屬性 子級作用域，而並非控制器注入的$scope作用域物件，這點在進行雙向數 據繫結時，需要引起注意。
因此，解決ng-if中ng-model值無效的問題，主要方法就是在繫結值時新增$parent標識， 或者用ng-show指令代替ng-if指令，這兩種方法都可以達到同樣的頁面效果。 寫法如下： ng-model="$parent.industry"
7.參考文獻
參考資料：https://blog.csdn.net/u010870890/article/details/49619141
—— AngularJS常用指令
參考資料： http://www.cnblogs.com/wolf-sun/p/4614532.html
—— Angular js ng-select和ng-options
8.更多討論
1.如何解決ng-if中ng-model值無效的問題？
答：主要方法就是在繫結值時新增$parent標識， 或者用ng-show指令代替ng-if指令，這兩種方法都可以達到同樣的頁面效果。寫法如下：ng-model="$parent.industry"
2.ng-options與ng-repeat自動生成option選項的區別？
答：ng-options生成的option選項選中後，繫結到ngModel的值可以是物件。ng-repeat繫結到ngModel的值只能是字串。
select初始化時需要為ngModel指定值，否則會出現空白選項。
3.ng-options它有什麼優點？
答：減少記憶體提高速度，以及提供選擇框的選項來讓使用者選擇。而且 ng-options 的選項是一個物件，ng-repeat 是一個字串。
今天的分享就到這裡啦，歡迎大家點贊、轉發、留言、拍磚~
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地