本文執行個體講述了AngularJS入門教程之Helloworld樣本。分享給大家供大家參考，具體如下：
什麼是AngularJs？
angularjs是一個為動態WEB應用設計的結構架構。它能讓你使用HTML作為範本語言，通過擴充HTML的文法，讓你能更清楚、簡潔地構建你的應用組件。它的創新點在於，利用資料繫結和依賴注入，它使你不用再寫大量的代碼了。這些全都通過瀏覽器端的javascript實現，這也使得它能夠完美地和任何伺服器技術結合。
AngularJS簡單的Helloworld例子：
|
<!DOCTYPE HTML>
<!-- 告訴AngularJs引擎從這裡開始是ng-app管理 -->
<html lang="en-US"ng-app>
<head>
<meta charset="UTF-8">
<title>AngularJS例子</title>
</head>
<body>
<!-- ng-model資料模型 -->
<input type="text"ng-model='name'placeholder="yourname"/>
<!-- {{}}angular運算式 -->
<h1>Hello {{name}}</h1>
<script type="text/javascript"src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
</body>
</html>
|
這個例子其實展示了angularjs的資料雙向繫結，
左邊為資料單向綁定圖解，通常是要你管jquery，backbone這類架構，右邊為angularjs資料雙向繫結。
模型 視圖 控制器（MVC）
MVC背後的核心概念就是，你在你的代碼之間明確分離管理資料（模型），應用程式邏輯（控制器），並將資料給使用者（視圖）。
視圖從模型中擷取資料展示給使用者。當使用者通過點擊或者輸入和應用程式進行互動時，控制器通過改變模型中的資料響應。最終，模型層通知視圖層，已經發生改變，一邊更新顯示。
在Angluar應用中，視圖層就是DOM，控制器就是Javascript類，模型資料存放區在對象屬性中。
angularjs資料繫結
像jquery庫這種擴充到用戶端的模式，讓我們遵循相似的風格，但由於更新的能力，單獨地DOM的部分，而不是更新整個頁面。這裡，我們合并HTML字串和資料，然後通過元素上設定innerHTML將結構插入到我們想要的Dom中。
這一切都啟動並執行相當好，但是你想將新資料插入到介面，或者改變基於使用者輸入的資料時，你需要做很多又不是價值不高的工作，來確保同時在介面和javascript屬性中擷取的資料正常的狀態。
但是，倘若我們有什麼東西把這些工作都為我們做好了，同時不需要寫代碼？倘若我能僅僅聲明介面的某一部分映射到javascript的屬性，讓他們自動的同步？這種編程方式叫做資料繫結。我們在angular中包括這種功能，因為當編寫視圖和模型時，使用mvc來消除代碼那是非常棒的。移動資料從一個地方的絕大部分自動發生。
註：最上面的例子就能體現
依賴注入（DI）
$scope對象把資料繫結自動的傳遞給了我們。我們沒有必要通過調用任何函數來建立它。我們只是要求把它放到HelloController建構函式中。
在後續學習中，我們發現，scope並不是我們唯一需要的。如果我們需要資料繫結它到使用者瀏覽器指定的URL地址中，我們需要在建構函式中，添加一個scope並不是我們唯一需要的。如果我們需要資料繫結它到使用者瀏覽器指定的URL地址中，我們需要在建構函式中，添加一個location對象，就這樣：
|
functionHelloController($scope,$location){
$scope.greeting={text:'Hello'}
//使用$location 在這
}
|
通過Angular的依賴注入系統，我們可以得到這種效果。依賴注入允許我們遵循一種開發風格，這種開發風格中，不是建立依賴，我們的類僅僅添加他們需要的。
這個遵循了一個叫迪米特法則的設計模式，也被稱作最少知識法則。由於HelloController的任務是建立greeting模型的初始值，這種模式就是說，它不需要擔心像$scope如何建立以及在那裡找到它。
angularJs指令
angular最優秀部分之一是你可以把你寫的模板當成HTML。因為在架構的核心層，我們已經包括了一個強大的DOM轉換引擎，可以讓你擴充HTML文法，因此你才可以這樣做。
我們已經在模板檔案中看到了多個新的屬性，這些並不是HTML規範的一部分。樣本中包括兩個大括弧是用來資料繫結的，ng-controller是用來指定那個控制器來服務那個師徒，ng-model將一個輸入框綁定到模型部分。我們稱這些叫HTML擴充指令。
angular帶有很多標識符，協助你為你的應用程式定義視圖。這些標識符可以定義我們常見的視圖作為模板。它們可以說明應用程式如何工作的或者建立可重複使用的組件。
同時不局限於Angular內建的標識符。你可以寫你自己的來擴充HTML模板，做任何你想做的事。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
