日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

AngularJS特性

發(fā)布時間:2023/12/19 javascript 37 豆豆
生活随笔 收集整理的這篇文章主要介紹了 AngularJS特性 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

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

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

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

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

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

原因二:AngularJS非常全面

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

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

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

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

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

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

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

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

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

學習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設(shè)置了一個名字空間,這里我們可以添加angular的相關(guān)javascript來處理數(shù)據(jù)和表達式。ng-repeat是一個angular的重復對象,可以用來創(chuàng)建一系列的對象元素。

    當你想從Anguar中獲取數(shù)據(jù),你使用一個對應名字的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)建了一個方法,名字和前面的ng-controller directive一樣,這樣我們頁面可以找到對應的Angular方法來執(zhí)行。我們傳遞了$(scope)對象來訪問模板中的activities列表。提供了activities對應的name,我們在頁面中使用"{{expression}}"表達式展現(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ù)用戶選擇自動排序。這里我們添加一個簡單的下拉菜單:

  • <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">?
  • 搞定!關(guān)鍵是添加在ng-repeat里的過濾器。orderBy過濾器幫助我們通過選擇的內(nèi)容來過濾內(nèi)容。

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

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

    總結(jié)

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

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

    原文鏈接:http://gbin1.com/gb/share/262.htm

    轉(zhuǎn)載于:https://www.cnblogs.com/lenther2002/p/4570845.html

    創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯,堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

    總結(jié)

    以上是生活随笔為你收集整理的AngularJS特性的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。