1.背景介紹
angular的簡(jiǎn)介
以前開(kāi)發(fā)（web或者移動(dòng)端）前端主要使用jQuery+原生js,如果使用某些前端UI框架的話坯汤，它自己還可能提供一些API可以使用虐唠。而且目前很多UI框架都是基于jQuery的，所以說(shuō)一下由jQuery跨到angularjs跨度較大惰聂，研究了一段時(shí)間的angularjs ,下面從整體上說(shuō)說(shuō)感受吧:
關(guān)于和jquery的比較
首先angular是一個(gè)mvc框架凿滤，它與jquery不同之處在于，前者致力于mvc代碼解耦庶近，采用model,controller以及view方式去組織代碼翁脆，而后者提供給你了很多APi函數(shù)，你可以不用寫(xiě)很多原生js去實(shí)現(xiàn)比較復(fù)雜的效果鼻种，比如說(shuō)動(dòng)畫(huà)反番，$.animate,這樣的效果如果需要原生js來(lái)寫(xiě)的話，代碼量將會(huì)比較龐大;
其次，jQuery沒(méi)有定義你的代碼如何組織罢缸，你可以將它放在一個(gè)單獨(dú)的js文件中進(jìn)行引用篙贸，也可以直接寫(xiě)在頁(yè)面中采用script標(biāo)簽進(jìn)行包裹，甚至可以直接以內(nèi)聯(lián)的方式寫(xiě)在html標(biāo)簽中枫疆，但是angularjs會(huì)將一個(gè)HTML頁(yè)面分成若干個(gè)模塊爵川，每個(gè)模塊都可以自己的scope，service以及directive息楔，各個(gè)模塊之間也可以進(jìn)行通信寝贡，但是整體上結(jié)構(gòu)是比較清晰的，就是說(shuō)其代碼組織方式是模塊化的值依。
最后圃泡，jQuery的思想是先設(shè)計(jì)好頁(yè)面，然后在已有頁(yè)面的基礎(chǔ)上進(jìn)行dom操作后展示頁(yè)面愿险，但是angular的view可能僅僅是一個(gè)框架颇蜡，對(duì)view的dom操作或者時(shí)間監(jiān)聽(tīng)都是在directive中實(shí)現(xiàn)的，而且一般情況下很少自己直接去寫(xiě)Dom操作代碼辆亏，只要你監(jiān)聽(tīng)model风秤。model發(fā)生變化后view也會(huì)發(fā)生變化。
2.知識(shí)剖析
angular JS的核心特征：
最后扮叨，jQuery的思想是先設(shè)計(jì)好頁(yè)面缤弦，然后在已有頁(yè)面的基礎(chǔ)上進(jìn)行dom操作后展示頁(yè)面，但是angular的view可能僅僅是一個(gè)框架甫匹，對(duì)view的dom操作或者時(shí)間監(jiān)聽(tīng)都是在directive中實(shí)現(xiàn)的甸鸟，而且一般情況下很少自己直接去寫(xiě)Dom操作代碼惦费，只要你監(jiān)聽(tīng)model兵迅。model發(fā)生變化后view也會(huì)發(fā)生變化。
2.數(shù)據(jù)綁定
典型的DOM操作薪贫，都是先將數(shù)據(jù)處理完畢之后恍箭，再通過(guò)元素上設(shè)置innerHTML將結(jié)果插入到所要的DOM中;這樣的工作重復(fù)性很高，還要確保界面和javascript屬性中獲取到數(shù)據(jù)時(shí)正確的狀態(tài)瞧省。 而在angular中一但建立雙向綁定扯夭，使用者輸入，會(huì)由Angular自動(dòng)傳到一個(gè)變量中鞍匾，再自動(dòng)讀到所有綁到它的內(nèi)容交洗，更新它，效果上就是立即的資料同步橡淑， 在程式碼中修改變量构拳，也會(huì)直接反應(yīng)到呈現(xiàn)的試圖上。
如：
html
{{greeting.text}}, World
js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
input的值（用戶的輸入）與greeting.text綁定在一起，并及時(shí)呈現(xiàn)在中置森。綁定是雙向的斗埂，也可用通過(guò)設(shè)置$scope.greeting.text的值，并自動(dòng)同步到輸入框和雙大括號(hào)（{{}}）中
3.依賴注入
依賴注入)是一種軟件設(shè)計(jì)模式,用于處理如何讓程序獲得其依賴(對(duì)象的)引用,提高代碼的重用性和靈活性
如:
$scope對(duì)象吧數(shù)據(jù)綁定自動(dòng)通過(guò)HelloController構(gòu)造函數(shù)傳遞給開(kāi)發(fā)者凫海，$scope并不是我們唯一需要的呛凶，還可以添加一個(gè)$location對(duì)象，
function HelloController($scope, $location) {
$scope.greeting = { text: 'Hello' };
// use $location for something good here...
}
小知識(shí)：通過(guò)Angular的依賴注入系統(tǒng)行贪，我們能夠遵循迪米特法則（最少知識(shí)原則）漾稀，只關(guān)注我們最需要的部分。
4.模塊化
代碼模塊化瓮顽，每個(gè)模塊的代碼獨(dú)立擁有自己的作用域县好，model，controller等暖混。
5.指令
Angular包括一個(gè)強(qiáng)大的DOM轉(zhuǎn)換引擎缕贡，使得開(kāi)發(fā)者有能力擴(kuò)展HTML語(yǔ)法。在之前的實(shí)例中我們看到{{}}是用綁定數(shù)據(jù)的拣播，ng-controller是用來(lái)指定哪個(gè)控制器來(lái)服務(wù)哪個(gè)視圖晾咪，ng-model將一個(gè)輸入框綁定到模型部分。我們稱之為HTML擴(kuò)展指令贮配。
3.常見(jiàn)問(wèn)題
如何在代碼中體現(xiàn)谍倦？
4.解決方案
下面我們就通過(guò)編碼實(shí)戰(zhàn)的方式來(lái)書(shū)寫(xiě)一個(gè)購(gòu)物車(chē)示例
5.編碼實(shí)戰(zhàn)
div ng-app=""
div ng-controller="CartController"
div ng-repeat="item in items"
span ng-bind="item.title"
input ng-model="item.quantity"
span ng-bind="item.price | currency"
span ng-bind="item.price * item.quantity | currency"
button ng-click="remove($index)"
JS?
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
}
6.擴(kuò)展思考
示例代碼中，angular是如何運(yùn)行的泪勒？每個(gè)指令的都做了些什么昼蛀？
div ng-app
ng-app告訴Angular管理頁(yè)面的那一部分。根據(jù)需要ng-app也可以放在上
div ng-controller="CartController"
Javascript類叫做控制器圆存，它可以管理相應(yīng)頁(yè)面區(qū)域中的任何東西叼旋。
div ng-repeat="item in items"
ng-repeat代表為items數(shù)組中每個(gè)元素拷貝一次該DIV中的DOM，同時(shí)設(shè)置item作為當(dāng)前元素沦辙，并可在模板中使用它夫植。
span{{item.title}}/span
表達(dá)式{{item.title}}檢索迭代中的當(dāng)前項(xiàng)，并將當(dāng)前項(xiàng)的title屬性值插入到DOM中
input ng-model="item.quantity"
ng-model定義輸入字段和item.quantity之間的數(shù)據(jù)綁定
span>{{item.price | currency}}/span
單價(jià)和總價(jià)格式化成美元形式油讯。通過(guò)Angular的currency過(guò)濾器進(jìn)行美元形式的格式化详民。
button ng-click="remove($index)"> Remove /button
通過(guò)ng-repeat的迭代順序$index，移除數(shù)據(jù)和相應(yīng)的DOM（雙向綁定特性）
function CartController($scope) { CartController 管理這購(gòu)物車(chē)的邏輯陌兑，$scope 就是用來(lái)把數(shù)據(jù)綁定到界面上的元素
$scope.items = [ {title: 'Paint pots', quantity: 8, price: 3.95}, {title: 'Polka dots', quantity: 17, price: 12.95}, {title: 'Pebbles', quantity: 5, price: 6.95} ];
通過(guò)定義$scope.items沈跨，我們已經(jīng)創(chuàng)建一個(gè)虛擬數(shù)據(jù)代表了用戶購(gòu)物車(chē)中物品集合，購(gòu)物車(chē)是不能僅工作在內(nèi)存中兔综，也需要通知服務(wù)器端持久化數(shù)據(jù)饿凛。
$scope.remove = function(index) {$scope.items.splice(index, 1);};
remove()函數(shù)能夠綁定到界面上隅俘，因此我們也把它增加到$scope 中
git連接：https://github.com/ptteng/PPT/blob/master/PPT
視頻連接
