这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【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，初学者转行到互联网的聚集地