1. 快速開始 · AngularJS入門教程

## Hello World! 開始學習AngularJS的一個好方法是創建經典應用程序“Hello World!”： 1. 使用您喜愛的文本編輯器，創建一個HTML文件，例如：helloworld.html。 2. 將下面的源代碼復制到您的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> ~~~ 請在您的瀏覽器中運行以上代碼查看效果。現在讓我們仔細看看代碼，看看到底怎么回事。當加載該頁時，標記`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）： 1. 編輯前面創建的helloworld.html文檔。 2. 將下面的源代碼復制到您的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`的模型變量。 * 雙大括號標記將`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還提供了一些非常有用的服務特性： 1. 底層服務包括依賴注入，XHR、緩存、URL路由和瀏覽器抽象服務。 2. 您還可以擴展和添加自己特定的應用服務。 3. 這些服務可以讓您非常方便的編寫WEB應用。