IMG_20161118_181453_HDR.jpg
開(kāi)篇是技術(shù)框架慣例的吹牛逼時(shí)間，建議略過(guò)
- 在創(chuàng)建優(yōu)質(zhì)的web應(yīng)用方面未桥，Angular團(tuán)隊(duì)致力于減輕開(kāi)發(fā)人員在開(kāi)發(fā)Ajax應(yīng)用過(guò)程中的痛苦冬耿。
- 編寫web應(yīng)用的過(guò)程中萌壳，我們希望使用這樣的一個(gè)前端框架來(lái)構(gòu)建：使用簡(jiǎn)單，易于理解缤骨，同時(shí)當(dāng)web應(yīng)用變得復(fù)雜時(shí)绊起，依然能易于測(cè)試燎斩、擴(kuò)展和維護(hù)。更希望能一邊編寫代碼笋鄙，一邊看到代碼的效果怪瓶，而不是為了滿足瀏覽器內(nèi)部的奇怪運(yùn)行機(jī)制劳殖，頻繁修改（兼容性）。
- AngularJS框架已經(jīng)實(shí)現(xiàn)以上的目標(biāo)宣增，這得益于Angular周邊的開(kāi)源社區(qū)爹脾，讀者可以在GitHub上獲取更多大型的、復(fù)雜的案例灵妨。 （ AngularJS GitHub頁(yè)面）
介紹一些AngularJS框架中涉及到的概念
客戶端模板
- 類似Rails泌霍、PHP和JSP等傳統(tǒng)的web應(yīng)用（多頁(yè)面應(yīng)用）是將構(gòu)建好的HTML頁(yè)面整個(gè)返回給瀏覽器。而Ajax應(yīng)用（單頁(yè)面應(yīng)用）是只向服務(wù)器請(qǐng)求數(shù)據(jù)蟹地，在瀏覽器端把HTML模板與字符串組合起來(lái)怪与，最后把結(jié)果插入DOM中缅疟，實(shí)現(xiàn)DOM的局部?jī)?nèi)容刷新存淫。
- AngularJS是在Ajax的基礎(chǔ)上進(jìn)行了封裝和簡(jiǎn)化（使得頁(yè)面模板的定義可以直接在HTML中進(jìn)行，不需要在Java或JavaScript中編寫HTML代碼）
<!DOCTYPE html>
<!-- 1.通過(guò)ng-app設(shè)置Angular管理的范圍 -->
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Hello World</title>
</head>
<!-- 2.引入Angular的文件 -->
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"/>
<body>
<!-- 3.通過(guò)ng-controller定義控制器 -->
<div ng-controller="HelloController">
<!-- 4.嵌套花括號(hào)的方式執(zhí)行angular表達(dá)式 -->
<h3 class="show">{{text}},World</h3>
</div>
</body>
<!-- 5.編寫控制器的實(shí)現(xiàn)細(xì)節(jié) -->
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('HelloController', function($scope) {
$scope.text = "Hello"; //初始值
});
</script>
</html>
Model View Controller（MVC）
- MVC背后的核心理念是：把管理數(shù)據(jù)的代碼(model)、應(yīng)用邏輯代碼(controller)轧邪，以及向用戶展示數(shù)據(jù)的代碼(view)清晰的分離開(kāi)來(lái)忌愚。
- 理想的代碼流程是：
- 視圖從模型中獲取數(shù)據(jù)，展示給用戶院水；
- 當(dāng)用戶進(jìn)行界面交互時(shí)檬某，控制器會(huì)做出響應(yīng)并修改模型中的數(shù)據(jù)螟蝙；
- 最后，模型會(huì)通知視圖场斑，數(shù)據(jù)已經(jīng)發(fā)生了變更漏隐，視圖再刷新顯示的內(nèi)容；
- 在angular應(yīng)用中挺据，視圖就是DOM爽柒，控制器是自定義的JavaScript函數(shù)浩村，而模型數(shù)據(jù)則被存儲(chǔ)在
$scope對(duì)象中心墅。 - 通過(guò)MVC來(lái)組織代碼怎燥，會(huì)讓你的web應(yīng)用更加易于擴(kuò)展蜜暑、維護(hù)和測(cè)試肛捍。更重要的拙毫，MVC是一個(gè)思想上的模型缀蹄，編寫MVC標(biāo)準(zhǔn)的代碼缺前，能讓其他開(kāi)發(fā)者一眼看懂所寫的代碼，減少溝通成本滞欠。
數(shù)據(jù)綁定
- 上面提到過(guò)Ajax應(yīng)用通過(guò)his
innerHTML的方式將更新的HTML字符串插入到DOM筛璧，實(shí)現(xiàn)局部刷新。但如果需要頻繁更新數(shù)據(jù)棺牧，或者根據(jù)用戶輸入來(lái)修改數(shù)據(jù)的時(shí)候朗儒，則需要做很多及其繁雜的工作來(lái)保證數(shù)據(jù)的狀態(tài)是正確的颊乘，并且UI和JavaScript屬性要同時(shí)正確醉锄。 - AngularJS通過(guò)數(shù)據(jù)綁定乏悄，讓數(shù)據(jù)自己去同步。并且這一機(jī)制恳不，對(duì)來(lái)自服務(wù)器的數(shù)據(jù)檩小，同樣有效。
<!DOCTYPE html>
<!-- 1.通過(guò)ng-app設(shè)置Angular管理的范圍 -->
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Hello World</title>
</head>
<!-- 2.引入Angular的文件 -->
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
<!-- 3.通過(guò)ng-controller定義控制器 -->
<div ng-controller="HelloController">
<!-- 4.ng-model進(jìn)行數(shù)據(jù)模型綁定 -->
<input ng-model='text' />
<!-- 5.嵌嵌套花括號(hào)的方式執(zhí)行angular表達(dá)式 -->
<h3 class="show">{{text}},World</h3>
</div>
</body>
<!-- 5.編寫控制器的實(shí)現(xiàn)細(xì)節(jié) -->
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('HelloController', function($scope) {
$scope.text = ""; //初始值
});
</script>
</html>
效果：
數(shù)據(jù)綁定案例
依賴注入
- 上面通過(guò)
$scope對(duì)象獲取數(shù)據(jù)烟勋，但我們并不需要調(diào)用函數(shù)去創(chuàng)建這個(gè)對(duì)象。除了$scope對(duì)象之外阻肿，Angular還提供了很多對(duì)象來(lái)做一些很酷的事情，比如通過(guò)$location訪問(wèn)原生的window對(duì)象沮尿。這些都是通過(guò)Angular的依賴注入機(jī)制實(shí)現(xiàn)的。 - 依賴注入機(jī)制遵循
迪米特法則的設(shè)計(jì)模式畜疾，我們的類知識(shí)簡(jiǎn)單的獲取它們所需要的東西赴邻，而不需要?jiǎng)?chuàng)建那些它們所依賴的東西庸疾。
迪米特法則乍楚，也叫做最少知識(shí)原則届慈，核心含義是一個(gè)類要盡量少地知道其他類的相關(guān)信息徒溪。
指令
- Angualr最強(qiáng)大的功能之一就是可以把模板寫成HTML的形式金顿，這是由于內(nèi)置的DOM轉(zhuǎn)換引擎臊泌，通過(guò)該引擎擴(kuò)展HTML的語(yǔ)法揍拆。
- 例如渠概，通過(guò)花括號(hào)
{{text}}進(jìn)行雙向數(shù)據(jù)綁定，通過(guò)ng-controller用來(lái)指定控制器播揪，通過(guò)ng-model將輸入數(shù)據(jù)綁定到模型中的屬性贮喧，這些都是HTML擴(kuò)展指令猪狈。 - 不僅限于Angular內(nèi)置的指令箱沦，甚至還可以編寫自定義的指令來(lái)擴(kuò)展HTML模板的功能雇庙。
入門實(shí)例：購(gòu)物車
<!DOCTYPE html>
<!-- 通過(guò)ng-app設(shè)置Angular管理的范圍 -->
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Shopping Cart</title>
</head>
<style type="text/css">
span{border: 1px solid #CCCCCC;}
.bookItem{margin-bottom: 15px;}
.bookName{font-weight: bold;}
.bookPrice{width: 28px;text-align: center;}
</style>
<!-- 引入Angular的文件 -->
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body ng-controller='CartController'>
<h2>你的購(gòu)物車</h2>
<!-- 通過(guò)ng-repeat遍歷數(shù)據(jù)模型，并復(fù)制DOM結(jié)構(gòu) -->
<div ng-repeat='item in items' class="bookItem">
<!-- 獲取數(shù)據(jù)模型中的屬性值放入DOM結(jié)構(gòu) -->
<div class="bookName">{{item.title}}</div>
<!-- ng-model把數(shù)據(jù)模型和輸入框綁定關(guān)系 -->
<input ng-model='item.quantity' class="bookPrice"/>
<span>單價(jià)：{{item.price}}元</span>
<span>總價(jià)：{{item.price * item.quantity}}元</span>
<button ng-click="remove($index)">移除</button>
</div>
</body>
<!-- 在自定義控制器中實(shí)現(xiàn)業(yè)務(wù)細(xì)節(jié) -->
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('CartController', function($scope) {
//虛擬數(shù)據(jù)
$scope.items = [
{
title : 'JavaScript性能優(yōu)化：度量疆前、監(jiān)控與可視化',
quantity : 1,
price : 40.40
},
{
title : 'HTML5基礎(chǔ)知識(shí) 核心技術(shù)與前沿案例',
quantity : 2,
price : 59.30
},
{
title : 'ES6標(biāo)準(zhǔn)入門',
quantity : 1,
price : 58.70
}
];
//移除方法
$scope.remove = function(index){
$scope.items.splice(index,1);
};
});
</script>
</html>
效果：
Angular購(gòu)物車案例
