AngularJS 重新定義了前端應用的開發方式。面對HTML和JavaScript之間的界線，它非但不畏縮不前，反而正面出擊，提出了有效的解決方案。
很多前端應用的開發框架，比如Backbone、EmberJS等，都要求開發者繼承此框架特有的一些JavaScript物件。這種方式有其長處，但它不必要地汙染了開發者自己程式碼的物件空間，還要求開發者去了解記憶體裡那些抽象物件。儘管如此我們還是接受了這種方式，因為網路最初的設計無法提供我們今天所需的互動性，於是我們需要框架，來幫我們填補JavaScript和HTML之間的鴻溝。
AngularJS 填上了這條鴻溝。
而且有了它，你不用再“直接”操控DOM，只要給你的DOM註上metadata（即AngularJS裡的directive們），然後讓AngularJS來幫你操縱DOM。
同時，AngularJS不依賴（也不妨礙）任何其他的框架。你甚至可以基於其它的框架來開發AngularJS應用。
它就這麼好用。聽著挺厲害？是挺厲害的。通過這個七步系列，我們會帶著你開始用AngularJS寫厲害的應用——不管你之前有沒有接觸過。跟著我們，我們會教你成為一個專家級的AngularJS開發者。
不過首先我們得搞清楚：什麼時候該用AngularJS？
AngularJS是一個 MV* 框架，最適於開發客戶端的單頁面應用。它不是個功能庫，而是用來開發動態網頁的框架。它專注於擴充套件HTML的功能，提供動態資料繫結（data binding），而且它能跟其它框架（如jQuery）合作融洽。
如果你要開發的是單頁應用，AngularJS就是你的上上之選。Gmail、Google Docs、Twitter和Facebook這樣的應用，都很能發揮AngularJS的長處。但是像遊戲開發之類對DOM進行大量操縱、又或者單純需要極高執行速度的應用，就不是AngularJS的用武之地了。
讀過上面的介紹，現在是你學習AngularJS所要理解的第一個話題了：
1. 如何開始開發一個應用
在這個系列教程裡，我們會開發一個NPR（美國全國公共廣播電臺）廣播的音訊播放器，它能顯示Morning Edition節目裡播出的最新故事，並在我們的瀏覽器裡播放它們。完成版的Demo可以看這裡：http://www.ng-newsletter.com/code/beginner_series/）
寫AngularJS的應用，我們會一起寫互動層面和展示層面。
這一開始可能讓你覺得有點奇怪，特別是當你用過其他框架將這兩個層面分別對待的框架時。然而一旦你摸到訣竅，AngularJS 的寫法就會變成你的第二天性了。
讓我們來看一個能用AngularJS開發的最簡單的應用：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </head> <body> <div> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <h1>Hello, {{ yourName }}!</h1> </div> </body> </html> |
（這個互動示例可以在英文原文中體驗一下。）
你看，不費吹灰之力，你就得到了雙向資料繫結。
雙向資料繫結，意味著你可以在後臺改變資料，而這些變動立刻就會像魔法一樣自動出現在View上（這裡實際上沒有魔法，我們待會就會看到這是怎麼實現的。）
同樣地，如果你對View進行改變（比如在文字框裡寫點什麼），你的Model也會自動得到更新。
所以說，我們在應用裡到底做了什麼？
- ng-app
- ng-model=“yourName”
- {{ yourName }}
首先，我們寫上了最重要（也是最容易被忘記）的部分：<html>元素的ng-app屬性。少了這個屬性，AngularJS就沒法開始工作。
其次，我們告訴AngularJS，對頁面上的“yourName” 這個Model進行雙向資料繫結。
第三，我們告訴AngularJS，在“{{ yourName }}”這個指令模版上顯示“yourName”這個Model的資料。
就這麼多。我們開發了一個動態應用，一個本來要耗費多得多的時間和程式碼來開發的應用：在這裡，我們不需要給雙向資料繫結寫任何規則，不需要給更新model和view寫任何程式碼，甚至不需要編寫任何model——事實上，我們根本都還沒開始碰JavaScript。我們不需要寫程式碼，直到我們想開發更個性化的應用行為為止。
你會看到，以上種種都是得益於AngularJS強大的設計。
開發你的應用
這個部分我們來看一個應用，我們稱它為“myApp”。跟隨教程，你可以用git來clone本教程系列的程式碼庫（具體操作方法見下），或者跟著指示自己編寫程式碼。
建立一個index.html檔案，內容如下：
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="js/main.js"></script> </head> <body> </body> </html> |
然後建立資料夾js，再在裡面建立檔案main.js。所用的git命令如下：
|
1 2 |
mkdir js touch js/main.js |
這個HTML頁面會載入兩個JavaScript檔案：AngularJS和我們的應用：main.js。我們在這個部分要做的所有工作，幾乎都在這個main.js檔案裡。
為擴充套件和個性化我們的應用，我們得寫點JavaScript程式碼。所有JS程式碼，我們都會寫在main.js檔案裡。
angular.module
要定義一個AngularJS應用，我們先得定義一個AngularJS模組（angular.module）。所謂AngularJS模組，其實就是一系列函式的集合，當應用被啟動時，這些函式就會被執行（這個教程系列裡，我們還不打算介紹應用的設定和執行部分，這些在以後的教程裡會討論。）
接下來，我們就在main.js檔案裡來定義我們的AngularJS模組：
|
1 |
var app = angular.module('myApp', []); |
用這行程式碼，我們建立了叫做“myApp”的AngularJS模組。（現在先不用擔心這裡的第二個引數――那個空陣列[]，之後我們會回來討論它。）
現在我們要在頁面上例項化我們的myApp模組，並告訴AngularJS，我們的應用執行在DOM結構的哪一部分。在頁面上例項化一個模組，我們使用ng-app這個指令，它的存在告訴AngularJS，我們的模組擁有那一部分的DOM結構。
傳入我們應用的名字作為ng-app指令的值，我們就可以在index.html頁面上例項化我們的應用（模組）：
|
1 |
<html ng-app="myApp"> |
重新整理頁面，現在AngularJS就會引導啟動我們的myApp。
我們可以把ng-app設在任何DOM元素上，然後該元素就會成為AngularJS啟動執行我們應用的地方。通過這一步，我們就可以在任何頁面裡寫AngularJS應用，即使頁面的其他部分並不是用AngularJS寫的應用。
|
1 2 3 4 |
<h2>I am not inside an AngularJS app</h2> <div ng-app="embeddedApp"> <h3>Inside an AngularJS app</h3> </div> |
如果一個應用會掌控整個頁面，那麼你就可以把ng-app指令直接寫在html元素上。
定義好了我們的應用，就可以開始建立它的其他部分了。我們會使用$scope來建立，這也是AngularJS最重要的概念之一。我們會在這個七步系列的第二部分深入學習$scope服務。
那麼，現在我們已經有了一個AngularJS應用的基本結構，它將成為我們NPR音訊播放器應用的起點。
這個新手系列教程程式碼的git庫在這裡：https://github.com/auser/ng-newsletter-beginner-series.
要下載這個程式碼庫到本地，首先確保你已經安裝了git，然後clone這個git庫，check out分支part1：
|
1 2 |
git clone https://github.com/auser/ng-newsletter-beginner-series.git git checkout -b part1 |