1.1.3 搭建開發(fā)Angular應(yīng)用的環(huán)境
1．下載Angular文件框架庫
在Angular的官方網(wǎng)站（http://angularjs.org/）中，下載最新版本的Angular文件庫，該網(wǎng)站的頁面如下圖1-1所示。
圖1-1下載Angular文件庫的界面
在Angular官網(wǎng)中，點擊“Download”（下載）按鈕，選擇最新版本的Zip壓縮文件包到本地，目前（截止到2014年4月）最新版為1.2.16，本書的全部案例都是基于本版本基礎(chǔ)之上開發(fā)的。
2．引入Angular文件庫
當(dāng)下載完最新版本的Angular壓縮包后，并不需要任何的安裝，只需要將其中的angular.js文件通過使用<script>標(biāo)記導(dǎo)入到頁面中即可。假設(shè)該文件下載后保存在項目的Script文件夾中，那么，只需要在頁面的<head></head>元素中加入下列的代碼：
<script src="../Script/angular.min.js" type="text/javascript"></script>
通過加入上述代碼便完成了Angular框架的引入，這種方式是對下載后的本地框架庫的引入。還可以直接通過<script>元素調(diào)用CDN中的Angular框架文件，CDN地址為：https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js，因此，加入<head></head>元素中的代碼修改為：
??<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" type="text/javascript"></script>
這兩種方式都可以實現(xiàn)Angular框架文件引入頁面的功能。在完成框架文件的引入之后，就可以開啟我們“神奇”的Angular之旅了。
1.2 開發(fā)簡單的Angular應(yīng)用
首先，我們來編寫一個簡單的Angular應(yīng)用，參見下列的示例。
示例1-1 編寫一個簡單的Angular程序
(1) 功能描述
當(dāng)頁面加載時，在頁面的正文部分顯示“Hello,歡迎來到angular世界！”的字樣。
(2) 實現(xiàn)代碼
新建一個HTML文件1-1.html，加入如代碼清單1-1所示的代碼。
代碼清單1-1 第一個簡單的Angular程序
<!doctype html>
<html ng-app>
<head>
? ? <title>第一個簡單的angular程序</title>
? ? <script src="../Script/angular.min.js"?
? ? ? ? ? ? type="text/javascript"></script>
</head>
<body>
? ? {{'Hello,歡迎來到angular世界！'}}
</body>
</html>
(3) 頁面效果
HTML文件1-1.html最終實現(xiàn)的頁面效果如下圖1-2所示。
圖1-2 第一個簡單的Angular程序
(4) 源碼分析
? ? 在本示例的代碼中，我們先在<html>元素中增加了一個“ng-app”屬性，這一屬性的功能是通知引入的Angular文件框架，頁面中的哪個部分開始接受它的管理。既然是在<html>元素中增加這個屬性，表明Angular可以管理整個頁面文件，“ng-app”屬性還可以添加至某個<div>元素中，表明僅在這個<div>范圍內(nèi)，可以調(diào)用Angular框架管理其中包含的DOM元素。
? ? 此外，在頁面的<body>元素中，使用兩個大括號的方式包含了一個字符串，其中兩個大括號是Angular框架插入動態(tài)數(shù)據(jù)的一種方式，我們稱之為“雙花括號插值語法”。在通常情況下，通過這種方式插入的數(shù)據(jù)均為表達(dá)式，并且在插入時已獲取了表達(dá)式的結(jié)果值，并直接將該值顯示在頁面中。在本實例中，由于表達(dá)式是字符串內(nèi)容，因此，直接顯示在頁面中。
