HTML在構(gòu)建應(yīng)用（App）時(shí)存在諸多不足之處，AngularJS通過擴(kuò)展一系列的HTML屬性或標(biāo)簽來彌補(bǔ)這些缺陷，
所謂指令就是AngularJS自定義的HTML屬性或標(biāo)簽，這些指令都是以ng-做為前綴的，例如ng-app、ng-controller、ng-repeat等。
-
內(nèi)置指令:
- ng-app 指定應(yīng)用根元素,至少有一個(gè)
- ng-controller 指定控制器
- ng-show 控制器元素是否顯示, true顯示、false不顯示
- ng-hide控制元素是否隱藏，true隱藏、false不隱藏
- ng-if控制元素是否“存在”，true存在、false不存在
- ng-src增強(qiáng)圖片路徑
- ng-href增強(qiáng)地址
- ng-class控制類名
- ng-include引入模板
- ng-disabled表單禁用
- ng-readonly表單只讀
- ng-checked單/復(fù)選框表單選中
- ng-selected下拉框表單選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/angular.js"></script>
<script>
//1.創(chuàng)建模塊
var app = angular.module('app', []);
//2.創(chuàng)建控制器
app.controller('xmgController', ['$scope', function ($scope) {
$scope.name = "p標(biāo)簽 p標(biāo)簽";
$scope.msg = "h1標(biāo)簽";
$scope.course = ['html', 'css', 'js'];
$scope.stu = [
{name:'zs', no:'11'},
{name:'ls', no:'22'},
{name:'wc', no:'38'}
];
}]);
//3.綁定模塊 ng-app="app"
//4.綁定控制器
</script>
<!--3.綁定模塊 ng-app="app"-->
<body ng-app="app" ng-controller="xmgController">
<div>
<p>{{name}}</p>
</div>
<div>
<h1>{{msg}}</h1>
</div>
<div>
<ul>
<!--指令：angular給原生的html標(biāo)簽添加一些新屬性，達(dá)到自己指定的功能-->
<!--所有指令都以ng-開頭-->
<!--遍歷-->
<!--<li ng-repeat="(key, value) in course">{{key}}-{{value}}</li>-->
<li ng-repeat="value in course">{{value}}</li>
</ul>
<ul>
<li ng-repeat="per in stu">{{per.name}}-{{per.no}}</li>
</ul>
</div>
</body>
</html>
