現(xiàn)在就開(kāi)始使用AngularJS的三個(gè)重要原因
如果你不熟悉什么是Angular.js的話(huà)，小編我強(qiáng)烈推薦你閱讀 Javascript教程：AngularJS的五個(gè)超酷特性。簡(jiǎn)單來(lái)說(shuō)Angular.js是google開(kāi)發(fā)者設(shè)計(jì)和開(kāi)發(fā)的一套前端開(kāi)發(fā)框架，幫助你簡(jiǎn)化前端開(kāi)發(fā)的負(fù)擔(dān)。當(dāng)然，這里有很多其它的前端開(kāi)發(fā)框架，但是如何選擇合適的前端框架對(duì)于我們這些開(kāi)發(fā)人員來(lái)說(shuō)就不是那么容易了！在今天的這篇文章中，我們將介紹三個(gè)你應(yīng)該使用Angular.js的重要原因，希望大家覺(jué)得有幫助！
原因一：Google開(kāi)發(fā)的框架
要知道開(kāi)源界的很多框架都是開(kāi)發(fā)人員由于個(gè)人興趣或者激情而開(kāi)發(fā)出來(lái)的，比如，Cappucino 還有 Knockout。而anguar.js是由互聯(lián)網(wǎng)巨人Google組織開(kāi)發(fā)的。這意味這你有更加強(qiáng)大的社區(qū)支持。誰(shuí)都不希望第一天開(kāi)始使用一個(gè)框架，第二天發(fā)現(xiàn)這個(gè)框架已經(jīng)被遺棄了吧！
其實(shí)這不是Google第一次嘗試開(kāi)發(fā)javascript的前端框架，大家可能還記得Web Toolkit，用來(lái)幫助你將java代碼轉(zhuǎn)化為javasscript代碼。過(guò)去google的wave推廣用它來(lái)開(kāi)發(fā)項(xiàng)目。隨著HTML5，CSS3和javascript的發(fā)展，Google發(fā)現(xiàn)web應(yīng)用并非意味著只使用純Java來(lái)實(shí)現(xiàn)。
AngularJS將幫助標(biāo)準(zhǔn)化的開(kāi)發(fā)web應(yīng)用結(jié)構(gòu)并且提供了針對(duì)客戶(hù)端應(yīng)用的未來(lái)開(kāi)發(fā)使用的模板
versin 1.0 發(fā)布在6個(gè)月前，已經(jīng)被很多的應(yīng)用實(shí)踐過(guò)了，包括商業(yè)應(yīng)用及其產(chǎn)品。Angularjs作為可選的架構(gòu)必將成為整個(gè)開(kāi)發(fā)社區(qū)的明星。因?yàn)锳ngualrJS是google開(kāi)發(fā)的產(chǎn)品，所以注定了你將有一個(gè)堅(jiān)實(shí)的基礎(chǔ)，相信它能夠成為你的最佳選擇！
原因二：AngularJS非常全面
類(lèi)似 Backbone 或者 JavaScriptMVC，anguar是一個(gè)快速的前端開(kāi)發(fā)解決方案。沒(méi)有其它的插件或者架構(gòu)足以開(kāi)發(fā)數(shù)據(jù)驅(qū)動(dòng)的web應(yīng)用。下面列出了AnguarJS的一些特性：
方便的REST： RESTful逐漸成為了標(biāo)準(zhǔn)的服務(wù)器和客戶(hù)端溝通的方式。使用一行javascript代碼，你就可以快速的從服務(wù)器端得到數(shù)據(jù)。AugularJS將這些變成了JS對(duì)象，作為Model，遵循MVVM(model view view-model)設(shè)計(jì)模式。
MVVM救星：Model將和ViewModel互動(dòng)（通過(guò)$scope對(duì)象），將監(jiān)聽(tīng)Model的變化。這些可以通過(guò)View來(lái)發(fā)送和渲染，由HTML來(lái)展示你的代碼。View可以通過(guò)$routeProvider對(duì)象來(lái)支配，所以你可以深度的鏈接和組織你的View和Controller，將他們變成導(dǎo)航URL。AngualrJS同時(shí)提供了無(wú)狀態(tài)的Controller，可以用來(lái)初始化和控制$scope對(duì)象。
數(shù)據(jù)綁定和依賴(lài)注入：在MVVM設(shè)計(jì)模式中的任何東西無(wú)論發(fā)生任何事情都自動(dòng)的和UI通信。這幫助我們?nèi)コ藈rapper，getter/setter方法或者class定義。AngularJS將幫助我們處理所有的這些內(nèi)容，所以你可以處理數(shù)據(jù)像處理基本javascript數(shù)據(jù)類(lèi)型，例如，數(shù)組一樣簡(jiǎn)單。當(dāng)然你也可以通過(guò)自定義處理復(fù)雜數(shù)據(jù)。正因?yàn)樗惺虑榈陌l(fā)生都是自動(dòng)的，所以你不必調(diào)用一個(gè)main()來(lái)執(zhí)行你的代碼，而是通過(guò)依賴(lài)關(guān)系來(lái)驅(qū)動(dòng)。
可擴(kuò)展的HTML：大多數(shù)的網(wǎng)站都是使用非語(yǔ)義的<div>標(biāo)簽來(lái)搭建的。你需要自己在CSS的class中定義相關(guān)的DOM層次結(jié)構(gòu)。而使用AngularJS，你可以操作XML一樣操作HTML，給你無(wú)窮的方式來(lái)完成標(biāo)簽和屬性定義。AngularJS通過(guò)自己的編譯器和directives來(lái)完成相關(guān)的設(shè)置。
使用HTML模板：如果你曾經(jīng)使用過(guò)Mustache ， Hogan.js，或者handlerbars的話(huà)，你就可以快速的理解AngularJS的模板引擎語(yǔ)法，應(yīng)為它是純HTML的。AngularJS通過(guò)DOM瀏覽來(lái)完成此類(lèi)功能，使用上面提到的directives。模板被作為DOM元素傳遞到Angular的編譯器中，可以被擴(kuò)展，執(zhí)行或者重用。這很關(guān)鍵，這樣一來(lái)你就擁有了DOM組件，而非字符串，允許你直接的操作擴(kuò)展DOM樹(shù)。
企業(yè)級(jí)別的測(cè)試：AnguarJS并不依賴(lài)于第三方的插件或者是框架，包括測(cè)試。如果你熟悉QUnit, Mocha 或者 Jasmine的話(huà)，那么對(duì)于理解Angular的單元測(cè)試和Scenario Runner來(lái)說(shuō)就非常簡(jiǎn)單。
以上的這些基本的原則能夠幫助知道你使用Angular來(lái)創(chuàng)建高效性能可維護(hù)的代碼。只要你有代碼保存數(shù)據(jù)，AnguarJS會(huì)幫助你處理所有的重量級(jí)內(nèi)容，提供一個(gè)富客戶(hù)端的超棒體驗(yàn)！
原因三：花幾分鐘就可以開(kāi)始開(kāi)發(fā)
學(xué)習(xí)Angular非常簡(jiǎn)單。添加幾個(gè)屬性到你的HTML中，你可以使用5分鐘搭建一個(gè)應(yīng)用！
添加ng-app directive到<html>標(biāo)簽，這樣Angular知道應(yīng)該運(yùn)行：
- <html lang="en" ng-app>
添加Angular<script>標(biāo)簽到<head>標(biāo)簽里：
- <head>
- ...meta and stylesheet tags...
- <script src="lib/angular/angular.js"></script>
添加正常的HTML標(biāo)簽。AngularJS directive可以在HTML屬性中被訪問(wèn)，而表單式將使用兩個(gè)大括號(hào)來(lái)標(biāo)示：
- <body ng-controller="ActivitiesListCtrl">
- <h1>Today's activities</h1>
- <ul>
- <li ng-repeat="activity in activities">
- {{activity.name}}
- </li>
- </ul>
- </body>
- </html>
ng-controller directive設(shè)置了一個(gè)名字空間，這里我們可以添加angular的相關(guān)javascript來(lái)處理數(shù)據(jù)和表達(dá)式。ng-repeat是一個(gè)angular的重復(fù)對(duì)象，可以用來(lái)創(chuàng)建一系列的對(duì)象元素。
當(dāng)你想從Anguar中獲取數(shù)據(jù)，你使用一個(gè)對(duì)應(yīng)名字的controller方法，如下：
- function ActivitiesListCtrl($scope) {
- $scope.activities = [
- { "name": "Wake up" },
- { "name": "Brush teeth" },
- { "name": "Shower" },
- { "name": "Have breakfast" },
- { "name": "Go to work" },
- { "name": "Write a Nettuts article" },
- { "name": "Go to the gym" },
- { "name": "Meet friends" },
- { "name": "Go to bed" }
- ];
- }
這里我們創(chuàng)建了一個(gè)方法，名字和前面的ng-controller directive一樣，這樣我們頁(yè)面可以找到對(duì)應(yīng)的Angular方法來(lái)執(zhí)行。我們傳遞了$(scope)對(duì)象來(lái)訪問(wèn)模板中的activities列表。提供了activities對(duì)應(yīng)的name，我們?cè)陧?yè)面中使用"{{expression}}"表達(dá)式展現(xiàn)出來(lái)。
或者你保存數(shù)據(jù)在服務(wù)器上，我們同樣可以使用AJAX獲取數(shù)據(jù)：
- function ActivitiesListCtrl($scope) {
- $http.get('activities/list.json').success(function (data) {
- $scope.activities = data;
- }
- }
這里我們簡(jiǎn)單的使用指定的HTTP GET方法替換了本地的javascript數(shù)據(jù)。傳遞了文件名字來(lái)獲取相關(guān)數(shù)據(jù)。這和jQuery的方式非常類(lèi)似。
以上我們使用success方法確保數(shù)據(jù)返回，并且將數(shù)據(jù)綁定到了$scope上。
靜態(tài)的列表顯示的很好，但是這里我們希望能夠根據(jù)用戶(hù)選擇自動(dòng)排序。這里我們添加一個(gè)簡(jiǎn)單的下拉菜單：
- <h3>Sort:</h3>
- <select>
- <option value="name">Alphabetically</option>
- </select>
添加directive:
- <select ng-model="sortModel">
最后，我們修改<li>標(biāo)簽來(lái)識(shí)別sortModel：
- <li ng-repeat="activity in activities | orderBy: sortModel">
搞定！關(guān)鍵是添加在ng-repeat里的過(guò)濾器。orderBy過(guò)濾器幫助我們通過(guò)選擇的內(nèi)容來(lái)過(guò)濾內(nèi)容。
注意我們代碼中沒(méi)有監(jiān)聽(tīng)用戶(hù)的互動(dòng)事件。沒(méi)有使用callback或者事件處理。所有的這些都被Angular內(nèi)部處理了。
當(dāng)然AngularJS提供了我們一個(gè)完整的教程，幫助你創(chuàng)建一個(gè)web應(yīng)用，如果大家有興趣可以看看！
總結(jié)
AngularJS快速的成為了javascript的主流框架，幫助你專(zhuān)業(yè)的從事web開(kāi)發(fā)
如果你尋找或者評(píng)估一個(gè)成熟的js前端框架的話(huà)，AngularJS應(yīng)用成為你的評(píng)估對(duì)象之一。最重要的是：免費(fèi)下載 - AngularJS.org。
原文鏈接：http://gbin1.com/gb/share/262.htm
