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