AngularJS 是什么
AngularJS的官方文檔是這樣介紹它的。完全使用JavaScript編寫的客戶端技術(shù)。同其他歷史悠久的Web技術(shù)（HTML、CSS和JavaScript）配合使用，使Web應(yīng)用開發(fā)比以往更簡單、更快捷。
AngularJS主要用于構(gòu)建單頁面Web應(yīng)用。它通過增加開發(fā)人員和常見Web應(yīng)用開發(fā)任務(wù)之間的抽象級(jí)別，使構(gòu)建交互式的現(xiàn)代Web應(yīng)用變得更加簡單。
AngularJS的開發(fā)團(tuán)隊(duì)將其描述為一種構(gòu)建動(dòng)態(tài)Web應(yīng)用的結(jié)構(gòu)化框架。
AngularJS使開發(fā)Web應(yīng)用變得非常簡單，同時(shí)也降低了構(gòu)建復(fù)雜應(yīng)用的難度。它提供了開發(fā)者在現(xiàn)代Web應(yīng)用中經(jīng)常要用到的一系列高級(jí)功能，例如：
- 解耦應(yīng)用邏輯、數(shù)據(jù)模型和視圖
- Ajax服務(wù)
- 依賴注入
- 瀏覽歷史（使書簽和前進(jìn)、后退按鈕能夠像在普通Web應(yīng)用中一樣工作）
- 測(cè)試
- 更多功能
AngularJS是開源的
最近在玩github，看到了有些項(xiàng)目license是MIT，我還以為是MIT（麻省理工學(xué)院），一問我同事，才知道MIT意味著你可以為AngularJS貢獻(xiàn)代碼，使其變得更加優(yōu)秀。關(guān)于貢獻(xiàn)代碼的更多內(nèi)容可以在AngularJS的官網(wǎng)中查看“貢獻(xiàn)代碼”部分。不知道AngularJS官網(wǎng)的，可以百度（我從來不記官網(wǎng)，都是百度的）。
第一個(gè)AngularJS程序——Hello World
<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple app</title>
<script src="https://ajax./ajax/libs/angularjs/1.2.13/angular.js">
</script>
</head>
<body>
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{ name }}</h1>
</body>
</html>
雖然這個(gè)例子不怎么有趣，但它展示了AngularJS最基本也最令人印象深刻的功能之一：數(shù)據(jù)綁定。
AngularJS則采用了完全不同的解決方案。它創(chuàng)建實(shí)時(shí)模板來代替視圖，而不是將數(shù)據(jù)合并進(jìn)模板之后更新DOM。任何一個(gè)獨(dú)立視圖組件中的值都是動(dòng)態(tài)替換的。這個(gè)功能可以說是AngularJS中最重要的功能之一，也是讓我們只用10行代碼，并且在沒有任何JavaScirpt的情況下就可以寫出Hello World的關(guān)鍵。
要實(shí)現(xiàn)這個(gè)功能，只要在HTML頁面中引用angular.js，并在某個(gè)DOM元素上明確設(shè)置ng-app屬性即可。ng-app屬性聲明所有被其包含的內(nèi)容都屬于這個(gè)AngularJS應(yīng)用，這也是我們可以在Web應(yīng)用中嵌套AngularJS應(yīng)用的原因。只有被具有ng-app屬性的DOM元素包含的元素才會(huì)受AngularJS影響。
自動(dòng)數(shù)據(jù)綁定使我們可以將視圖理解為模型狀態(tài)的映射。當(dāng)客戶端的數(shù)據(jù)模型發(fā)生變化時(shí)，視圖就能反映出這些變化，并且不需要寫任何自定義的代碼，它就可以工作。
在MVC（Model View Controller，模型?視圖?控制器）的世界里，控制器可以不必?fù)?dān)心會(huì)牽扯到渲染視圖的工作。這樣我們就不必再擔(dān)心如何分離視圖和控制器邏輯，并且也可以使測(cè)試變得既簡單又令人愉悅。
數(shù)據(jù)綁定的最佳實(shí)踐
由于JavaScript自身的特點(diǎn)，以及它在傳遞值和引用時(shí)的不同處理方式，通常認(rèn)為，在視圖中通過對(duì)象的屬性而非對(duì)象本身來進(jìn)行引用綁定，是Angular中的最佳實(shí)踐。
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax./ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ clock.now }}!</h1>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
在這個(gè)例子中，相比每秒鐘都更新$scope.clock，更新clock.now的值會(huì)是更好的選擇。
// 在app.js中
function MyController($scope) {
$scope.clock = {
now: new Date()
};
var updateClock = function() {
$scope.clock.now = new Date()
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
