標籤:style blog http java color 使用
AngularJS快速開始Hello World!
開始學習AngularJS的一個好方法是建立經典應用程式“Hello World!”:
- 使用您喜愛的文字編輯器,建立一個HTML檔案,例如:helloworld.html。
- 將下面的原始碼複製到您的HTML檔案。
- 在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>
請在您的瀏覽器中運行以上代碼查看效果。
現在讓我們仔細看看代碼,看看到底怎麼回事。 當載入該頁時,標記ng-app告訴AngularJS處理整個HTML頁並引導應用:
這行載入AngularJS指令碼:
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
(想瞭解AngularJS處理整個HTML頁的細節,請看Bootstrap。)
最後,標籤中的本文是應用的模板,在UI中顯示我們的問候語:
Hello {{‘World‘}}!
注意,使用雙大括弧標記{{}}的內容是問候語中綁定的運算式,這個運算式是一個簡單的字串‘World’。
下面,讓我們看一個更有趣的例子:使用AngularJS對我們的問候語文本綁定一個動態運算式。
Hello AngularJS World!
本樣本示範AngularJS的雙向資料繫結(bi-directional data binding):
- 編輯前面建立的helloworld.html文檔。
- 將下面的原始碼複製到您的HTML檔案。
- 重新整理瀏覽器視窗。
原始碼
<!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的模型變數。
- 雙大括弧標記將
yourname模型變數添加到問候語文本。
- 你不需要為該應用另外註冊一個事件接聽程式或添加事件處理常式!
現在試著在輸入框中鍵入您的名稱,您鍵入的名稱將立即更新顯示在問候語中。 這就是AngularJS雙向資料繫結的概念。 輸入框的任何更改會立即反映到模型變數(一個方向),模型變數的任何更改都會立即反映到問候語文本中(另一方向)。
AngularJS應用的解析
本節描述AngularJS應用程式的三個組成部分,並解釋它們如何映射到模型-視圖-控制器設計模式:
模板(Templates)
模板是您用HTML和CSS編寫的檔案,展現應用的視圖。 您可給HTML添加新的元素、屬性標記,作為AngularJS編譯器的指令。 AngularJS編譯器是完全可擴充的,這意味著通過AngularJS您可以在HTML中構建您自己的HTML標記!
應用程式邏輯(Logic)和行為(Behavior)
應用程式邏輯和行為是您用JavaScript定義的控制器。AngularJS與標準AJAX應用程式不同,您不需要另外編寫接聽程式或DOM控制器,因為它們已經內建到AngularJS中了。這些功能使您的應用程式邏輯很容易編寫、測試、維護和理解。
模型資料(Data)
模型是從AngularJS範圍對象的屬性引申的。模型中的資料可能是Javascript對象、數組或基本類型,這都不重要,重要的是,他們都屬於AngularJS範圍對象。
AngularJS通過範圍來保持資料模型與視圖介面UI的雙向同步。一旦模型狀態發生改變,AngularJS會立即重新整理反映在視圖介面中,反之亦然。
此外,AngularJS還提供了一些非常有用的服務特性:
- 底層服務包括依賴注入,XHR、緩衝、URL路由和瀏覽器抽象服務。
- 您還可以擴充和添加自己特定的應用服務。
- 這些服務可以讓您非常方便的編寫WEB應用。
原文:http://www.angularjs.cn/A002