編者注：我們發現了比較有趣的系列文章 《30天學習30種新技術》 ，準備翻譯，一天一篇更新，年終禮包。以下是第二天技術的譯文。
昨晚我完爆了一天一技術的任務（完成的很好），談的是關于Bower的一些知識，你可以在
這裡看一下文章，也可以去
reddit看看大家的讨論。
今天我打算學習一下AngularJS的基本知識，并希望能用它做一個簡單小應用。我也會在這篇文章裡用到Bower，我不可能在一天之内學習完AngularJS，是以我打算用好幾天時間來學習，每天涉及其中不同的點。
什麼是AngularJS？
- 擴充HTML添加動态特性，是以我們可以輕松地建構現代web應用程式
- 以你想要的方式使用
- 帶你回到HTML
- 聲明方法
- 簡單
- 通過雙向資料綁定消除DOM操作，任何時候當模型改變時視圖都會得到更新，反之亦然
- 你可以用它來建構單頁Web應用程式。當你建構如路由，Ajax調用，資料綁定，緩存，曆史記錄和DOM操作這類的SPA應用時，會有很多的挑戰。
AngularJS的主要元件是：
- 控制器：視圖背後的代碼
- 作用域：包含模型資料，粘合控制器和視圖
- 子產品：定義新的服務，或使用現有的服務、指令、過濾器等，子產品可以依賴于另一個子產品
- 指令：允許你通過定義自己項目特定的HTML指令來擴充HTML，學習HTML的新花樣
為什麼我會在意AngularJS？
對我而言有兩個主要原因：
- 它是由谷歌支援，有很多開發者的大社群
- 全棧架構：這意味着我不需要依靠其他數百萬計的腳本，它們會很好地整合在一起
前提準備
我們将使用Bower為示例應用程式安裝AngularJS，如果你還沒有安裝bower，那麼請看我
前一篇博文。
安裝AngularJS
在系統的任何友善的位置建立一個叫
bookshop
的目錄，用下面指令來安裝AngularJS和Twitter bootstrap：
$ bower install angular
$ bower install bootstrap
上面的指令會在
bookshop
目錄下建立一個叫
bower_components
的檔案夾，裡邊有已安裝的全部元件。
開始使用AngularJS
現在建立一個名為
index.html
的html檔案，它将會是一個基于AngularJS的網上書店應用。
<!doctype html>
<html>
<head>
<title>Bookshop - Your Online Bookshop</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Your Online Bookshop</h2>
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
</body>
</html>
如果你在浏覽器打開這個檔案，你會看到“你的網上書店”正在呈現，但這并不是AngularJS的厲害之處，是以接下來我們看看它真正有趣的地方：
<html ng-app>
<div class="container" ng-init="books=['Effective Java','Year without Pants','Confessions of public speaker','JavaScript Good Parts']">
<h2>Your Online Bookshop</h2>
<ul class="unstyled">
<li ng-repeat="book in books">
{{book}}
</li>
</ul>
上邊這段代碼有一些需要注意的點：
- 在HTML标簽裡邊，我們已經定義了
ng-app
- 我們所使用的第二個Angular指令是
ng-init
- 最後一個有趣的部分，是用于周遊集合中的所有元素的
ng-repeat
li
上邊是以字元串數組的形式使用資料，但也可以用存儲對象的方式，如下：
<title>Bookshop - Your Online Bookshop</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]">
<h2>Your Online Bookshop</h2>
<ul class="unstyled">
<li ng-repeat="book in books">
<span>{{book.name}} written by {{book.author}}</span>
</li>
</ul>
</div>
在上面的代碼中，我們建立了一個書籍數組對象，其中每本書對象都有名字和作者。最後，我們在清單中同時列出作者姓名和書籍名稱。
使用過濾器
Angular提供了過濾器，這有助于格式化資料。你可以使用過濾器來格式化日期、貨币、大小寫字元、排列順序和基于搜尋的過濾。下面就是一個教你如何利用過濾器來大寫的作者姓名和按書名來排序的例子：
<div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]">
<li ng-repeat="book in books | orderBy :'name'">
<span>{{book.name}} written by {{book.author | uppercase}}</span>
正如你所看到的，我們在
ng-repeat
指令中使用了按順序排列的過濾器，在顯示作者姓名時用一個大寫過濾器。
為了添加一個搜尋過濾器，添加搜尋輸入的文本框，然後使用一個過濾器以搜尋限制結果，如下：
<input type="search" ng-model="criteria">
<li ng-repeat="book in books | filter:criteria | orderBy :'name'">
使用控制器
控制器是AngularJS的主要元件之一，它們是給視圖提供動力和資料的代碼。在我們的例子中，我們可以将測試資料初始化代碼移到一個控制器，建立一個名為
app.js
的JavaScript檔案，它将容納我們應用程式所有特定的JavaScript代碼。
function BookCtrl($scope){
$scope.books = [
{'name': 'Effective Java', 'author':'Joshua Bloch'},
{'name': 'Year without Pants', 'author':'Scott Berkun'},
{ 'name':'Confessions of public speaker','author':'Scott Berkun'},
{'name':'JavaScript Good Parts','author':'Douglas Crockford'}
]
}
$scope
控制器和視圖之間的粘合劑，而且會注入到
BookCtrl
。現在我們添加書籍數組的對象到
$scope
對象，這個對象對視圖是可見的。
現在改變
index.html
使用
BookCtrl
，如下：
<!DOCTYPE html>
<div class="container" ng-controller="BookCtrl">
<input type="search" ng-model="criteria">
<script type="text/javascript" src="app.js"></script>
今天就這些内容，這也隻是冰山一角。我将會用很多天來學習AngularJS的特性，它真的是一個神奇又強大的庫。