目录：
$rootScope，ng-app，.run()，ng-include，ng-repeat，ng-if，ng-switch，ng-init
ng-show/ng-hide，ng-model，ng-bind-template，ng-change，ng-submit，ng-cloak，ng-bind
详细介绍：
$rootScope
是作用域链的起始点，任何嵌套在ng-app内的指令都会继承$rootScope
ng-app
任何具有ng-app属性的dom元素都将被标记为$rootScope的起始点
.run()
.run()可以通过此方法来访问/设置$rootScope
ng-include
把外部的html片段包含到当前元素里作为当前元素的子元素。还可以规定作用域，写法看下面代码，注意外部文件地址的引号的写法，跨域的文件不可以引入哦
<body>
<!--注意外部文件地址的引号-->
<div ng-include="'htmlhtml.html'"
ng-controller="myController"
ng-init="name='world'"
>
</div> <script>
angular.module("myApp",[])
.controller("myController",function($scope){ })
</script>
</body>
ng-repeat
用来遍历数组或者对象。
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../Angular/angular.min.js"></script>
<style>
.odd{
background:greenyellow;
}
.even{
background:grey;
}
</style>
</head>
<body> <div ng-controller="myController">
<table width="100%"border="0">
<!-- 注意添加class的两个引号-->
<tr ng-repeat="v in objData" ng-class-even="'even'" ng-class-odd="'odd'">
<td>{{v.name}}</td>
<td>{{v.age}}</td>
<td>{{v.score}}</td>
</tr>
</table>
<ul>
<!-- 被遍历的数组有重复元素，是不会被遍历出来的，下面的写法是根据下标遍历数组，所以重复的就会被遍历出来-->
<li ng-repeat="v in arr track by $index">{{v}}</li>
</ul>
</div> <script>
angular.module("myApp",[])
.controller("myController",function($scope){
$scope.objData = [
{name:'小梦',age:'19',score:'104'},
{name:'北京',age:'20',score:'103'},
{name:'山西',age:'12',score:'102'},
{name:'*',age:'21',score:'101'}
];
$scope.arr = [1,3,2,1,1,2,3,4]
})
</script>
</body>
</html>
ng-if
可以完全根据表达式返回的布尔值在dom中生成或移除一个元素，false移除，true生成。移除的时候不管对该元素做过什么设置，当再次生成的时候这些设置都不在了，就像恢复了出厂设置一样。
<body> <!--这个div会被移除-->
<div ng-if="2+2 == 5">
我是给ng-if返回false的div
</div> <div ng-if="2+2 == 4">
我是给ng-if返回true的div
</div> <script>
angular.module("myApp",[])
</script>
</body>
ng-switch
ng-switch ng-switch-when ng-switch-default就像switch语句一样使用
<body>
<div>
<input type="text" ng-model="person.name"/>
<!-- on 就好像是switch语句的参数一样 而ng-switch-when 就像是 case一样 -->
<div ng-switch on="person.name">
<p ng-switch-default>default</p>
<p ng-switch-when="Air">{{person.name}}</p>
</div>
</div>
<script>
angular.module("myApp",[])
</script>
ng-init
设置内部作用域的初始值。
<body>
<div ng-init="name='大厨的笔记';age='25'">
<p>{{name}}{{age}}岁啦</p>
</div>
<script>
angular.module("myApp",[])
</script>
</body>
ng-show/ng-hide
根据条件返回的布尔值 显示或隐藏元素
<body>
<div ng-show="2+2 == 4">
第一个div 2+2 == 4 ng-show
</div>
<div ng-hide="2+2 == 4">
第二个div 2+2 == 4 ng-hide
</div>
<script>
angular.module("myApp",[])
</script>
ng-model
用来将input select textarea 或自定义表单控件同包含它们的作用域中的属性进行绑定
<body>
<!--双向数据绑定，视图与控制器的数据保持一致-->
<div ng-controller="myController">
<input type="text" ng-model="data"/>
<p>{{data}}</p>
</div> <script>
angular.module("myApp",[])
.controller("myController",function($scope){
$scope.data = 1;
})
</script>
ng-change
在表单输入发生变化时触发。要配合ng-model使用
<body>
<div ng-controller="myController">
<input type="text" ng-model="data.mo" ng-change="change()"/>
<p>{{data.child}}</p>
</div> <script>
angular.module("myApp",[])
.controller("myController",function($scope){
$scope.data = {};
$scope.change = function(){
$scope.data.child = parseInt($scope.data.mo)+2;
}
})
</script>
</body>
ng-submit
用来将表达式同onsubmit事件进行绑定，这个指令会阻止默认发送请求，前提是form没有action属性
ng-bind
在使用 {{ }} 绑定数据时在数据没有加载出来时会发生闪烁的现象，使用ng-bind来绑定数据不会出现闪烁的问题
<!--这样不会有闪烁的现象-->
<div ng-controller="myController">
<div ng-bind="data"></div>
</div>
<script>
angular.module("myApp",[])
.controller("myController",function($scope){
$scope.data = '大厨的笔记';
})
</script>
ng-cloak
除了用ng-bind来解决闪烁问题外，还可以用ng-cloak来解决，它会将内部元素隐藏，直到数据出来后才显示内部元素
<body>
<div ng-controller="myController">
<p ng-cloak>{{data}}</p>
</div>
<script>
angular.module("myApp",[])
.controller("myController",function($scope){
$scope.data = '大厨的笔记';
})
</script>
</body>
ng-bind-template
同ng-bind指令类似，用来在视图中绑定多个表达式
<body>
<!--貌似这种写法在个别编辑器里会报错，但是不影响数据渲染-->
<div ng-controller="myController">
<p ng-bind-template="{{data1}}{{data2}}"></p>
</div> <script>
angular.module("myApp",[])
.controller("myController",function($scope){
$scope.data1 = '大厨的笔记1';
$scope.data2 = '大厨的笔记2';
})
</script>
</body>