AngularJS學(xué)習(xí)筆記

關(guān)于本文檔

這份文檔如其名，是作者：鄒業(yè)盛 自己學(xué)習(xí) ng 的過(guò)程記錄,經(jīng)作者授權(quán)轉(zhuǎn)載至W3Cschool.cn ,該文檔只是過(guò)程記錄，沒有刻意像教程那樣去做。所以呢，從前至后，中間不免有一些概念不清不明的地方。因?yàn)槭聦?shí)上，在某個(gè)階段對(duì)于一些概念本來(lái)就不可能明白。所以，整個(gè)過(guò)程只求在形式上的能用即可——直到最后的“自定義”那幾章，特別是“自定義指令”，那幾章過(guò)完，你才能看清 ng 本來(lái)的面貌。前面就不要太糾結(jié)概念，本質(zhì)，知道怎么用就好。

在線閱讀

• W3Cschool http://m.hgci.cn/angularjs_node 
• YS.Zou https://www.zouyesheng.com/angular.html

關(guān)于AngularJS

AngularJS 是 Google 開源出來(lái)的一套 js 工具。下面簡(jiǎn)稱其為 ng 。這里只說(shuō)它是“工具”，沒說(shuō)它是完整的“框架”，是因?yàn)樗⒉皇嵌ㄎ挥谌ネ瓿梢惶卓蚣芤龅氖?。更重要的，是它給我們揭示了一種新的應(yīng)用組織與開發(fā)方式。

ng 最讓我稱奇的，是它的數(shù)據(jù)雙向綁定。其實(shí)想想，我們一直在提數(shù)據(jù)與表現(xiàn)的分離，但是這里的“雙向綁定”從某方面來(lái)說(shuō)，是把數(shù)據(jù)與表現(xiàn)完全綁定在一起——數(shù)據(jù)變化，表現(xiàn)也變化。反之，表現(xiàn)變化了，內(nèi)在的數(shù)據(jù)也變化。有過(guò)開發(fā)經(jīng)驗(yàn)的人能體會(huì)到這種機(jī)制對(duì)于前端應(yīng)用來(lái)說(shuō)，是很有必要的，能帶來(lái)維護(hù)上的巨大優(yōu)勢(shì)。當(dāng)然，這里的綁定與提倡的分離并不是矛盾的。

ng 可以和 jQuery 集成工作，事實(shí)上，如果沒有 jQuery ， ng 自己也做了一個(gè)輕量級(jí)的 jQuery ，主要實(shí)現(xiàn)了元素操作部分的 API 。

關(guān)于 ng 的幾點(diǎn)：

• 對(duì) IE 方面，它兼容 IE8 及以上的版本。
• 與 jQuery 集成工作，它的一些對(duì)象與 jQuery 相關(guān)對(duì)象表現(xiàn)是一致的。
• 使用 ng 時(shí)不要冒然去改變相關(guān) DOM 的結(jié)構(gòu)（不是說(shuō)不可以，只是你自己要清楚你在做什么）。

本書章節(jié)構(gòu)成

• AngularJS例子
• AngularJS依賴注入
• AngularJS作用域
• AngularJS的數(shù)據(jù)綁定與模板
• 數(shù)據(jù)到模板的綁定
• 模板到數(shù)據(jù)的綁定
• 數(shù)據(jù)->模板->數(shù)據(jù)->模板
• AngularJS模板
• 定義模板內(nèi)容
• AngularJS內(nèi)容渲染控制
• 重復(fù) ng-repeat
• 賦值 ng-init
• AngularJS節(jié)點(diǎn)控制
• AngularJS樣式 ng-style
• AngularJS類 ng-class
• AngularJS顯示和隱藏 ng-show AngularJS-hide AngularJS-switch
• AngularJS其它屬性控制
• AngularJS事件綁定
• AngularJS表單控件
• 核心控件：form
• 數(shù)據(jù)入口：input
• 選擇狀態(tài)：checkbox
• radio對(duì)象
• textarea對(duì)象
• select對(duì)象
• AngularJS模板中的過(guò)濾器
• AngularJS排序過(guò)濾器標(biāo)簽：orderBy
• AngularJS過(guò)濾內(nèi)容標(biāo)簽：filter
• AngularJS其它標(biāo)簽
• 例子：表頭排序
• 例子：搜索
• AngularJS提供的錨點(diǎn)路由
• 錨點(diǎn)路由的定義
• 定義參數(shù)
• 錨點(diǎn)定義的業(yè)務(wù)處理
• 定義模板變量標(biāo)識(shí)標(biāo)簽
• AngularJS提供的AJAX封裝
• AngularJS的HTTP請(qǐng)求
• AngularJS的廣義回調(diào)管理機(jī)制
• $q的方法介紹
• deferred對(duì)象介紹
• promise對(duì)象介紹
• AngularJS工具函數(shù)
• AngularJS上下文綁定
• AngularJS對(duì)象處理
• AngularJS類型判定
• AngularJS的其它服務(wù)
• AngularJS的日志服務(wù)
• AngularJS的緩存機(jī)制
• AngularJS計(jì)時(shí)器
• AngularJS表達(dá)式函數(shù)化
• AngularJS模板單獨(dú)使用
• AngularJS自定義模塊和服務(wù)
• AngularJS模塊和服務(wù)的概念與關(guān)系
• AngularJS定義模塊
• AngularJS定義服務(wù)
• AngularJS引入模塊并使用服務(wù)
• 附加模塊 ngResource
• 使用引入與整體概念
• 定義$resource的資源
• 使用$resource資源
• 定義和使用時(shí)的占位量
• AngularJS Resource實(shí)例
• AngularJS與其它框架的混用(jQuery, Dojo)
• AngularJS自定義過(guò)濾器
• AngularJS自定義指令directive
• AngularJS指令的使用
• AngularJS指令的執(zhí)行過(guò)程
• AngularJS基本的自定義方法
• AngularJS屬性值類型的自定義
• AngularJS中Compile的細(xì)節(jié)
• AngularJS中transclude的細(xì)節(jié)
• 把節(jié)點(diǎn)內(nèi)容作為變量處理的類型
• AngularJS指令定義時(shí)的參數(shù)
• AngularJS中Attributes的細(xì)節(jié)
• 預(yù)定義的 NgModelController
• 預(yù)定義的 FormController
• 示例：文本框
• 示例：模板控制語(yǔ)句 for
• 示例：模板控制語(yǔ)句 if/else