標籤：
AngularJS是一個超棒的javascript架構，不單單對於開發人員來說非常有吸引力，對於UI設計師來說也同樣出色。在這篇教程中，我們將簡單的介紹AngularJS幾個重量級必備特性，並且介紹它如何能夠讓你的web應用更加強大！
AugularJS簡單介紹AngularJS是一個新出現的強大用戶端技術，提供給大家的一種開發強大應用的方式。這種方式利用並且擴充HTML，CSS和javascript，並且彌補了它們的一些非常明顯的不足。本應該使用HTML來實現而現在由它開發的動態一些內容。
在這篇文章中，我們講述了一些最重要的AngularJS功能和特性。我們的目標在於閱讀後，你可以開始自己開發一些有趣的應用。
特性一：雙向的資料繫結資料繫結可能是AngularJS最酷最實用的特性。它能夠協助你避免書寫大量的初始代碼從而節約開發時間。一個典型的web應用可能包含了80%的代碼用來處理，查詢和監聽DOM。資料繫結是的代碼更少，你可以專註於你的應用。
我們想象一下Model是你的應用中的簡單事實。你的Model是你用來讀取或者更新的部分。資料繫結指令提供了你的Model投射到view的方法。這些投射可以無縫的，毫不影響的應用到web應用中。
傳統來說，當model變化了。 開發人員需要手動處理DOM元素並且將屬性反映到這些變化中。這個一個雙向的過程。一方面，model變化驅動了DOM中元素變化，另一方面，DOM元素的變化也會影響到Model。這個在使用者互動中更加複雜，因為開發人員需要處理和解析這些互動，然後融合到一個model中，並且更新View。這是一個手動的複雜過程，當一個應用非常龐大的時候，將會是一件非常費勁的事情。
這裡肯定有更好的解決方案！那就是AngularJS的雙向資料繫結，能夠同步DOM和Model等等。
這裡有一個非常簡單的例子，用來示範一個input輸入框和<h1>元素的雙向繫結：
<!doctype html>特性二：模板
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello, {{yourName}}!</h1>
</div>
</body>
</html>
在AngularJS中，一個模板就是一個HTML檔案。但是HTML的內容擴充了，包含了很多協助你映射model到view的內容。
HTML模板將會被瀏覽器解析到DOM中。DOM然後成為AngularJS編譯器的輸入。AngularJS將會遍曆DOM模板來產生一些指導，即，directive（指令）。所有的指令都負責針對view來設定資料繫結。
我們要理解AuguarJS並不把模板當做String來操作。輸入AngularJS的是DOM而非string。資料繫結是DOM變化，不是字串的串連或者innerHTML變化。使用DOM作為輸入，而不是字串，是AngularJS區別於其它的架構的最大原因。使用DOM允許你擴充指令詞彙並且可以建立你自己的指令，甚至開發可重用的組件。
最大的好處是為設計師和開發人員建立了一個緊密的工作流程。設計師可以像往常一樣開發標籤，然後開發人員拿過來添加上功能，通過資料繫結將會使得這個過程非常簡單。
這裡有一個例子，我們使用ng-repeat指令來循環圖表片數組並且加入img模板，如下：
function AlbumCtrl($scope) {
scope.images = [
{"image":"img/image_01.png", "description":"Image 01 description"},
{"image":"img/image_02.png", "description":"Image 02 description"},
{"image":"img/image_03.png", "description":"Image 03 description"},
{"image":"img/image_04.png", "description":"Image 04 description"},
{"image":"img/image_05.png", "description":"Image 05 description"}
];
}
<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>
這裡還有一件事值得提一句，AngularJS並不強制你學習一個新的文法或者從你的應用中提出你的模板。
特性三：MVC針對用戶端應用開發AngularJS吸收了傳統的MVC基本原則。MVC或者Model-View-Controll設計模式針對不同的人可能意味不同的東西。AngularJS並不執行傳統意義上的MVC，更接近於MVVM（Moodel-View-ViewModel)。
Modelmodel是應用中的簡單資料。一般是簡單的javascript對象。這裡沒有必要繼承架構的classes，使用proxy對象封裝或者使用特別的setter/getter方法來訪問。事實上我們處理vanilla javascript的方法就是一個非常好的特性，這種方法使得我們更少使用應用的原型。
ViewModelviewmodel是一個用來提供特別資料和方法從而維護指定view的對象。
viewmodel是$scope的對象，只存在於AnguarJS的應用中。$scope只是一個簡單的js對象，這個對象使用簡單的API來偵測和廣播狀態變化。
Controllercontroller負責設定初始狀態和參數化$scope方法用以控制行為。需要指出的controller並不儲存狀態也不和遠程服務互動。
Viewview是AngularJS解析後渲染和綁定後產生的HTML 。這個部分協助你建立web應用的架構。$scope擁有一個針對資料的參考，controller定義行為，view處理布局和互動。
特性四：依賴注入（Dependency Injection，即DI）AngularJS擁有內建的依賴注入子系統，可以協助開發人員更容易的開發，理解和測試應用。
DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個東西，DI負責找建立並且提供給我們。
為了而得到核心的AngularJS服務，只需要添加一個簡單服務作為參數，AngularJS會偵測並且提供給你：
function EditCtrl($scope, $location, $routeParams) {
// Something clever here...
}
你也可以定義自己的服務並且讓它們注入：
angular.特性五：Directives（指令）
module(‘MyServiceModule‘, []).
factory(‘notify‘, [‘$window‘, function (win) {
return function (msg) {
win.alert(msg);
};
}]);
function myController(scope, notifyService) {
scope.callNotify = function (msg) {
notifyService(msg);
};
}
myController.$inject = [‘$scope‘, ‘notify‘];
指令是我個人最喜歡的特性。你是不是也希望瀏覽器可以做點兒有意思的事情？那麼AngularJS可以做到。
指令可以用來建立自訂的標籤。它們可以用來裝飾元素或者操作DOM屬性。
這裡是一個例子，它監聽一個事件並且針對的更新它的$scope ，如下：
myModule.directive(‘myComponent‘, function(mySharedService) {
return {
restrict: ‘E‘,
controller: function($scope, $attrs, mySharedService) {
$scope.$on(‘handleBroadcast‘, function() {
$scope.message = ‘Directive: ‘ + mySharedService.message;
});
},
replace: true,
template: ‘<input>‘
};
});
然後，你可以使用這個自訂的directive來使用：
<my-component ng-model="message"></my-component>
使用一系列的組件來建立你自己的應用將會讓你更方便的添加，刪除和更新功能。
額外的特性：測試AngularJS內含了測試案例可以協助你更方便的執行測試。為什麼不用呢？
JS是一個動態解析性語言，而不是編譯類型的，因此非常的難寫測試。
AngularJS被開成一個可測試的架構。它甚至包含了點對點的單元測試runner。如果你喜歡這個特性，看看這個項目：https://github.com/angular/angular-seed
一但你運行這個項目，你可以看到如下輸出：
API文檔是完整的點對點測試，說明了整個架構師如何工作的。通過查看這些測試，你會對AngularJS有更深刻的瞭解。
總結在這篇教程中，我們總結了6個AngularJS的關鍵特性。如果大家對於AngularJS有興趣，請訪問http://angularjs.org
我強烈建議大家加入maillist，你肯定能找到很多的有用資訊。
Javascript教程：AngularJS的五個超酷特性
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
