AngularJS 必要準(zhǔn)備工作

必要準(zhǔn)備工作

PhoneCat教程應(yīng)用程序

AngularJS最好的入方法是跟著教程操作，它帶領(lǐng)你經(jīng)歷了一個(gè)AngularJS網(wǎng)頁(yè)應(yīng)用程序的構(gòu)建。你將建立的這個(gè)應(yīng)用是一個(gè)目錄，顯示了一個(gè)安卓設(shè)備的列表，讓你能夠篩選列表，可以只查看你感興趣的設(shè)備，然后查看任何設(shè)備的詳情。

跟隨著這個(gè)教程以看到Angular如何讓瀏覽器變得更聰明——不需要使用原生的擴(kuò)展或者插件：

• 查看如何使用客戶端數(shù)據(jù)綁定的示例，以建立數(shù)據(jù)的動(dòng)態(tài)視圖，它會(huì)響應(yīng)用戶的操作立即改變自己。
• 查看Angular如何在與你的數(shù)據(jù)同步的同時(shí)，保持你的視圖不變，不需要DOM操縱。
• 學(xué)一個(gè)更好的、更容易的方法，以測(cè)試你的網(wǎng)頁(yè)應(yīng)用，利用Karma以及Protractor。
• 學(xué)會(huì)如何使用依賴性注入和服務(wù)，以制作常見(jiàn)的網(wǎng)頁(yè)任務(wù)，比如說(shuō)更容易地在應(yīng)用中獲得數(shù)據(jù)。

當(dāng)你看完該教程時(shí)你將能夠：

• 創(chuàng)建工作在現(xiàn)代瀏覽器中的動(dòng)態(tài)的應(yīng)用程序。
• 使用數(shù)據(jù)綁定以把你的數(shù)據(jù)模塊連接到你的視圖中。
• 利用Karma創(chuàng)建并運(yùn)行單元測(cè)試。
• 利用Protractor創(chuàng)建并運(yùn)行端到端測(cè)試。
• 從模板中移出應(yīng)用邏輯，移到控件中。
• 使用Angular服務(wù)從服務(wù)器端獲得數(shù)據(jù)。
• 使用ngAnimate把動(dòng)畫應(yīng)用到你的應(yīng)用程序中。
• 識(shí)別資源以學(xué)習(xí)更多關(guān)于AngularJS。

本教程將指導(dǎo)你完成建立一個(gè)應(yīng)用程序的整個(gè)過(guò)程，包括編寫并運(yùn)行單元測(cè)試和端到端測(cè)試。每一步驟的末尾的實(shí)驗(yàn)向你提供了學(xué)習(xí)更多關(guān)于AngularJS的建議，以及你正在建立的應(yīng)用程序的建議。

你可以在幾個(gè)時(shí)內(nèi)看完整個(gè)教程，或者你可能會(huì)想愉快地花一天時(shí)間真正深入挖掘它。如果你尋求更短的AngularJS的入門，請(qǐng)仔細(xì)閱讀起步文檔。

起步

本頁(yè)的剩余部分解釋了你可以如何設(shè)置你的本地機(jī)器用于開(kāi)發(fā)。如果你只是想閱讀教程，則你可以直接查看第一步：第一步 引導(dǎo)程序。

操作代碼

你可以在你自己的電腦上跟隨著這個(gè)教程、擺弄代碼。用這種方法，你可以得到真正書寫AngularJS代碼的親手實(shí)踐，還使用了推薦的測(cè)試工具。

該教程取決于為源代碼管理器使用了哪個(gè)版本的Git。除了安裝并運(yùn)行幾段git代碼，你不需要知道關(guān)于Git的任何東西，只要跟著這個(gè)教程。

安裝Git

你可以從http://git-scm.com/download下載并安裝Git。一旦安裝好了，你應(yīng)該能夠訪問(wèn)到git命令行工具。你將需要用到的主要命令是：

• git clone ... : 把一個(gè)遠(yuǎn)程的知識(shí)庫(kù)克隆到你的本地機(jī)器上
• git checkout ... : 檢查一個(gè)特定的分支或一個(gè)代碼的標(biāo)記版本以破解

下載angular-phonecat

運(yùn)行以下命令以克隆放置在GitHub上的 angular-phonecat repository：

git clone --depth=14 https://github.com/angular/angular-phonecat.git

該命令在你當(dāng)前的目錄中創(chuàng)建了angular-phonecat目錄。

把你當(dāng)前的目錄變成angular-phonecat。

cd angular-phonecat

從現(xiàn)在開(kāi)始，本教程指令，假定你從angular-phonecat目錄上運(yùn)行所有的命令。

安裝Node.js

如果你想運(yùn)行預(yù)配置的本地web服務(wù)器以及測(cè)試工具，則你還需要Node.js v0.10.27+。

你可以針對(duì)你的操作系統(tǒng)從http://nodejs.org/download/下載一個(gè)Node.js安裝包。

運(yùn)行以下的命令行，檢查你已經(jīng)安裝的Node.js的版本：

node --version

在基于Debian的發(fā)行版中，與別的實(shí)用工具有一個(gè)名稱沖突，它稱為node。建議的解決方案是再安裝nodejs-legacy apt 安裝包，它會(huì)把node重命名為nodejs。

apt-get install nodejs-legacy npm
nodejs --version
npm --version

一旦你已經(jīng)在你的機(jī)器上安裝了Node.js，你可以依靠運(yùn)行以下代碼下載該工具。

npm install

這個(gè)命令讀取了angular-phonecat的package.json文件，并把以下工具下載到node_modules目錄中：

• Bower - 客戶端代碼包管理器
• Http-Server - 簡(jiǎn)單的本地靜態(tài)web服務(wù)器
• Karma - 單元測(cè)試運(yùn)行器
• Protractor - 端到端測(cè)試運(yùn)行器

運(yùn)行npm install還將自動(dòng)使用bower以把該Angular框架下載到app/bower_component目錄。

該項(xiàng)目用一些npm助手腳本預(yù)配置，以使它容易運(yùn)行你在開(kāi)發(fā)時(shí)需要用到的常見(jiàn)的任務(wù)：

• npm start : 啟動(dòng)一個(gè)本地開(kāi)發(fā)Web服務(wù)器
• npm test : 啟動(dòng)Karma單元測(cè)試運(yùn)行器
• npm run protractor : 運(yùn)行Protractor端到端（E2E）測(cè)試
• npm run update-webdriver : 安裝Protractor所需要的驅(qū)動(dòng)程序

安裝助手工具（可選的）

Bower、Http-Server、Karma和Protractor模塊也都中可執(zhí)行的，它們可以全局安裝，也可從終端/命令提示符中直接運(yùn)行。跟隨著這個(gè)教程，你不需要安裝它，但是如果你決定你確實(shí)想要直接運(yùn)行它們，你可以使用sudo npm install -g ...來(lái)全局安裝這些模塊。

作為實(shí)例，要想安裝可執(zhí)行的Bower命令行，你只需要輸入以下指令：

sudo npm install -g bower

(Omit the sudo if running on Windows)

然后你可以直接運(yùn)行該bower工具了，如下：

bower install

運(yùn)行開(kāi)發(fā)Web服務(wù)器

雖然Angular應(yīng)用程序是純客戶端代碼，而且能夠直接從文件系統(tǒng)中，在web瀏覽器中打開(kāi)它們，但是最好從一個(gè)HTTP web服務(wù)器中供應(yīng)它們。特別是，為了安全原因，如果網(wǎng)頁(yè)直接從文件系統(tǒng)中加載，很多現(xiàn)代瀏覽器不允許JavaScript發(fā)起服務(wù)器請(qǐng)求。

為了在開(kāi)發(fā)期間托管應(yīng)用程序，用一個(gè)簡(jiǎn)單的靜態(tài)的web服務(wù)器配置angular-phonecat項(xiàng)目。運(yùn)行以下指令以開(kāi)啟web服務(wù)器。

npm start

這將創(chuàng)建一個(gè)本地web服務(wù)器，鑒聽(tīng)你的本地機(jī)器上的端口8000?，F(xiàn)在你可以在這個(gè)地址上瀏覽該應(yīng)用程序了：

http://localhost:8000/app/index.html

運(yùn)行單元測(cè)試

我們使用單元測(cè)試以確保我們的應(yīng)用程序中的JavaScript代碼正確運(yùn)行。單元測(cè)試關(guān)注于應(yīng)用程序的小型的隔離部分。單元測(cè)試保存在test/unit目錄中。

angular-phonecat項(xiàng)目被配置為使用Karma以針對(duì)本應(yīng)用程序運(yùn)行該單元測(cè)試。運(yùn)行以下指令以開(kāi)始Karma。

npm test

這將開(kāi)始Karma單元測(cè)試運(yùn)行器。Karma將讀取在test/karma.conf.js中的配置文件。 這個(gè)配置文件告訴Karma要：

• 打開(kāi)一個(gè)Chrome瀏覽器，把它連接到Karma。
• 在該瀏覽器中執(zhí)行所有的單元測(cè)試
• 報(bào)告在終端/命令行窗口中的那些測(cè)試的結(jié)果
• 觀察所有項(xiàng)目的JavaScript文件，每當(dāng)有變化時(shí)重新運(yùn)行測(cè)試

最后讓它一直在后臺(tái)運(yùn)行，因?yàn)楸睍?huì)給你即時(shí)的回調(diào)，關(guān)于當(dāng)你在操作代碼時(shí)，你的改變是否通過(guò)了單元測(cè)試的回調(diào)。

運(yùn)行端到端測(cè)試

我們使用端到端測(cè)試以確保應(yīng)用程序作為一個(gè)整體運(yùn)行。端到端測(cè)試被設(shè)計(jì)為測(cè)試整個(gè)應(yīng)用客戶端應(yīng)用程序，特別是測(cè)試視圖是否正確顯示并有正確的行為。它在瀏覽器中運(yùn)行，通過(guò)模擬真實(shí)用戶與真實(shí)應(yīng)用程序的交互。

端到端測(cè)試保存在test/e2e目錄中。

該angular-phonecat項(xiàng)目被配置為使用Protractor以針對(duì)應(yīng)用程序運(yùn)行端到端測(cè)試。Protractor依賴于一組允許它與瀏覽器交互的驅(qū)動(dòng)程序。你可以通過(guò)運(yùn)行以下代碼以安裝這些驅(qū)動(dòng)程序：

npm run update-webdriver

你只需要運(yùn)行它一次。

因?yàn)镻rotactor通過(guò)與正在運(yùn)行的應(yīng)用程序交互來(lái)起作用，我們需要開(kāi)啟我們的web服務(wù)器：

npm start

然后在一個(gè)單獨(dú)的終端/命令行窗口中，通過(guò)運(yùn)行以下指令，我們可以針對(duì)該應(yīng)用程序運(yùn)行Protractor測(cè)試腳本：

npm run protractor

Protractor將讀取在test/protractor-conf.js中的配置文件。該配置文件要求Protractor做：

• 打開(kāi)一個(gè)Chrome瀏覽器，把它連接到應(yīng)用程序上
• 在瀏覽器中執(zhí)行所有的端到端測(cè)試
• 報(bào)告在終端/命令行窗口中的那些測(cè)試結(jié)果
• 關(guān)閉瀏覽器并退出

最好在每當(dāng)你對(duì)HTML視圖作了改變的時(shí)候運(yùn)行端到端測(cè)試，或者當(dāng)你想檢查該應(yīng)用程序作為一個(gè)整體是否正確執(zhí)行時(shí)，運(yùn)行端到端測(cè)試。通常在把一個(gè)新的改變提交到遠(yuǎn)程知識(shí)庫(kù)之前運(yùn)行端到端測(cè)試。

現(xiàn)在你已經(jīng)測(cè)試好了你的本地機(jī)器，讓我們開(kāi)始這個(gè)教程吧：第一步 引導(dǎo)程序。