5個示例帶你學習AngularJS
直到現(xiàn)在，你或許已經(jīng)聽說過AngularJS了，一個改變你對web 應(yīng)用思考方式，由谷歌開發(fā)的令人興奮的開源框架。關(guān)于它的文章已經(jīng)寫得非常之多，但我發(fā)現(xiàn)還是要寫些給那些更喜歡快速且實際例子的開發(fā)者。當今對web編 程已經(jīng)發(fā)生了改變。下面通過對5個實例的解釋，你可以找到Angular應(yīng)用的基本構(gòu)建塊，包括模型，視圖，控制器，服務(wù)和過濾器，你可以在自己的瀏覽器 中直接編輯。如果你更傾向于在你喜歡的代碼編輯器中打開，那么請下載zip包。
什么是AngularJS？
在高層次理解之上，AngularJS是一個把HTML(視圖)綁定到JavaScript對象(模型)上的框架。當模型改變時，頁面也能自動隨之 更新，反之亦然。當某個域的內(nèi)容發(fā)生變化時，與之關(guān)聯(lián)的模型也能更新。正因為Angular處理了所有的中間代碼，所以你不用像jQuery那樣，手動更 新HTML或者事件監(jiān)聽。事實上，這里沒有任何一個例子使用到了jQuery！
如果要使用AnguarJS，你就得在<body>標簽結(jié)束之前把它包含到你的頁面里。這里推薦使用谷歌CDN，相比來說，它有比較快速的加載時間：
- <script
- src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"><
- /script>
AngularJS通過大量的指令讓你能夠在模型和HTML元素間做關(guān)聯(lián)。它們就是以ng-開頭的屬性，并且能添加到任何元素上。如果你想使用Angular，你不得不為每個頁面包含一個最重要的屬性，即ng-app:
- <body ng-app>
這個元素應(yīng)該被添加到能夠包含剩余頁面的元素上，諸如body或者外圍的div元素之類。當頁面加載時，Angular會尋找這個屬性，并且會自動評估在子元素上看到的所有指令。
理論部分就到此為止了！現(xiàn)在讓我們看看代碼。
1.導(dǎo)航菜單
作為第一個例子，我們要構(gòu)建一個會高亮選中條目的導(dǎo)航菜單。這個例子僅僅使用了Angular指令，同時可能也是使用這個框架最簡單的應(yīng)用。查看源代碼請單擊”編輯”按鈕。開始準備實驗了！
從以上的代碼得知，我們使用到了Angular指令來設(shè)置以及讀取active變量。當它改變時，它會引起使用到它的HTML自動更新。在 Angular的術(shù)語中，這樣的變量叫做模型。當前域中的所有指令都能使用它，并且在你的控制器(更多請看下面的例子)中也能獲取得到。
如果你之前使用過JavaScript模板，你對{{var}}語法應(yīng)該會很熟悉。當框架看到這樣的字符串時，它會用變量的內(nèi)容來代替。這種操作在變量改變時會重復(fù)一次。
2.內(nèi)聯(lián)編輯器
對第二個例子，我們會創(chuàng)建一個簡單的內(nèi)聯(lián)編輯器-單擊段落時會顯示文本提示框。我們會使用到一種控制器，能夠初始化模型，以及聲明兩個函數(shù)用來切換 提示的可見性?？刂破魇浅Ｒ?guī)的JavaScript函數(shù)，能自動被Angular執(zhí)行。使用中，用ng-controller指令關(guān)聯(lián)相關(guān)的頁面。
當控制器函數(shù)執(zhí)行時，它能得到特殊的$scope對象作為其一個參數(shù)。在這個對象上增加屬性或者函數(shù)，同樣對視圖可用。使用ng-model綁定在文本域上告訴Angular當域值改變時，要更新相關(guān)內(nèi)容(這樣反過來就能重新渲染段落上的值)。
3.訂單表單
在這個例子里，我們使用另一個Angular中非常有用的特性-過濾器，來編寫一個能實時更新總價的訂單表單。過濾器能通過管道符”|”級聯(lián)起來修改模型。在下面的例子中，我使用了貨幣過濾器，把數(shù)字轉(zhuǎn)換為正確格式化的價格，包括美元符號以及分。你也可以和即將看到的第四個例子一樣，很容易地創(chuàng)造自己的過濾器。
ng-repeat綁定(文檔)是框架的另一個有用的特性，能夠讓你遍歷數(shù)組元素并且生成相應(yīng)的標記。當某個條目改變或者刪除時，它能夠智能地更新。
注釋：要得到更完整的版本，請查閱此教程，基于這個版本用Backbone.js實現(xiàn)。
#p#
4.即時搜索
這個例子允許用戶通過在文本域輸入來過濾條目集。這是Angular另一個出眾的地方，也是編寫自定義的過濾器最合適的地方。既然要這樣做，首先我們就不得不把我們的應(yīng)用轉(zhuǎn)換成一個模塊。
模塊是把JavaScript應(yīng)用組織成通過新穎而又有趣的方式進行綁定形成獨立組件的一種方式。Angular通過這種技術(shù)達到了代碼分離，并且要求你創(chuàng)建過濾器時遵循這種方式。在把你的應(yīng)用轉(zhuǎn)變成模塊中，你僅僅需要做兩件事：
1.在你的JS中使用angular.module(“name”,[])函數(shù)調(diào)用。這樣就會進行初始化并且返回一個新的模塊；
2.通過ng-app指令值傳遞模塊的名稱。
然后創(chuàng)建過濾器僅僅是簡單地調(diào)用由angular.module(“name”,[])返回的模塊對象上的filter()方法。
過濾器同樣遵循Angular.js的哲學理念–每一份你寫的代碼應(yīng)該是獨立的，可測試的以及可重用的。你可以在所有視圖中使用這個過濾器，甚至通過級聯(lián)和其它組件連接起來。
5.切換網(wǎng)格
另一個經(jīng)常用到的交互UI是通過單擊按鈕來切換不同的布局模式(網(wǎng)格或者列表)。這用Angular來做非常容易。另外，我會介紹一下另一個重要的 概念–服務(wù)。它們是一種對象，能夠用來讓你的應(yīng)用和服務(wù)器進行交互，比如：API，或者其它數(shù)據(jù)源。這個例子里，我們會編寫一個與InstagramAPI交互的服務(wù)，用它來返回以數(shù)組形式當前最流行的圖片。
請注意，要運行此代碼，我們要在頁面中包含額外的一個Angular.js：
- <script
- src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"><
- /script>
這其中包含了ngResource模塊，能非常容易與AJAXAPI一起工作(此模塊在代碼中用$resource變量公開)。下面的編輯器里已經(jīng)自動包含了這個文件。
服務(wù)是完全獨立的，因此編寫不同的實現(xiàn)可以不影響其它的代碼。比如在測試時，你可能更喜歡返回一個硬編碼的圖片數(shù)組來加快測試過程。
原文鏈接：http://tutorialzine.com/2013/08/learn-angularjs-5-examples/
