現在就開始使用AngularJS的三個重要原因

時間:2013-01-22 10:56:00   來源:站長之家   評論:加載中...   點擊:加載中...
如果你不熟悉什么是Angular.js的話,小編我強烈推薦你閱讀 Javascript教程:AngularJS的五個超酷特性。簡單來說Angular.js是google開發者設計和開發的一套前端開發框架,幫助你簡化前端開發的負擔。當然,這里有很...

現在就開始使用AngularJS的三個重要原因

如果你不熟悉什么是Angular.js的話,小編我強烈推薦你閱讀 Javascript教程:AngularJS的五個超酷特性。簡單來說Angular.js是google開發者設計和開發的一套前端開發框架,幫助你簡化前端開發的負擔。當然,這里有很多其它的前端開發框架,但是如何選擇合適的前端框架對于我們這些開發人員來說就不是那么容易了!在今天的這篇文章中,我們將介紹三個你應該使用Angular.js的重要原因,希望大家覺得有幫助!

原因一:Google開發的框架

要知道開源界的很多框架都是開發人員由于個人興趣或者激情而開發出來的,比如,Cappucino 還有 Knockout。而angularJS是由互聯網巨人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:大多數的網站都是使用非語義的<p>標簽來搭建的。你需要自己在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>

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。

擁有完整的API文檔和技術社區!相信能夠成為你web開發的強大支持!希望大家喜歡!如果有任何問題,請在極客標簽社區給我們留言!

via gbtags

來源:現在就開始使用AngularJS的三個重要原因



相關熱詞搜索:

 
上一篇:十年歷史的KDE bug修復
下一篇:2013年最流行的php框架盤點
收藏 將此文推薦給朋友
分享到:
10个数复式三中三多少组公式