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頁並引導應用：
<html ng-app>這行載入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應用程式的三個組成部分，並解釋它們如何對映到模型-檢視-控制器設計模式：
模板（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應用。
評論(1)