在本文中讓我們來逐步發掘angular為什么如此火:
Angular.js 是一個MV*（Model-View-Whatever，不管是MVC或者MVVM，統歸MDV(model Drive View)）JavaScript框架，其是Google推出的SPA（single-page-application）應用框架，其為我們的web應用開發增加不少魔法變換。
我可以花整天的時間告訴你為什么你必須在新項目嘗試angular.js，但是我覺得還是百說不如一練。
數據綁定和scopes(作用域)
首先第一個浮出大腦的問題是：angular支持數據綁定嗎？
下面讓我們來了解angular.js的數據綁定：
<body ng-app>
<span>Insert your name:</span>
<input type="text" ng-model="user.name" />
<h3>Echo: {{user.name}}</h3>
</body>
在這代碼片段中，在我們解釋細節之前，我還是希望嘗試下其效果：
注：此刻暫時不要太心急去了解ng-app。
如你所見，我在input中輸入的將會顯示在后邊echo。這是如何工作的？簡單來說，angular的ng-model(更多關於指令的將在文章后續)給我帶來了雙向綁定機制。
如此是好，但是user.name存儲在哪里呢？其存儲在我們的$scope上，當我們在input中輸入任何字符都會及時的更新scope對象上的user.name屬性。然后我們可以利用angular的表達式{{...}}現實在HTML中。所以當我們在input中輸入時，其會及時更新scope上的user,name屬性，在由修改HTML顯示。
好吧，這並不難，但是你所說的$scope是個什么東東呢？在angular中$scope是連接controllers(控制器)和templates(模板view/視圖)的主要膠合體。我們可以把我們的model存放在scope上，來達到雙向你綁定。
這就好比：
這意味着我們我們從template上為$scope設置了一個屬性對象user.name，所以我們也可以在controller中訪問這個對象(user.name).
讓我們來看個更復雜的示例：
var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.message = 'World'; }); <body ng-app="app" ng-controller="MainCtrl"> Hello, {{ message }} </body>
在這里首先我們定義了angular application，只是簡單的創建了一個angular module，其接受一個module名字和依賴數組為參數。
緊接着創建了一個controller，通過調用 app module的controller方法，並傳入一個controller 名字和function。function函數接受$scope參數（可以接受更多的參數，放在后面部分）。所以我們可以開始雙向綁定了。
在$scope中我們附加了message的字符串屬性。
在view中你可能注意到了body tag多出了一些東東，這是干什么的？這些是angular的指令(directives)，它給HTML帶來了新的語法擴展，在這例子中我們使用了兩個angular內置的指令：
ng-app：它會告訴angularbody節點包含了我們的angular應用，換句話說，在body中的一切會被angular所接受管理。其參數為我們的app module的名字，和我們在javascript中命名一致。
ng-controller：在這指令在我們傳入的是controller 名字，此例中為MainCtrl。
最后我們將message插入我們的remplate。
所以其可視化表示將是：
聰明的你可以會冒出一個疑問：我們能夠在$scope上綁定function？
當然。
var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.greet = function() { $scope.message = "Hello, " + $scope.user.name; } }); <body ng-app="app" ng-controller="MainCtrl"> What's your name?: <input type="text" ng-model="user.name" /> <button ng-click="greet()">Click here!</button> <h3>{{ message }}</h3> </body>
我在示例controller中很容易了解到如何添加function到$scope。示例中function將修改$scope.message為“hello ，”和從input輸入的$scope.user.name的字符串連接。
然后在HTML中創建一個附加了angular bg-click 指令的button。ng-click指令是的button在被點擊時會執行我們為其賦值的greet()表達式。
注意：在input中enter並不會工作，這是展示ng-click如何工作。
指令
我們已經看見了一些指令了，指令是個什么東東？
指令為HTML引入了新的語法。HTML已經很強大了，但是有時我需要更多...
看下面的例子：
<body> <div id="chart"></div> </body>
示例代碼在做什么？除了看見id外，我真的什么也不能獲知。
然后我們只得從多余30個javascript文件中去查找，最后我們看見如下代碼：
$('#chart').pieChart({ ... });
Aha！原來是個餅圖（pie chart）容器。
在這里如果你不去查找javascript文件將無法獲知頁面到底是做什么的，實現了什么功能。
下面我們再來看看angular code，
<body> <pie-chart width="400" height="400" data="data"></pie-chart> </body>
是不是語義很清晰，我們可以一眼看出這是一個pie chart，不僅如此，而且還知道width,height，以及其數據。
如果你對pie chart 示例感興趣，請猛擊這里
angular內置指令
angular給我帶來了大量的內置指令。我們已經在前面看見了ng-app,ng-controller,ng-click,ng-model(angular的內置指令都以ng開始)，接下來讓我了解更多的內置指令。
有時在頁面中有部分內容我們只希望到達某狀態（屬性為true）才顯示：
<button ng-click="show = !show">Show</button> <div ng-show="show"> I am only visible when show is true. </div>
ng-show僅當angular其表達式值為true時，才顯示該元素或子元素。
注意：在這里對於ng-click我們並不是直接在controller中創建function(此刻我們沒真正的controller)，利用angular表達式作為指令的參數。在首次表達式為undefined，然后我們設置為為true，在false如此交替。
angular同時也提供了ng-hide指令。
讓我們看些更有趣的指令，如果有個List或者數組呢？
var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.developers = [ { name: "Jesus", country: "Spain" }, { name: "Dave", country: "Canada" }, { name: "Wesley", country: "USA" }, { name: "Krzysztof", country: "Poland" } ]; }); <body ng-app="app" ng-controller="MainCtrl">
<ul>
<li ng-repeat="person in developers"> {{person.name}} from {{person.country}} </li>
</ul>
</body>
棒極了，我們在controller中定義了一個list對象，在HTML用ng-repeat就能簡單的顯示了。
它是如何工作的？
ng-repeat會為集合中的每一項創建一個新的模板，在示例中有四項數據，將會重復創建下面code四次，
<li ng-repeat="person in developers"> {{person.name}} from {{person.country}} </li>
每次復制都會創建自己新的scope，我們沒有為每項手動創建scope，我們可以把scope理解為其scope，但是在這里我們仍然能夠訪問父scope。
可視化的展示為：
我們能自定義directive？
當然，我們能以不同粒度方式創建angular的directive，例如modal dialogs accordions， paginators， charts，search from ...
angular指令總是與可視化有關？不，我們仍然可以創建一些非可視化的指令集。
讓我們來看一個例子吧：
回到我們上面的greet示例：
<body ng-app="app" ng-controller="MainCtrl"> What's your name?: <input type="text" ng-model="user.name" /> <button ng-click="greet()">Click here!</button> <h3>{{ message }}</h3> </body>
已經能夠很好的工作了，但是我們希望能夠在頁面初始化的時候光標焦點聚焦在輸入框input。jQuery？jQuery提供了focus函數，能夠很簡單的完成，但是這里是angular教程，所以我們需要以angular way，顯得我們更專業些...
同時我們也希望我們的HTML能夠有自描述能力(譯者注：現代軟件開發特別語言語義更重要，如linq，guava，restfull...) ，所以angular directive肯定是個好的選擇。
app.directive('focus', function() {
return {
link: function(scope, element, attrs) {
element[0].focus();
}
};
});
接下來，我們可以在可以HTML中標注angular directive(angular directive首字母小寫駝峰命名，在前台轉換為全小寫-分割風格)。
directive是angular中最復雜的要點，這里只是最簡單的directive而已，如果可能這將放在以后文章，這里並不會深入。
directive需要一個object的返回對象，我們可以定義一些需要關注的屬性，在示例中我們返回了一個link的鏈接函數（link函數主要作為directive的行為綁定）， 我們如果需要，也可以替換HTML中模板。
Link function有3個參數（准確應該是是4個）scope，節點element，還有所有HTML attribute iAttrs。在link函數里我們可以綁定click，mouseenter等事件，注冊指令行為。
在示例中我們為指令節點使用了focus操作。對element了解更多，你可以移步到這里。
我們可以很簡單的使用指令如下：
<body ng-app="app" ng-controller="MainCtrl"> What's your name?: <input type="text" focus ng-model="user.name" /> <button ng-click="greet()">Click here!</button> <h3>{{ message }}</h3> </body>
目前我們看見的directive都很簡單，如何利用指令渲染上面說的固定模板呢？
如下：
app.directive('hello', function() {
return {
restrict: "E",
replace: true,
template: "<div>Hello readers, thank you for coming</div>"
}
});
這里返回的是帶有一些attribute的object。
-
restrict：指令的使用方式
-
Attribute 形如:<div foo></div>.
-
Element 形如：<foo></foo>
-
Class 形如: <div class=”foo”></div>
-
CoMment 形如: <!-- directive: foo -->
-
replace：詢問是不是需要利用我們的模板替換原來的節點。
-
template：我們需要append或者replace到原節點的html模板。
directive還有很多的可配置options，如編譯compile，template url ...
在示例我們不需要行為的綁定，所有沒有link function。其使用如下：
<hello></hello>
Filters(過濾器)
假想我們有個購物車的view顯示如下：
<span>There are 13 phones in the basket. Total: {{ 1232.12 }}</span>
我們如何利用angular表達式顯示為貨幣格式？形如：$1,232.12。
相當簡單，angular為我們提供了叫filter得東東，過濾器其好比unix中的管道pipeline。angular同時也內置了貨幣currency filter.
<span>There are 13 phones in the basket. Total: {{ 1232.12 | currency }}</span>
如你所見，我們可以用| 使用filter，這和unix管道模型很相似。我們也可以使用|鏈接更多的filter。
例如我們可以對開發人員簡單排序，在用ng-repeat顯示出來：
<ul> <li ng-repeat="person in developers | orderBy:'name'"> {{ person.name }} from {{ person.country }} </li> </ul>
在這里你發現了一些很有趣的事？衛門你可以給filter傳遞參數!
OrderBy filter會接受一個屬性名，並以它進行排序，示例中我們使用 name，如果你希望反序排列，你可以用 -name表示。
馬上你可能會冒出你頭腦：假想我們不止4個開發人員，有300，並且我們希望通過 name，country過濾呢？
非常簡單：
<body ng-app="app" ng-controller="MainCtrl"> Search: <input ng-model="search" type="text" /> <ul> <li ng-repeat="person in developers | filter:search"> {{ person.name }} from {{ person.country }} </li> </ul> </body>
在示例中請注意我們是如何綁定search.name的,此處利用name 做filtering。filter的參數不會改變，綁定是search對象，會根據我們在input中輸入改變，而filter則會找尋search對象中的name屬性。
到這里我希望你也像我一樣一樣興奮起來了！
下面我們來自定義filter呢？實現單詞首字母大寫 filter：
app.filter('capitalize', function() {
return function(input, param) {
return input.substring(0,1).toUpperCase()+input.substring(1);
}
});
這里我們自定義了一個filter其接受輸入參數input和過濾器參數param的一個函數。
接下來我們將在view使用它：
<span>{{ "this is some text" | capitalize }}</span>
Services
在文章最后，我們需要再次較少下services。這是一個的維護應用程序功能邏輯部分，他是一個單間模式singleton。
為了保持應用程序的邏輯層次分明，更趨向於將其業務邏輯放到不同的services，保持controller的邏輯只有流程控制和view交互邏輯。
angular內置了很多services，如$http http請求，$q 異步promises編程模式...在這里我們不會討論angular的內置services，由於有很多的services，並且很難一次性解釋完，將在后續文章。我們將創建一個簡單的自定義services。
在controller之間共享數據對我們很有用，每個controller都有自己的scope所以我們不能將其綁定到其他的controller。所以解決方案是services，可以吧數據共享到services，在需要用到的地方引用它。
首先我們來看看如果不用services，我們將會遇見什么問題：
<div ng-controller="MainCtrl"> MainCtrl: <input type="text" ng-model="user.name"> </div> <div ng-controller="SecondCtrl"> SecondCtrl: <input type="text" ng-model="user.name"> </div>
app.controller('MainCtrl', function($scope) {
});
app.controller('SecondCtrl', function($scope) {
});
我們使用了相同的ng-model，預期當一個input改變時候會及時更新到另一個input，如下：
但是實際情況卻是：
接下來需要借助services來解決這個問題，利用services將user name在controller之間共享。
app.factory('UserInformation', function() {
var user = {
name: "Angular.js"
};
return user;
});
這里用的是factory去創建一個service。angular中還有其他更高級的方式去創建service，如service，provider，這將會在后續文章詳解。
這里有很多方式去創建service，我們選擇的是創建了一個帶有name默認值的user對象，並返回它。
在controllers中如何去使用呢？如下：
app.controller('MainCtrl', function($scope, UserInformation) {
$scope.user = UserInformation;
});
app.controller('SecondCtrl', function($scope, UserInformation) {
$scope.user = UserInformation;
});
現在我們的程序形如：
酷極了，它工作了,工作了。
現在我們的$scope.user在MainCtrl和SecondCtrl都用的是UserInformation，並且service是單例的，所以當我們更新其中一個controller的時候，另外一個也將會被更新。也有你又有了一個疑問：UserInformation參數是從哪里來的？
angular核心是DI(依賴注入)在需要使用的地方會自定注入service。DI將不會在本節中講述，我們可以簡單的說，你創建了一個service，你可以在module作用域的controller，directive，甚至是其他service作為參數來輕松使用。
也許你對上面出現的$scope認為他也是個service，其實這是一個例外，其並不是真正的service注入到我們的controller。
總結：
到這里我們完成了第一篇但不是最后一篇angular博客。
Angular.js是一個優秀的框架，我敢肯定你也愛上了它。希望能在下片文章中仍然能見到你的倩影。
希望你能enjoyed這篇文章，也能夠評論些你的觀點。
英語原文來自：http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/