HTML在構建應用（App）時存在諸多不足之處，AngularJS通過擴展一系列的HTML屬性或標簽來彌補這些缺陷，所謂指令就是AngularJS自定義的HTML屬性或標簽，這些指令都是以ng-做為前綴的，例如ng-app、ng-controller、ng-repeat等。
1、內置指令
-
ng-app:指定應用根元素，至少有一個元素指定了此元素；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入門</title>
</head>
<body ng-app="app">
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
</body>
</html>
-
ng-controller:指定控制器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入門</title>
</head>
<body ng-app="app">
<!--使用ng-colleroller指定一個控制器-->
<div ng-controller="DemoController">
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",["$scope",function ($scope) {
}])
</script>
</body>
</html>
-
ng-show,ng-hide,指定元素是否可見
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入門</title>
</head>
<body ng-app="app">
<!--使用ng-colleroller指定一個控制器-->
<!--ng-show,true顯示、false不顯示-->
<div ng-controller="DemoController" ng-show="false">
AngularJs指令,被隱藏了
</div>
<!--ng-hide,false顯示、true不顯示-->
<div ng-hide="false">
AngularJs指令,沒有被隱藏
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",["$scope",function ($scope) {
}])
</script>
</body>
</html>
ng-show,ng-hide
-
ng-model:把元素值（比如輸入域的值）綁定到應用程序。
-
ng-init:初始化數據。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入門</title>
</head>
<body ng-app="app">
<!--通過ng-init,初始化quantity=1;price=5-->
<div ng-app="" ng-init="quantity=1;price=5">
<h2>價格計算器</h2>
數量： <input type="number" ng-model="quantity">
價格： <input type="number" ng-model="price">
<p><b>總價：</b> {{ quantity * price }}</p>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",["$scope",function ($scope) {
}])
</script>
</body>
</html>
ng-model,ng-init
-
ng-repeat:循環遍歷數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入門</title>
</head>
<body ng-app="app" ng-controller="DemoController">
<ul>
<!--通過ng-repeat遍歷數據-->
<li ng-repeat="info in infos">
<div>姓名：{{info.name}}，年齡：{{info.age}}</div>
</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",["$scope",function ($scope) {
$scope.infos = [
{'name':'張三',age:20},
{'name':'李四',age:21},
{'name':'王五',age:22},
{'name':'趙六',age:23},
]
}])
</script>
</body>
</html>
ng-repeat循環遍歷
2、自定義指令
當我們在開發的時候，AngularJs的指令無法滿足我們的需求時，我們就要自定義指令,通過angular全局對象下的directive方法實現
var App = angular.module('App', []);
// 通過模塊實例對象的directive方法可以自定義指令
App.directive('tag', function () {
// 返回一個對象，這個對象就是自定義指令相關的內容
return {
// E element,表示元素
// A attribute，表示屬性
// C class，表示類
// M mark replace 必須為true
restrict: 'ECMA',
template: '<ul><li>首頁</li><li>列表</li></ul>',
//templateUrl: './list.html',
// replace: true
}
});
