1、ng-app 定義一個 AngularJS 應用程序（頁面加載完自動引用）。
ng-controller 添加應用的控制器。
ng-model 把元素值（比如輸入域的值）綁定到應用程序（變量name）。
ng-bind / {{ expression}} 把應用程序數據綁定到某一處的innerHTML 。
（script 標籤包含的（ AngularJS 庫）放在 <body> 元素的底部可以提高網頁加載速度，但必須置於 AngularJS 腳本前。
因爲對 angular.module 的調用只能在庫加載完成後才能進行。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> -->
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<!-- 兩種寫法 -->
<h1>Hello {{name}}</h1>
<p ng-bind="name"></p>
<!-- 表達式{{ expression }}直接“輸出”數據 -->
<p>{{ 1*9*8*7 }}</p>
</div>
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("xxApp", []);
app.controller("xxCtrl", function($scope) {
$scope.name = "Evan Lee";
});
</script>
</body>
</html>
輸出：
2、ng-init 初始化應用程序變量。（一般不使用）
<div ng-app="" ng-init="name='Evan Lee'">
<p>姓名：
<span ng-bind="name"></span>
</p>
</div>
輸出：
3、ng-bind / {{ expression}}
數字、字符串、對象、數組
<div ng-app="" ng-init="a=1;b=5;c=4;
pro='四川';city='成都';
person={firstName:'Evan',lastName:'Lee'};
points=[6,10,11,12,13]">
<p>姓：{{ person.lastName }} 名：<span ng-bind="person.firstName"></span></p>
<p>生日： {{ a*b }} . <span ng-bind=" a*c "></span></p>
<p>地址： {{ pro+ " " + city}} <span ng-bind=" pro+ ' ' + city"></span></p>
<p> {{ points[3] }}週年 </p>
<p>following <span ng-bind="points[0]"></span> years</p>
</div>
輸出：
4、ng-repeat 重複一個 HTML 元素。
<div ng-app="" ng-init="names=['YY','FF','LL'];
alls=[ {name:'YY',sign:'5'},
{name:'FF',sign:'0'},
{name:'LL',sign:'4'} ]">
<p>使用 ng-repeat 來循環數組</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<p>使用 ng-repeat 循環對象數組</p>
<ul>
<li ng-repeat="x in alls">
{{ x.name + ', ' + x.sign }}
</li>
</ul>
<div>
輸出：
5、ng-disabled 綁定應用程序數據（"myClick"）到HTML的disabled屬性。
ng-model 綁定應用程序數據（"myClick"）到 checkbox 元素的內容。
<div ng-app="" ng-init="myClick=true">
<p>
<button ng-disabled="myClick">button</button>
<input type="checkbox" ng-model="myClick"/>選中按鈕
</p>
<p> 是否選中按鈕：{{ myClick }} </p>
</div>
6、ng-show / ng-hide 顯示或隱藏一個HTML元素
<div ng-app="xxApp" ng-controller="xxCtrl">
<button ng-click="isVisible()">hide / show</button>
<!-- ng-show="info" 同 -->
<p ng-hide="info">
firstName: <input type=text ng-model="firstName"><br>
lastName: <input type=text ng-model="lastName"><br><br>
姓名: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('xxApp', []);
app.controller('xxCtrl', function($scope) {
$scope.firstName = "Evan";
$scope.lastName = "Lee";
$scope.info = false;
$scope.isVisible = function() {
$scope.info = !$scope.info;
}
});
</script>
輸出： 
7、ng-click 單擊事件
<div ng-app="xxApp" ng-controller="xxCtrl">
{{ count }}
<button ng-click="count = count + 1">點擊+1</button>
</div>
<script>
var app = angular.module('xxApp', []);
app.controller('xxCtrl', function($scope) {
$scope.count = 1215;
});
</script>
輸出： 
8、自定義指令
<div ng-app="xxApp" my-dir></div>
<br>
<my-dir>自定義指令！</my-dir>
<script>
var app = angular.module("xxApp", []);
app.directive("myDir", function() {
return {
template : "創建自定義指令!"
};
});
</script>
輸出： 
模塊和控制器
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<!-- 包含應用模塊的定義程序 -->
<script src="xxApp.js"></script>
<!-- 包含控制器 -->
<script src="xxCtrl.js"></script>
//xxApp.js
//[] 參數用於定義模塊的依賴關係,存在依賴則在[]內寫上依賴的模塊名
var app = angular.module("xxApp", []);
//xxCtrl.js
app.controller("xxCtrl", function($scope) {
$scope.firstName = "Evan";
$scope.lastName= "Lee";
});