|
一、寫在最前
AngularJS是Google推出的一款Web應(yīng)用開發(fā)框架。它提供了一系列兼容性良好并且可擴(kuò)展的服務(wù)，包括數(shù)據(jù)綁定、DOM操作、MVC設(shè)計(jì)模式和模塊加載等。
現(xiàn)在網(wǎng)上JS框架茫茫多，真不知道是到底要學(xué)習(xí)什么框架，學(xué)習(xí)了這個(gè)框架，說不定還沒用在項(xiàng)目，又有更好的js框架出來了。前端就是不斷折騰新東西，生命在于折騰~
是的，這么多的前端框架，是不是真的都要學(xué)習(xí)？？答案當(dāng)然不是，看所要完成的項(xiàng)目。這是帶我的前端前輩告訴我，具體使用什么框架還是不用框架，
看項(xiàng)目需求，一切都以按時(shí)按質(zhì)完成作為選擇的標(biāo)準(zhǔn)。但是新的東西要學(xué)習(xí)，不學(xué)習(xí)就落后。
二、AngularJS的幾個(gè)重要概念有什么
客戶端模板 舉個(gè)栗子：hello.html
模型/視圖/控制器(MVC)
數(shù)據(jù)綁定
依賴注入
路由管理
指令（Angular的靈魂）
示例：購(gòu)物車（源碼在最后）
三、對(duì)這些概念的理解
插個(gè)曲，Angular最適合用來做單頁(yè)web應(yīng)用。在百度上查了單頁(yè)web應(yīng)用的概念。如表：
| 單頁(yè)web應(yīng)用（qq音樂） |
|
單頁(yè)Web應(yīng)用（single page web application，SPA），就是只有一張Web頁(yè)面的應(yīng)用。
單頁(yè)應(yīng)用程序 (SPA) 是加載單個(gè)HTML 頁(yè)面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的Web應(yīng)用程序。
瀏覽器一開始會(huì)加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁(yè)面上完成，都由JavaScript來控制。因此，對(duì)單頁(yè)應(yīng)用來說模塊化的開發(fā)和設(shè)計(jì)顯得相當(dāng)重要。
|
| 優(yōu)點(diǎn)： |
1).良好的交互體驗(yàn)（用戶不需要重新曬新頁(yè)面，獲取數(shù)據(jù)都是通過ajax異步獲取）
2).良好的前后端分離
3).減輕服務(wù)器壓力（服務(wù)器只用出數(shù)據(jù)， 不用管展示邏輯和頁(yè)面合成，吞吐能力會(huì)提高幾倍）
4)..共用一套后端程序代碼（不用修改后端程序代碼就可以同時(shí)用于Web界面、手機(jī)、平板等多種客戶端）
|
| 缺點(diǎn)： |
1).SEO難度較高
2).前進(jìn)、后退管理（ 所有的頁(yè)面切換需要自己建立堆棧管理）
3).初次加載耗時(shí)多（代碼合并、CDN）
像游戲開發(fā)，頻繁操作DOM也不適合使用Angular |
| 客戶端模板 |
|
| 多頁(yè)面 |
單頁(yè)面 |
| 通過裝配和鏈接服務(wù)器上數(shù)據(jù)來創(chuàng)建HTML，然后將構(gòu)建好的HTML頁(yè)面發(fā)送到瀏覽器。 |
Angular將模板和數(shù)據(jù)推送到瀏覽器中裝配他們，然后服務(wù)器角色只是為模板提供靜態(tài)資源以及為模板提供數(shù)據(jù) |
| 模型/視圖/控制器(MVC) |
|
M 代碼中清晰的分離數(shù)據(jù)管理 (模型 )
V 應(yīng)用程序邏輯 (控制器 )
C 及給用戶呈現(xiàn)數(shù)據(jù) (視圖 ) |
Angular中的
M 模型中的數(shù)據(jù)便是存儲(chǔ)在對(duì)象中的屬性 (屬性值
V 文檔對(duì)象模型 (DOM)
C 控制器是 JavaScript類
C和V之間的紐帶就是$scope
|
| 數(shù)據(jù)綁定 |
雙向綁定 |
| ng-model |
所謂的雙向綁定，無非是從界面的操作能實(shí)時(shí)反映到數(shù)據(jù)，數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。 |
| 依賴注入 |
舉個(gè)栗子 |
| 程序運(yùn)行過程中，如需另一個(gè)對(duì)象協(xié)作(調(diào)用它的方法、訪問他的屬性)時(shí)，無須在代碼中創(chuàng)建被調(diào)用者，而是依賴于外部容器的注入 |
在HelloController控制器中，$scope對(duì)象會(huì)把數(shù)據(jù)綁定自動(dòng)傳遞給我們；我們不需要通過調(diào)用任何函數(shù)來創(chuàng)建他。只是通過將他防止在控制器的構(gòu)造器中來請(qǐng)求它。
|
控制器helloController單詞首字母大寫
| 數(shù)據(jù)綁定 |
|
.png) |
該過程，沒有在輸入字段上注冊(cè)一個(gè)改變值的事件監(jiān)聽器。 |
| 指令 |
Angular之可以可以編寫模板如HTML一樣，是因?yàn)榭蚣芎诵陌艘粋€(gè)強(qiáng)大的DOM解析引擎。 |
| 擴(kuò)展指令 |
例如：ng-controller。在HTML模板看到不屬于HTML規(guī)范的新屬性，這稱為HTML擴(kuò)展指令 |
| 自定義指令 |
自己定義自己需要的指令（據(jù)說指令是Angular的靈魂） |
附購(gòu)物車源碼：
View Code
運(yùn)行后結(jié)果：
|
