AngularJS教程一——快速開始

hy3112發表於2015-09-11
AngularJS

Hello World!

原始碼

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
        <script id="others_angular_103" type="text/javascript" class="library" src="/js/sandbox/other/angular.min.js"></script>
    </head>
    <body>
        Hello {{'World'}}!
    </body>
</html>

檢視效果

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

<html ng-app>

這行載入AngularJS指令碼：

<script id="others_angular_103" type="text/javascript" class="library" src="/js/sandbox/other/angular.min.js"></script>

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

Hello {{'World'}}!

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

下面，使用AngularJS對我們的問候語文字繫結一個動態表示式。

Hello AngularJS World!

本示例演示AngularJS的雙向資料繫結（bi-directional data binding）：

原始碼

<!DOCTYPE html>
<html ng-app>
    <head>
        <script id="others_angular_103" type="text/javascript" class="library" src="/js/sandbox/other/angular.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編譯器的指令。
可以在HTML中構建您自己的HTML標記，即AngularJS指令（directive）！

應用程式邏輯（Logic）和行為（Behavior）

應用程式邏輯和行為是您用JavaScript定義的控制器(controller)。
AngularJS與標準AJAX應用程式不同，不需要另外編寫偵聽器或DOM控制器，因為它們已經內建到AngularJS中了，通過雙向繫結，改變模型變數的值，自動修改DOM節點。

模型資料（Data）

模型中的資料可能是Javascript物件、陣列或基本型別，他們都屬於AngularJS作用域（scope）物件。

AngularJS通過作用域（scope）來保持資料模型與檢視介面UI的雙向同步。一旦模型狀態發生改變，AngularJS會立即重新整理反映在檢視介面中，反之亦然。

相關文章