angular簡介和其特點介紹
以前開發(fā)(web或者移動端)前端主要使用jQuery+原生js,如果使用某些前端UI框架的話,它自己還可能提供一些API可以使用。而且目前很多UI框架都是基于jQuery的,所以說一下由jQuery跨到angularjs跨度較大,研究了一段時間的angularjs ,下面從整體上說說感受吧:
關(guān)于和jquery的比較
首先angular是一個mvc框架,它與jquery不同之處在于,前者致力于mvc代碼解耦,采用model,controller以及view方式去組織代碼,而后者提供給你了很多APi函數(shù),你可以不用寫很多原生js去實現(xiàn)比較復(fù)雜的效果,比如說動畫,$.animate,這樣的效果如果需要原生js來寫的話,代碼量將會比較龐大;
其次,jQuery沒有定義你的代碼如何組織,你可以將它放在一個單獨的js文件中進(jìn)行引用,也可以直接寫在頁面中采用script標(biāo)簽進(jìn)行包裹,甚至可以直接以內(nèi)聯(lián)的方式寫在html標(biāo)簽中,但是angularjs會將一個HTML頁面分成若干個模塊,每個模塊都可以自己的scope,service以及directive,各個模塊之間也可以進(jìn)行通信,但是整體上結(jié)構(gòu)是比較清晰的,就是說其代碼組織方式是模塊化的。
最后,jQuery的思想是先設(shè)計好頁面,然后在已有頁面的基礎(chǔ)上進(jìn)行dom操作后展示頁面,但是angular的view可能僅僅是一個框架,對view的dom操作或者時間監(jiān)聽都是在directive中實現(xiàn)的,而且一般情況下很少自己直接去寫Dom操作代碼,只要你監(jiān)聽model。model發(fā)生變化后view也會發(fā)生變化。
關(guān)于適用場合
jQuery應(yīng)該適用于大多數(shù)web開發(fā),移動端也有(jQuerymobile),angularjs有人說更適合做SPA(我個人認(rèn)為在手機(jī)上的SPA可能會引發(fā)性能上的問題,因為它的臟檢查機(jī)制會影響性能),在web端,一些CRUD的應(yīng)用或者管理類軟件還是可以使用的(當(dāng)然這里的理解可能不一定準(zhǔn)確,會隨著深入學(xué)習(xí)更多去了解和使用)。
關(guān)于UI的結(jié)合
開發(fā)任何產(chǎn)品都需要用到前端UI,目前很多UI是基于jQuery的,這意味著你如果要用angularjs和這些Ui組件的話,需要用angularjs的directive去重寫些組件,這一過程是比較麻煩的,所幸的是,angular給我們提供了一些UI組件可以使用(web端主要是結(jié)合bootstrap前端組件),http://angular-ui.github.io/,而在移動端主要是結(jié)合ionic框架http://ionicframework.com/,但是隨著angular的發(fā)展,很多HTML5的前端框架也慢慢集成了angularjs版本可供使用。
關(guān)于angularjs的特點
1.數(shù)據(jù)的雙向綁定:這可能是其最激動人心的特性吧,view層的數(shù)據(jù)和model層的數(shù)據(jù)是雙向綁定的,其中之一發(fā)生更改,另一方會隨之變化,這不用你寫任何代碼!(想想jQuery方式下怎么做吧)
2.代碼模塊化,每個模塊的代碼獨立擁有自己的作用域,model,controller等。
3.強(qiáng)大的directive可以將很多功能封裝成HTML的tag,屬性或者注釋等,這大大美化了HTML的結(jié)構(gòu),增強(qiáng)了可閱讀性;
4.依賴注入,將這種后端語言的設(shè)計模式賦予前端代碼,這意味著前端的代碼可以提高重用性和靈活性,未來的模式可能將大量操作放在客戶端,服務(wù)端只提供數(shù)據(jù)來源和其他客戶端無法完成的操作;
5.測試驅(qū)動開發(fā),angularjs一開始就以此為目標(biāo),使用angular開發(fā)的應(yīng)用可以很容易地進(jìn)行單元測試和端對端測試,這解決了傳統(tǒng)的js代碼難以測試和維護(hù)的缺陷
以上就是研究angularjs一段時間得出的結(jié)論,其中某些地方可能有所疏漏,沒關(guān)系,接下來會展開其中某一點一步步去學(xué)習(xí)。
相關(guān)文章
詳解從angular-cli:1.0.0-beta.28.3升級到@angular/cli:1.0.0
本篇文章主要介紹了詳解從angular-cli:1.0.0-beta.28.3升級到@angular/cli:1.0.0,具有一定的參考價值,有興趣的可以了解一下2017-05-05
解決ng-repeat產(chǎn)生的ng-model中取不到值的問題
今天小編就為大家分享一篇解決ng-repeat產(chǎn)生的ng-model中取不到值的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular項目中$scope.$apply()方法的使用詳解
這篇文章主要給大家介紹了關(guān)于Angular項目中$scope.$apply()方法使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angularjs具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來看看吧。2017-07-07
Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-07-07
Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解
基于流的前端自動化構(gòu)建工具,利用gulp可以提高前端開發(fā)效率,特別是在前后端分離的項目中。下面這篇文章主要給大家介紹了關(guān)于在Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包的相關(guān)資料,需要的朋友可以參考下。2017-07-07
angularjs 表單密碼驗證自定義指令實現(xiàn)代碼
這篇文章主要介紹了angularjs 表單密碼驗證自定義指令實現(xiàn)代碼,需要的朋友可以參考下2016-10-10

