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