AngularJS最好的入方法是跟著教程操作,它帶領你經歷了一個AngularJS網頁應用程序的構建。你將建立的這個應用是一個目錄,顯示了一個安卓設備的列表,讓你能夠篩選列表,以只察看你感興趣的設備,然后查看任何設備的詳情。
跟隨著這個教程以看到Angular如何讓瀏覽器變得更聰明——不需要使用原生的擴展或者插件:
當你看完該教程時你將能夠:
本教程將指導你完成建立一個應用程序的整個過程,包括編寫并運行單元測試和端到端測試。每一步驟的末尾的實驗向你提供了學習更多關于AngularJS的建議,以及你正在建立的應用程序的建議。
你可以在幾個時內看完整個教程,或者你可能會想愉快地花一天時間真正深入挖掘它。如果你尋求更短的AngularJS的入門,請仔細閱讀起步文檔。
本頁的剩余部分解釋了你可以如何設置你的本地機器用于開發。如果你只是想閱讀教程,則你可以直接查看第一步:第一步 引導程序。
你可以在你自己的電腦上跟隨著這個教程、擺弄代碼。用這種方法,你可以得到真正書寫AngularJS代碼的親手實踐,還使用了推薦的測試工具。
該教程取決于為源代碼管理器使用了哪個版本的Git。除了安裝并運行幾段git代碼,你不需要知道關于Git的任何東西,只要跟著這個教程。
你可以從http://git-scm.com/download下載并安裝Git。一旦安裝好了,你應該能夠訪問到git
命令行工具。你將需要用到的主要命令是:
git clone ...
: 把一個遠程的知識庫克隆到你的本地機器上git checkout ...
: 檢查一個特定的分支或一個代碼的標記版本以破解運行以下命令以克隆放置在GitHub上的 angular-phonecat repository:
git clone --depth=14 https://github.com/angular/angular-phonecat.git
該命令在你當前的目錄中創建了angular-phonecat
目錄。
把你當前的目錄變成angular-phonecat
。
cd angular-phonecat
從現在開始,本教程指令,假定你從angular-phonecat
目錄上運行所有的命令。
如果你想運行預配置的本地web服務器以及測試工具,則你還需要Node.js v0.10.27+。
你可以針對你的操作系統從http://nodejs.org/download/下載一個Node.js安裝包。
運行以下的命令行,檢查你已經安裝的Node.js的版本:
node --version
在基于Debian的發行版中,與別的實用工具有一個名稱沖突,它稱為node
。建議的解決方案是再安裝nodejs-legacy
apt 安裝包,它會把node
重命名為nodejs
。
apt-get install nodejs-legacy npm
nodejs --version
npm --version
一旦你已經在你的機器上安裝了Node.js,你可以依靠運行以下代碼下載該工具。
npm install
這個命令讀取了angular-phonecat的package.json
文件,并把以下工具下載到node_modules
目錄中:
運行npm install
還將自動使用bower以把該Angular框架下載到app/bower_component
目錄。
該項目用一些npm助手腳本預配置,以使它容易運行你在開發時需要用到的常見的任務:
npm start
: 啟動一個本地開發Web服務器npm test
: 啟動Karma單元測試運行器npm run protractor
: 運行Protractor端到端(E2E)測試npm run update-webdriver
: 安裝Protractor所需要的驅動程序Bower、Http-Server、Karma和Protractor模塊也都中可執行的,它們可以全局安裝,也可從終端/命令提示符中直接運行。跟隨著這個教程,你不需要安裝它,但是如果你決定你確實想要直接運行它們,你可以使用sudo npm install -g ...
來全局安裝這些模塊。
作為實例,要想安裝可執行的Bower命令行,你只需要輸入以下指令:
sudo npm install -g bower
(Omit the sudo if running on Windows)
然后你可以直接運行該bower工具了,如下:
bower install
雖然Angular應用程序是純客戶端代碼,而且能夠直接從文件系統中,在web瀏覽器中打開它們,但是最好從一個HTTP web服務器中供應它們。特別是,為了安全原因,如果網頁直接從文件系統中加載,很多現代瀏覽器不允許JavaScript發起服務器請求。
為了在開發期間托管應用程序,用一個簡單的靜態的web服務器配置angular-phonecat項目。運行以下指令以開啟web服務器。
npm start
這將創建一個本地web服務器,鑒聽你的本地機器上的端口8000。現在你可以在這個地址上瀏覽該應用程序了:
http://localhost:8000/app/index.html
我們使用單元測試以確保我們的應用程序中的JavaScript代碼正確運行。單元測試關注于應用程序的小型的隔離部分。單元測試保存在test/unit
目錄中。
angular-phonecat項目被配置為使用Karma以針對本應用程序運行該單元測試。運行以下指令以開始Karma。
npm test
這將開始Karma單元測試運行器。Karma將讀取在test/karma.conf.js
中的配置文件。 這個配置文件告訴Karma要:
最后讓它一直在后臺運行,因為北會給你即時的回調,關于當你在操作代碼時,你的改變是否通過了單元測試的回調。
我們使用端到端測試以確保應用程序作為一個整體運行。端到端測試被設計為測試整個應用客戶端應用程序,特別是測試視圖是否正確顯示并有正確的行為。它在瀏覽器中運行,通過模擬真實用戶與真實應用程序的交互。
端到端測試保存在test/e2e
目錄中。
該angular-phonecat項目被配置為使用Protractor以針對應用程序運行端到端測試。Protractor依賴于一組允許它與瀏覽器交互的驅動程序。你可以通過運行以下代碼以安裝這些驅動程序:
npm run update-webdriver
你只需要運行它一次。
因為Protactor通過與正在運行的應用程序交互來起作用,我們需要開啟我們的web服務器:
npm start
然后在一個單獨的終端/命令行窗口中,通過運行以下指令,我們可以針對該應用程序運行Protractor測試腳本:
npm run protractor
Protractor將讀取在test/protractor-conf.js
中的配置文件。該配置文件要求Protractor做:
最好在每當你對HTML視圖作了改變的時候運行端到端測試,或者當你想檢查該應用程序作為一個整體是否正確執行時,運行端到端測試。通常在把一個新的改變提交到遠程知識庫之前運行端到端測試。
現在你已經測試好了你的本地機器,讓我們開始這個教程吧:第一步 引導程序。