中文JAVA技術(shù)平等自由協(xié)作創(chuàng)造

          Java專題文章博客和開源

          常用鏈接

          統(tǒng)計(jì)

          最新評論

          現(xiàn)在就開始使用AngularJS的三個(gè)重要原因

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

          原因一:Google開發(fā)的框架

          要知道開源界的很多框架都是開發(fā)人員由于個(gè)人興趣或者激情而開發(fā)出來的,比如,Cappucino 還有 Knockout。而angularJS是由互聯(lián)網(wǎng)巨人Google組織開發(fā)的。這意味這你有更加強(qiáng)大的社區(qū)支持。誰都不希望第一天開始使用一個(gè)框架,第二天發(fā)現(xiàn)這個(gè)框架已經(jīng)被遺棄了吧雅思代考

          其實(shí)這不是Google第一次嘗試開發(fā)javascript的前端框架,大家可能還記得Web Toolkit,用來幫助你將java代碼轉(zhuǎn)化為javasscript代碼。過去google的wave推廣用它來開發(fā)項(xiàng)目。隨著HTML5,CSS3和javascript的發(fā)展,Google發(fā)現(xiàn)web應(yīng)用并非意味著只使用純Java來實(shí)現(xiàn)。 www.js-yg.com 

          AngularJS將幫助標(biāo)準(zhǔn)化的開發(fā)web應(yīng)用結(jié)構(gòu)并且提供了針對客戶端應(yīng)用的未來開發(fā)使用的模板

          versin 1.0 發(fā)布在6個(gè)月前,已經(jīng)被很多的應(yīng)用實(shí)踐過了,包括商業(yè)應(yīng)用及其產(chǎn)品。AngularJS作為可選的架構(gòu)必將成為整個(gè)開發(fā)社區(qū)的明星。因?yàn)锳ngualrJS是google開發(fā)的產(chǎn)品,所以注定了你將有一個(gè)堅(jiān)實(shí)的基礎(chǔ),相信它能夠成為你的最佳選擇雅思答案

          原因二:AngularJS非常全面

          類似 Backbone 或者 JavaScriptMVC,anguar是一個(gè)快速的前端開發(fā)解決方案。沒有其它的插件或者架構(gòu)足以開發(fā)數(shù)據(jù)驅(qū)動的web應(yīng)用。下面列出了AnguarJS的一些特性:

          •方便的REST: RESTful逐漸成為了標(biāo)準(zhǔn)的服務(wù)器和客戶端溝通的方式。使用一行javascript代碼,你就可以快速的從服務(wù)器端得到數(shù)據(jù)。AugularJS將 這些變成了JS對象,作為Model,遵循MVVM(model view view-model)設(shè)計(jì)模式托福代考

          •MVVM救 星:Model將和ViewModel互動(通過$scope對象),將監(jiān)聽Model的變化。這些可以通過View來發(fā)送和渲染,由HTML來展示你的 代碼。View可以通過$routeProvider對象來支配,所以你可以深度的鏈接和組織你的View和Controller,將他們變成導(dǎo)航 URL。AngualrJS同時(shí)提供了無狀態(tài)的Controller,可以用來初始化和控制$scope對象。

          •數(shù)據(jù)綁定和依賴注入:在 MVVM設(shè)計(jì)模式中的任何東西無論發(fā)生任何事情都自動的和UI通信。這幫助我們?nèi)コ藈rapper,getter/setter方法或者class定 義。AngularJS將幫助我們處理所有的這些內(nèi)容,所以你可以處理數(shù)據(jù)像處理基本javascript數(shù)據(jù)類型,例如,數(shù)組一樣簡單。當(dāng)然你也可以通 過自定義處理復(fù)雜數(shù)據(jù)。正因?yàn)樗惺虑榈陌l(fā)生都是自動的,所以你不必調(diào)用一個(gè)main()來執(zhí)行你的代碼,而是通過依賴關(guān)系來驅(qū)動托福答案

          •可 擴(kuò)展的HTML:大多數(shù)的網(wǎng)站都是使用非語義的<div>標(biāo)簽來搭建的。你需要自己在CSS的class中定義相關(guān)的DOM層次結(jié)構(gòu)。而使用 AngularJS,你可以操作XML一樣操作HTML,給你無窮的方式來完成標(biāo)簽和屬性定義。AngularJS通過自己的編譯器和directives來完成相關(guān)的設(shè)置。 www.yz-jx.com

          •使用HTML模板:如果你曾經(jīng)使用過Mustache , Hogan.js, 或者h(yuǎn)andlerbars的話,你就可以快速的理解AngularJS的模板引擎語法,應(yīng)為它是純HTML的。AngularJS通過DOM瀏覽來完成 此類功能,使用上面提到的directives。模板被作為DOM元素傳遞到Angular的編譯器中,可以被擴(kuò)展,執(zhí)行或者重用。這很關(guān)鍵,這樣一來你 就擁有了DOM組件,而非字符串,允許你直接的操作擴(kuò)展DOM樹。

          •企業(yè)級別的測試:AnguarJS并不依賴于第三方的插件或者是框架,包括測試。如果你熟悉QUnit, Mocha 或者 Jasmine的話,那么對于理解Angular的單元測試和Scenario Runner來說就非常簡單。

          以上的這些基本的原則能夠幫助知道你使用Angular來創(chuàng)建高效性能可維護(hù)的代碼。只要你有代碼保存數(shù)據(jù),AnguarJS會幫助你處理所有的重量級內(nèi)容,提供一個(gè)富客戶端的超棒體驗(yàn)!

          原因三:花幾分鐘就可以開始開發(fā)

          學(xué)習(xí)Angular非常簡單。添加幾個(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屬性中被訪問,而表單式將使用兩個(gè)大括號來標(biāo)示:

          <body ng-controller=“ActivitiesListCtrl”>

          <h1>Today‘s activities</h1>

          <ul>

          <li ng-repeat=“activity in activities”>

          {{activity.name}}

          </li>

          </ul>

          </body>

          ng-controller directive設(shè)置了一個(gè)名字空間,這里我們可以添加angular的相關(guān)javascript來處理數(shù)據(jù)和表達(dá)式。ng-repeat是一個(gè)angular的重復(fù)對象,可以用來創(chuàng)建一系列的對象元素。

          當(dāng)你想從Anguar中獲取數(shù)據(jù),你使用一個(gè)對應(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īng)的Angular方法來執(zhí)行。我們傳遞了$(scope)對象來訪問模板中的activities列 表。提供了activities對應(yīng)的name,我們在頁面中使用“{{expression}}”表達(dá)式展現(xiàn)出來。

          或者你保存數(shù)據(jù)在服務(wù)器上,我們同樣可以使用AJAX獲取數(shù)據(jù):

          function ActivitiesListCtrl($scope) {

          $http.get(’activities/list.json‘).success(function (data) {

          $scope.activities = data;

          }

          }

          這里我們簡單的使用指定的HTTP GET方法替換了本地的javascript數(shù)據(jù)。傳遞了文件名字來獲取相關(guān)數(shù)據(jù)。這和jQuery的方式非常類似。

          以上我們使用success方法確保數(shù)據(jù)返回,并且將數(shù)據(jù)綁定到了$scope上。

          靜態(tài)的列表顯示的很好,但是這里我們希望能夠根據(jù)用戶選擇自動排序。這里我們添加一個(gè)簡單的下拉菜單:

          <h3>Sort:</h3>

          <select>

          <option value=“name”>Alphabetically</option>

          </select>

          添加directive:

          <select ng-model=“sortModel”>

          最后,我們修改<li>標(biāo)簽來識別sortModel:

          <li ng-repeat=“activity in activities | orderBy: sortModel”>

          搞定!關(guān)鍵是添加在ng-repeat里的過濾器。orderBy過濾器幫助我們通過選擇的內(nèi)容來過濾內(nèi)容。

          注意我們代碼中沒有監(jiān)聽用戶的互動事件。沒有使用callback或者事件處理。所有的這些都被Angular內(nèi)部處理了。

          當(dāng)然AngularJS提供了我們一個(gè)完整的教程,幫助你創(chuàng)建一個(gè)web應(yīng)用,如果大家有興趣可以看看!

          總結(jié)

          AngularJS快速的成為了javascript的主流框架,幫助你專業(yè)的從事web開發(fā)

          如果你尋找或者評估一個(gè)成熟的js前端框架的話,AngularJS應(yīng)用成為你的評估對象之一。最重要的是:免費(fèi)下載 - AngularJS.org。

          擁有完整的API文檔和技術(shù)社區(qū)!相信能夠成為你web開發(fā)的強(qiáng)大支持!希望大家喜歡!如果有任何問題,請?jiān)跇O客標(biāo)簽社區(qū)給我們留言!

          posted on 2013-02-26 11:36 好不容易 閱讀(1089) 評論(0)  編輯  收藏


          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
           
          PK10開獎 PK10開獎
          主站蜘蛛池模板: 麻栗坡县| 永川市| 峡江县| 临夏市| 蕉岭县| 横山县| 澳门| 佳木斯市| 新竹县| 祁阳县| 阳西县| 台中县| 石嘴山市| 江城| 左云县| 星座| 商南县| 固始县| 当阳市| 彩票| 老河口市| 清水河县| 思茅市| 孟州市| 南京市| 镇原县| 南召县| 富裕县| 汶川县| 陈巴尔虎旗| 富宁县| 永济市| 孟津县| 洛浦县| 满洲里市| 磴口县| 巴彦县| 昌图县| 天气| 甘谷县| 翼城县|