|
一,、寫在最前
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的靈魂）
示例：購物車（源碼在最后）
三,、對(duì)這些概念的理解
插個(gè)曲,，Angular最適合用來做單頁web應(yīng)用,。在百度上查了單頁web應(yīng)用的概念。如表：
| 單頁web應(yīng)用（qq音樂） |
|
單頁Web應(yīng)用（single page web application,，SPA）,，就是只有一張Web頁面的應(yīng)用。
單頁應(yīng)用程序 (SPA) 是加載單個(gè)HTML 頁面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁面的Web應(yīng)用程序,。
瀏覽器一開始會(huì)加載必需的HTML、CSS和JavaScript,，所有的操作都在這張頁面上完成,，都由JavaScript來控制。因此,，對(duì)單頁應(yīng)用來說模塊化的開發(fā)和設(shè)計(jì)顯得相當(dāng)重要,。
|
| 優(yōu)點(diǎn)： |
1).良好的交互體驗(yàn)（用戶不需要重新曬新頁面，獲取數(shù)據(jù)都是通過ajax異步獲?。?/span>
2).良好的前后端分離
3).減輕服務(wù)器壓力（服務(wù)器只用出數(shù)據(jù),， 不用管展示邏輯和頁面合成，吞吐能力會(huì)提高幾倍）
4)..共用一套后端程序代碼（不用修改后端程序代碼就可以同時(shí)用于Web界面,、手機(jī),、平板等多種客戶端）
|
| 缺點(diǎn)： |
1).SEO難度較高
2).前進(jìn)、后退管理（ 所有的頁面切換需要自己建立堆棧管理）
3).初次加載耗時(shí)多（代碼合并,、CDN）
像游戲開發(fā),，頻繁操作DOM也不適合使用Angular |
| 客戶端模板 |
|
| 多頁面 |
單頁面 |
| 通過裝配和鏈接服務(wù)器上數(shù)據(jù)來創(chuàng)建HTML，然后將構(gòu)建好的HTML頁面發(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的靈魂） |
附購物車源碼：
View Code
運(yùn)行后結(jié)果：
|
