1.指令
（1）ng-init 指令初始化 AngularJS 應用程序變量。不常用
HTML5 允許自定義屬性以 data- 開頭。而AngularJS 屬性以 ng- 開頭，所以可以使用 data-ng- 來讓網頁對 HTML5 有效。
（2）ng-app 指令定義一個 AngularJS 應用程序。一個網頁可以包含多個運行在不同元素中的 AngularJS 應用程序。
（3）ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。能夠同步數據。
ng-model 指令可以爲應用數據提供狀態值(invalid, dirty, touched, error):
（4）ng-bind 指令把應用程序數據綁定到 HTML 視圖。
（5）ng-repeat會重複一個 HTML 元素，類似for循環，可用於數組或對象。
用法：ng-repeat=“x in arrs”
（6）.directive 自定義指令。可以元素名、屬性、類名、註釋形式調用
<body ng-app="myApp">
<!--用分隔符-來調用-->
<runoob-directive></runoob-directive> <!--元素名-->
<div runoob-directive></div> <!--屬性-->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
//駝峯命名
return {
template : "<h1>自定義指令!</h1>"
};
});//使用駝峯法來命名一個指令，但在使用它時需要以-分割
</script>
</body><body ng-app="myApp">
<div class="runoob-directive"></div> <!--類名-->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C", //必須設置restrict的值爲 "C" 才能通過類名來調用指令
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body><body ng-app="myApp">
<!-- directive: runoob-directive --> <!--註釋-->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M", //必須設置restrict的值爲 "M"
replace : true, //需要在該實例添加 replace 屬性
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>上面四種調用方式效果均是下圖：
restrict 限制使用，有如下值:
E 作爲元素名使用
A 作爲屬性使用
C 作爲類名使用
M 作爲註釋使用
restrict 默認值爲 EA, 即可以通過元素名和屬性名來調用指令。
（7）ng-show ng-show 屬性返回 true 的情況下顯示內容
<span ng-show="var">xxxx</span>2.表達式
{{ expression }}，可以包含文字、運算符和變量。功能與與ng-bind相似 。
AngularJS 表達式可以寫在 HTML 中。
AngularJS 表達式不支持條件判斷，循環及異常。
AngularJS 表達式支持過濾器。
{{ quantity * cost }}
與
<span ng-bind="quantity * cost"></span>3.應用
AngularJS 模塊（Module） 定義了 AngularJS 應用。
AngularJS 控制器（Controller） 用於控制 AngularJS 應用。
ng-app指令定義了應用, ng-controller 定義了控制器。
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
