angularjs學(xué)習(xí)總結(jié)&詳細(xì)介紹

《angularjs學(xué)習(xí)總結(jié)&詳細(xì)介紹》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、AngularJS學(xué)習(xí)文檔新晨科技股份有限公司AngularJS介紹AngularJS學(xué)習(xí)文檔歐陽(yáng)龍蛟2014/1/15[在此處鍵入文檔的摘要。摘要通常是對(duì)文檔內(nèi)容的簡(jiǎn)短總結(jié)。在此處鍵入文檔的摘要。摘要通常是對(duì)文檔內(nèi)容的簡(jiǎn)短總結(jié)。]51AngularJS學(xué)習(xí)文檔目錄1前言42AngularJS概述42.1AngularJS是什么？42.2AngularJS簡(jiǎn)單介紹52.3什么時(shí)候該用AngularJS53AugularJS特性53.1特性一：雙向的數(shù)據(jù)綁定53.2特性二：模板63.3特性三：MV

2、C73.4特性四：服務(wù)和依賴注入73.5特性五：指令（Directives）84功能介紹94.1數(shù)據(jù)綁定94.2scopes、module、controller104.2.1scopes104.2.2module104.2.3ng-controller104.3ajax114.4表達(dá)式124.5過(guò)濾器124.5.1過(guò)濾器使用方式134.5.2ng的內(nèi)置過(guò)濾器134.5.3自定義過(guò)濾器及示例154.6指令164.6.1樣式相關(guān)的指令174.6.2表單控件功能相關(guān)指令184.6.3事件綁定相關(guān)指令1

3、84.6.4特殊的ng-src和ng-href194.6.5示例204.7服務(wù)214.7.1服務(wù)（service）介紹214.7.2自定義服務(wù)214.7.3管理服務(wù)的依賴關(guān)系224.7.4示例234.8依賴注入DI244.9路由264.9.1ngRoute內(nèi)容264.9.2ng的路由機(jī)制264.9.3示例274.10NG動(dòng)畫效果294.10.1NG動(dòng)畫效果簡(jiǎn)介294.10.2示例3051AngularJS學(xué)習(xí)文檔5功能演示306AngularJS進(jìn)階316.1數(shù)據(jù)綁定原理研究316.1.1Ang

4、ularJS擴(kuò)展事件循環(huán)316.1.2$watch隊(duì)列（$watchlist）316.1.3$digest循環(huán)326.1.4如何進(jìn)入angularcontext336.1.5使用$watch來(lái)監(jiān)視346.1.6總結(jié)366.2自定義指令詳解366.2.1指令的編譯過(guò)程376.2.2指令的使用方式及命名方法376.2.3自定義指令的配置參數(shù)376.2.3指令的表現(xiàn)參數(shù)restrict等386.2.4指令的行為參數(shù)：compile和link406.2.5指令的劃分作用域參數(shù)：scope426.2.6指

5、令間通信參數(shù)：controller和require456.3性能及調(diào)優(yōu)476.3.1性能測(cè)試476.3.2七大調(diào)優(yōu)法則487總結(jié)507.1頁(yè)面效果507.2委派事件（代理事件）517.2.1NG循環(huán)及事件綁定517.2.2jQuery委派事件5151AngularJS學(xué)習(xí)文檔1前言前端技術(shù)的發(fā)展是如此之快，各種優(yōu)秀技術(shù)、優(yōu)秀框架的出現(xiàn)簡(jiǎn)直讓人目不暇接，緊跟時(shí)代潮流，學(xué)習(xí)掌握新知識(shí)自然是不敢怠慢。AngularJS是google在維護(hù)，其在國(guó)外已經(jīng)十分火熱，可是國(guó)內(nèi)的使用情況卻有不小的差距，參考文

6、獻(xiàn)/網(wǎng)絡(luò)文章也很匱乏。這里便將我學(xué)習(xí)AngularJS寫成文檔，一方面作為自己學(xué)習(xí)路程上的記錄，另一方面也給有興趣的同學(xué)一些參考。首先我自己也是一名學(xué)習(xí)者，會(huì)以學(xué)習(xí)者的角度來(lái)整理我的行文思路，這里可能只是些探索，有理解或是技術(shù)上的錯(cuò)誤還請(qǐng)大家指出；其次我特別喜歡編寫小例子來(lái)把一件事情說(shuō)明白，故在文中會(huì)盡可能多的用示例加代碼講解，我相信這會(huì)是一種比較好的方式；最后，我深知AngularJS的使用方式跟jquery的使用方式有很大不同，在大家都有jquery、ext經(jīng)驗(yàn)的條件下對(duì)于angular的學(xué)

7、習(xí)會(huì)困難重重，不過(guò)我更相信在大家的堅(jiān)持下，能夠快速的學(xué)好AngularJS，至少咱也能深入了解到AngularJS的基本思想，對(duì)咱們以后自己的插件開(kāi)發(fā)、項(xiàng)目開(kāi)發(fā)都會(huì)有很大的啟示。2AngularJS概述2.1AngularJS是什么？AngularJs（后面就簡(jiǎn)稱ng了）是一個(gè)用于設(shè)計(jì)動(dòng)態(tài)web應(yīng)用的結(jié)構(gòu)框架。首先，它是一個(gè)框架，不是類庫(kù)，是像EXT一樣提供一整套方案用于設(shè)計(jì)web應(yīng)用。它不僅僅是一個(gè)javascript框架，因?yàn)樗暮诵钠鋵?shí)是對(duì)HTML標(biāo)簽的增強(qiáng)。何為HTML標(biāo)簽增強(qiáng)？其實(shí)就是

8、使你能夠用標(biāo)簽完成一部分頁(yè)面邏輯，具體方式就是通過(guò)自定義標(biāo)簽、自定義屬性等，這些HTML原生沒(méi)有的標(biāo)簽/屬性在ng中有一個(gè)名字：指令（directive）。后面會(huì)詳細(xì)介紹。那么，什么又是動(dòng)態(tài)web應(yīng)用呢？與傳統(tǒng)web系統(tǒng)相區(qū)別，web應(yīng)用能為用戶提供豐富的操作，能夠隨用戶操作不斷更新視圖而不進(jìn)行url跳轉(zhuǎn)。ng官方也聲明它更適用于開(kāi)發(fā)CRUD應(yīng)用，即數(shù)據(jù)操作比較多的應(yīng)用，而非是游戲或圖像處理類應(yīng)用。為了實(shí)現(xiàn)這些，ng引入了一些非常棒的特性，包括模板機(jī)制、數(shù)據(jù)綁定、模塊、指令、依賴注入、路由。通過(guò)