AngularJS入門教學之Hello World!_AngularJS

開始學習AngularJS的一個好方法是創建經典應用程式「Hello World!」：

1.使用您喜愛的文字編輯器，建立一個HTML文件，例如：helloworld.html。
2.將下面的原始碼複製到您的HTML檔案。
3.在web瀏覽器中開啟這個HTML檔。

原始碼：

複製程式碼 程式碼如下:

   
       
   
   
        Hello {{'World'}}!
   

請在您的瀏覽器中執行以上程式碼查看效果。

現在讓我們仔細看看程式碼，看看到底怎麼回事。 當載入該頁時，標記ng-app告訴AngularJS處理整個HTML頁並引導應用：

複製程式碼 程式碼如下:

這行載入AngularJS腳本：

複製程式碼 程式碼如下:

（想了解AngularJS處理整個HTML頁的細節，請看Bootstrap。）

最後，標籤中的正文是應用的模板，在UI中顯示我們的問候語：

複製程式碼 程式碼如下:

Hello {{'World'}}!

注意，使用雙大括號標記{{}}的內容是問候語中綁定的表達式，這個表達式是一個簡單的字串‘World'。

下面，讓我們來看一個更有趣的例子：使用AngularJS對我們的問候文本綁定一個動態表達式。

Hello AngularJS World!

本範例示範AngularJS的雙向資料綁定（bi-directional data binding）：

1.編輯前面建立的helloworld.html文件。
2.將下面的原始碼複製到您的HTML檔案。
3.刷新瀏覽器視窗。

原始碼：

複製程式碼 程式碼如下:

   
       
   
   
        Your name:
       

---

        Hello {{yourname || 'World'}}!
   

請在您的瀏覽器中執行以上程式碼查看效果。

此範例有幾個重要的注意事項：

1.文字輸入指令綁定到一個叫yourname的模型變數。
2.雙大括號標記將yourname模型變數加入問候語文字。
3.你不需要為該應用程式另外註冊一個事件偵聽器或新增事件處理程序！

現在試著在輸入框中鍵入您的名稱，您鍵入的名稱將立即更新顯示在問候語中。 這就是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應用程式。