## Hello World!
開始學(xué)習(xí)AngularJS的一個好方法是創(chuàng)建經(jīng)典應(yīng)用程序“Hello World!”:
1. 使用您喜愛的文本編輯器,創(chuàng)建一個HTML文件,例如:helloworld.html。
2. 將下面的源代碼復(fù)制到您的HTML文件。
3. 在web瀏覽器中打開這個HTML文件。
源代碼
~~~
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>
~~~
請在您的瀏覽器中運行以上代碼查看效果。
現(xiàn)在讓我們仔細(xì)看看代碼,看看到底怎么回事。 當(dāng)加載該頁時,標(biāo)記`ng-app`告訴AngularJS處理整個HTML頁并引導(dǎo)應(yīng)用:
~~~
<html ng-app>
~~~
這行載入AngularJS腳本:
~~~
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
~~~
(想了解AngularJS處理整個HTML頁的細(xì)節(jié),請看Bootstrap。)
最后,標(biāo)簽中的正文是應(yīng)用的模板,在UI中顯示我們的問候語:
~~~
Hello {{'World'}}!
~~~
注意,使用雙大括號標(biāo)記`{{}}`的內(nèi)容是問候語中綁定的表達式,這個表達式是一個簡單的字符串‘World’。
下面,讓我們看一個更有趣的例子:使用AngularJS對我們的問候語文本綁定一個動態(tài)表達式。
## Hello AngularJS World!
本示例演示AngularJS的雙向數(shù)據(jù)綁定(bi-directional data binding):
1. 編輯前面創(chuàng)建的helloworld.html文檔。
2. 將下面的源代碼復(fù)制到您的HTML文件。
3. 刷新瀏覽器窗口。
源代碼
~~~
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!
</body>
</html>
~~~
請在您的瀏覽器中運行以上代碼查看效果。
該示例有一下幾點重要的注意事項:
* 文本輸入指令`<input ng-model="yourname" />`綁定到一個叫`yourname`的模型變量。
* 雙大括號標(biāo)記將`yourname`模型變量添加到問候語文本。
* 你不需要為該應(yīng)用另外注冊一個事件偵聽器或添加事件處理程序!
現(xiàn)在試著在輸入框中鍵入您的名稱,您鍵入的名稱將立即更新顯示在問候語中。 這就是AngularJS雙向數(shù)據(jù)綁定的概念。 輸入框的任何更改會立即反映到模型變量(一個方向),模型變量的任何更改都會立即反映到問候語文本中(另一方向)。
## AngularJS應(yīng)用的解析
本節(jié)描述AngularJS應(yīng)用程序的三個組成部分,并解釋它們?nèi)绾斡成涞侥P?視圖-控制器設(shè)計模式:
### 模板(Templates)
模板是您用HTML和CSS編寫的文件,展現(xiàn)應(yīng)用的視圖。 您可給HTML添加新的元素、屬性標(biāo)記,作為AngularJS編譯器的指令。 AngularJS編譯器是完全可擴展的,這意味著通過AngularJS您可以在HTML中構(gòu)建您自己的HTML標(biāo)記!
### 應(yīng)用程序邏輯(Logic)和行為(Behavior)
應(yīng)用程序邏輯和行為是您用JavaScript定義的控制器。AngularJS與標(biāo)準(zhǔn)AJAX應(yīng)用程序不同,您不需要另外編寫偵聽器或DOM控制器,因為它們已經(jīng)內(nèi)置到AngularJS中了。這些功能使您的應(yīng)用程序邏輯很容易編寫、測試、維護和理解。
### 模型數(shù)據(jù)(Data)
模型是從AngularJS作用域?qū)ο蟮膶傩砸甑?。模型中的?shù)據(jù)可能是Javascript對象、數(shù)組或基本類型,這都不重要,重要的是,他們都屬于AngularJS作用域?qū)ο蟆?
AngularJS通過作用域來保持?jǐn)?shù)據(jù)模型與視圖界面UI的雙向同步。一旦模型狀態(tài)發(fā)生改變,AngularJS會立即刷新反映在視圖界面中,反之亦然。
### 此外,AngularJS還提供了一些非常有用的服務(wù)特性:
1. 底層服務(wù)包括依賴注入,XHR、緩存、URL路由和瀏覽器抽象服務(wù)。
2. 您還可以擴展和添加自己特定的應(yīng)用服務(wù)。
3. 這些服務(wù)可以讓您非常方便的編寫WEB應(yīng)用。
