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