需要添加AngularJS工具包
<script type="text/javascript" src="angular-1.3.0.js"></script>基礎練習：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title></title>
</head>
<body ng-app="">
<!-- ng-app= "" -->
<!-- 有時，標籤中只要寫ng-app，而有時卻要用ng-app=”MyApp”之類的帶具體值的寫法，那兩者區別在哪呢？-->
<!-- 如果在js文件中的寫法是直接用函數定義controller，例如： -->
<!-- var mycontroller = function($scope){ -->
<!-- $scope.msg = 'hello'; -->
<!-- } -->
<!-- 那麼在html中只需要用ng-app聲明即可 -->
<!-- 如果在js文件中是用module的方式來聲明controller，例如：-->
<!-- var app = angular.module('MyApp', []); -->
<!-- app.controller('mycontroller ',function($scope){ -->
<!-- $scope.msg = 'hello'; -->
<!-- }); -->
<!-- 那麼在html中就要聲明ng-app=”MyApp”，否則是無法使用mycontroller的。-->
<!--在AngularJS中，運算公式要寫在兩個大括號{{ * * * }}中，代碼執行後會直接輸出運算結果 -->
<div>{{8 + 2}}</div> <!-- 加法運算 -->
<div>{{8 - 2}}</div> <!-- 減法運算 -->
<div>{{8 / 2}}</div> <!-- 乘法運算 -->
<div>{{8 * 2}}</div> <!-- 除法運算 -->
<div>{{ true && false }}</div> <!-- 返回false -->
<!-- &&表示相與，也就是 A 和 B -->
<!-- 實際表現爲：在滿足條件A的同時，也要滿足條件B（二選二，三選三，多選多）-->
<div>{{ true || false }}</div> <!-- 返回true -->
<!-- ||表示相或，也就是 A 或者 B -->
<!-- 實際表現爲：滿足條件A，或者滿足條件B（二選一，三選一，多選一）-->
<div>{{ !true }}</div> <!-- 不等於true，也就是等於flase -->
<div>{{ !false }}</div> <!-- 不等於flase，也就是等於true -->
<hr>
<!-- ng-init="" // 執行自定義的變量或表達式 -->
<!-- {id: 1, name: '張三'} // 定義id的屬性， name的屬性 -->
<div ng-init="user = {id: 1, name: '張三'}">
<!-- ng-bind="" // 使用自定義的變量或表達式的值來替換 HTML 元素的內容 -->
<div>ID: <span ng-bind="user.id"></span></div>
<div>用戶名: <span ng-bind="user.name"></span></div>
</div>
<hr>
<!-- ng-repeat="" // 循環輸出指定次數的 HTML 元素 -->
<!-- "name in usernames | limitTo: 2" // 將username中的值傳給name | 限制字符串顯示的字符長度-->
<div ng-init="usernames = ['張三', '李四', '王五']">
<ul ng-repeat="name in usernames | limitTo: 2">
<li>{{ name }}</li>
</ul>
</div>
<hr>
<!-- filter: 'a' // 將匹配元素集合縮減爲匹配指定選擇器的元素-->
<!-- 示例中的意思爲：將username_en集合壓縮到name變量元素中，使用name可以獲取到username_en中的內容 -->
<div ng-init="usernames_en = ['zhangsan', 'lisi', 'wangwu', 'zhaolu']">
<ul ng-repeat="name in usernames_en | filter: 'a'">
<li>{{ name }}</li>
</ul>
</div>
<hr>
<!-- ng-init="clickNum = 0" // 設置點擊數 = 0 -->
<!-- ng-click="clickNum = clickNum + 1" // 設置點擊事件：點擊數 = 點擊數 + -->
<!-- 也就是，當前點擊數爲N，點擊一次，點擊數就會變爲 N+1 -->
<button ng-init="clickNum = 0" ng-click="clickNum = clickNum + 1">點擊我，增加次數</button>
<!-- {{ clickNum }} // 將點擊數輸出 -->
<p>點擊次數：<i>{{ clickNum }}</i></p>
************<!-- 綜合性小練習 -->************
<div ng-init="books = [{id: 1, title: 'Java編程思想', isRecommend: false, dtCreated: '00-00 00:01'}, {id: 1, title: 'C++編程思想', isRecommend: true, dtCreated: '00-00 00:02'}, {id: 1, title: '高性能MySQL', isRecommend: false, dtCreated: '00-00 00:03'}]">
<table border="1">
<tr>
<th>NO</th>
<th>ID</th>
<th>標題</th>
<th>是否推薦</th>
<th>價格</th>
</tr>
<tbody ng-repeat="book in books">
<tr>
<td>{{$index}}</td>
<td>{{book.id}}</td>
<td>{{book.title}}</td>
<td>
<i ng-if="book.isRecommend">是</i>
<i ng-if="!book.isRecommend">否</i>
</td>
<td>{{book.price}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>