DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> AngularJS入門教程之Hello World!
AngularJS入門教程之Hello World!
編輯:關於JavaScript     

開始學習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>

請在您的浏覽器中運行以上代碼查看效果。

該示例有一下幾點重要的注意事項:

1.文本輸入指令<input ng-model="yourname" />綁定到一個叫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應用。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved