AngularJS快速入门4--内置指令

AngularJS的指令：

扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能，Angular的指令在页面中体现出来就是一个标签\属性\class名称\注释等。
           

控制指令：

1.ng-app,用于指定AngularJS应用启动的入口和挂载应用的根模块，它自动引导Angular程序的运行，在定义应用程序运行入口的同时，可以绑定一个DOM元素， DOM元素的开始标签和结束标签之间~就可以认为是模块的作用范围。
那么问题就来了，ng-app没有模块，可以引导Angular运行吗？答案是可以， Angular会将页面中出现的支持的语法进行解释运行，但是不能使用模块控制器中定义的/挂载的数据，会超出作用范围！

2.ng-controller,用于指定AngularJS模块上的控制器和对应的DOM元素的绑定。模块中，可以给模块挂载一个或者多个控制器，挂载好的控制器在当前模块范围内，可以通过ng-controller指令来指定控制器的作用范围。
           

渲染指令： 指令的作用就是将数据，渲染展示到页面上【底层是封装了DOM操作】

1.ng-repeat:用于循环输出指定的数据。属性直接写在要循环的标签上， u in users中u和users就会被Angular解释成变量，获取变量中的值进行处理。
           

<li ng-repeat="u in users">
           

2.ng-bind:用于展示绑定的变量中的数据。
           

<div ng-bind="content"></div>
    <div ng-bind="12 * 12"></div>
    <div ng-bind="true && false"></div>
    <div ng-bind="12 > 10"></div>
           

3.ng-bind-html:以浏览器可以解释的方式进行数据的展示。这个指令，类似于原生JS的innerHTML，使用的时候一定要慎重，对于它修饰的内容，必须确保安全性。如果内容的来源不确定，不要使用编译html标签的属性或者函数，否则容易被XSS攻击。

4.ng-include:页面包含，可以通过该指令将指定的另一个页面包含到当前页面中。它类似于JQuery 中的load()函数，用于加载其他页面。
           

<div ng-include="'tab1.html'"></div>     注：带入的页面不仅要被双引号包裹，也要单引号。
           

节点指令：主要用于标签、样式、属性、内容的操作。

1.ng-class:用于通过双向绑定的数据变量来动态控制DOM元素的Class样式。
2. ng-class-even/odd:用于和ng-repeat结合使用时，控制偶数行和奇数行不同的样式处理，添加不同的样式进行隔行样式分离。
3. ng-style:用于直接给Html标签添加行内样式的处理，样式按照css标准语法添加。
4. ng-src:用于将图片路径动态渲染到img标签中。
5. ng-href:用于将超链接路径动态渲染到a标签中。
6. ng-if:选择指令，用于根据指定条件进行DOM元素的移除或者重绘到DOM结构的操作。
7. ng-show:显示指令，用于当条件为true时将指定的元素显示绘制到网页中。
8. ng-hide:隐藏指令，用于当条件为true时将指定的元素在页面上隐藏display:none。
9. ng-switch:多条件选择指令，配合子指令ng-switch-when和ng-switch-default一起使用，来进行多条件下的选择输出。
           

*事件指令：*Angular封装的用于操作事件的指令

1. ng-click:用于捕捉用户鼠标单击操作，执行指定的事件处理函数。
 2. ng-dbclick:鼠标双击。
 3. ng-keydown:键盘按键按下。
 4. ng-keyup:键盘按键抬起。
 5. ng-mousedown:鼠标左键按下。
 6. ng-mouseup:鼠标左键抬起。
           

注意：事件处理的过程中，可以通过

$event

将事件对象传递给处理函数，通过事件对对象可以进行阻止事件冒泡、阻止浏览器默认行为、获取鼠标位置等等各种原生操作。