ng翻譯-Tutorial

出於學習，對ng官網資料https://docs.angularjs.org/tutorial進行翻譯，若有譯誤，歡迎指正。

PhoneCat 應用教程

一個很好的瞭解ng的方式是學習這個教程，它會使你透視到一個ng 網頁應用的結構。這個應用是創建一個安卓設備列表的目錄，能夠對目錄進行過濾只列出來你感興趣的設備，而且能夠瀏覽任何設備的詳情。

按照這個教程將會看到ng如何使瀏覽器更聰明-沒有使用本地擴展或者插件：

• 看到一些示例，展現瞭如何經過客戶端數據綁定創建數據的動態視圖，這些動態視圖會作出實時的變化來響應用戶的操做。
• 看到ng是如何在沒有操做DOM狀況下，實現數據和視圖的同步。
• 學習一種經過使用Karma和Protractor工具更好更容易的測試應用的方法。
• 學習如何使用依賴注入和服務去完成常見的網頁任務，例如使應用更容易的得到數據。

當你完成了這個教程，你將得到的能力：

• 能夠建立一個兼容全部瀏覽器的動態應用。
• 使用數據綁定來連接你的數據模型和視圖。
• 經過Karma建立和運行單元測試。
• 經過Protractor建立和運行端到端測試。
• 將業務邏輯從template中移出，並放入components和controllers中。
• 使用ng services從一個服務中得到數據。
• 經過ngAnimate組件將動畫使用到你的應用中。
• 用一種組件化的方式組織ng應用，具良好的有項目擴展性。
• 鑑定關於ng進一步學習的資源。

 這個教程引導你貫穿創建一個小應用的整個過程，包括編寫且運行單元和端到端測試。在每一步結尾的Experiments中，都爲你提供了進一步學習ng和創建應用的建議。

 你能夠花費幾個小時瀏覽整個教程或者用一天的時間深刻研究它。若是你正在尋找關於ng的簡介，查看Getting Started文檔。

 

環境配置

本頁的其他部分將展現如何本地搭建開發環境。若是你想讀教程，能夠直接跳到第一步：Step 0 - Bootstrapping。

 

代碼使用

你能夠遵循整個教程並下載代碼到本地。如此，你能夠着手練習寫ng代碼和使用推薦的測試工具。

這個教程使用git做爲代碼管理器。聽從這個教程，出了指導如何安裝和運行一些Git命令，你不須要了解關於git 的任何事情。

 

安裝Git

從 http://git-scm.com/download下載和安裝。一旦安裝，你就可使用運行git命令的工具。你將用到的主要命令有：

• git clone ...:從遠程庫複製代碼到本地。
• git checkout...:切換一個特殊分支或者一個標記的代碼版本。

下載angular-phonecat

運行下面的命令從GitHub上下載angular-phonecat：


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

這個命令在你當前的路徑下建立了一個angular-phonecat的子目錄。

選項--depth=16是告訴Git去下載最近16次提交的代碼，這樣能夠是下載更小更快。

進入angular-phonecat目錄下：

cd angular-phonecat

從如今開始，這個教程的說明，都假定你在angular-phonecat目錄下運行全部的命令。

 

安裝Node.js

若是你想運行配置好的本地服務和測試工具，你須要Node.js v4+。

你能夠從 https://nodejs.org/en/download/下載且安裝Node.js。

運行下面命令檢查你已經安裝的Node.js版本。

node --version

在基於Debian的發行版本，node可能會引發和另外一個實用程序的命名衝突。建議的解決方法是安裝一個能夠將node重命名爲nodejs的nodejs-legacy包。

apt-get install nodejs-legacy npm

nodejs --version

npm --version

若是你想在本地安裝不一樣版本的Node.js，考慮安裝Node Version Manager（nvm） 或者Node Version Manager（nvm）for Windows。

一旦你已經在你的機器上安裝了Node.js,你可經過運行下面命令下載依賴工具：

npm install

這個命令會讀angular-phonecat's 下的package.json文件，而後下載下面這些工具到node_modules目錄下：

• Bower -客戶端代碼包管理
• Http-Server-簡單的本地靜態網頁服務
• Karma-單元測試運行者
• Protractor-端到端（(E2E）測試運行者

運行npm install 將自動的使用bower去下載AngularJs框架到app/bower_components目錄。

注意這個angular-phonecat項目是經過運行npm腳本安裝和運行這些實用程序的。這意味着遵循這個教程，在你的系統中沒必要要全局安裝這些實體應用。看下面的Installing Helper Tools得到更多信息。

這個工程預先配置了不少在開發時須要的npm腳本，使得運行一般任務更加容易。

• npm start： 開啓一個本地開發網頁服務。
• npm test：開啓Karma單元測試運行者。
• npm run protractor：運行Protractor端到端測試。
• npm run update-webdriver：爲Protractor安裝驅動。

安裝幫助工具（可選）

Bower，Http-Server，Karma 和Protractor組件都是可執行的，他們能夠全局安裝且直接用命令符運行。你沒必要要遵循下面的教程作，但若是你想直接運行它們，你能夠經過以下命令全局安裝它們。

sudo npm install -g ...

例如安裝Bower,執行以下命令：

sudo npm install -g bower

（若是在windows下執行忽略sudo）

你能夠直接運行bower工具，以下：

bower install

 

運行開發網頁服務

ng應用都是存粹客戶端代碼，所以直接從文件系統中打開它們是可能的。但更好的方式是從Http網頁服務器中使用它們。尤爲，從安全考慮，若是頁面從本地文件系統加載，多數流行瀏覽器是不容許JavaScript作服務器請求的。

這個angular-phonecat項目爲了能夠託管應用已經配置了一個簡單的靜態網頁服務器。經過運行以下命令開啓網頁服務。

npm start

這將在你的本地機器上建立一個網頁服務，監聽端口爲8000.你可經過http://localhost:8000/index.html 瀏覽應用

編輯package.json中的「start」腳本能夠改變服務網頁應用的IP地址和端口號。能夠用-a設置地址和-p設置端口。你須要更新在e2e-test/protractor.conf.js中的baseurl配置屬性。

 

運行單元測試

咱們經過單元測試保證應用中的Javascript代碼執行正確。單元測試專一測試應用中的小的獨立的部分。單元測試代碼在specs測試文件中，與應用代碼同一路徑下。這樣能夠方便代碼更新和查詢。同時也易於咱們應用結構的重構。

angular-phonecat工程爲應用配有Karma進行單元測試。運行以下啓動Karma：

npm test

這將啓動Karma單元測試運行者，Karma將讀karma.conf.js配置文件，該文件位於工程的根目錄。這個配置文件告訴Karma進行以下操做：

• 打開谷歌和火狐瀏覽器連接karma
• 在瀏覽器中執行全部的單元測試
• 在終端命令行中報告測試結果
• 監視項目中Javascript文件且一旦有改變當即從新執行單元測試

在後端一直運行這個測試是有好處的，由於當你在修改代碼的時候，這個單元測試會提供你當即的反饋。

 

運行端到端測試

經過端到端測試保證整個應用按照預期運行。端到端測試是爲了測試整個客戶端應用，尤爲是應用的試圖呈現和行爲正確。這是經過在瀏覽器中模擬真實用戶和真實應用的交互實現的。

端到端測試代碼在e2e-tests目錄下。

angular-phonecat工程配置Protractor爲應用運行端到端測試。Protractor依靠一些驅動來與瀏覽器交互。經過執行以下安裝這些驅動：

npm run update-webdriver

你不須要手動執行這些命令，npm配有這些命令，所以在執行端到端測試時，它將自動的執行。

因爲Protractor是經過與一個正在執行的應用交互工做的，所以咱們須要啓動網頁應用。

npm start

而後，在一個獨立的終端命令窗口中，能夠運行以下Protractor腳本對應用進行測試。

npm run protractor

Protractor將讀配置文件e2e-tests/protractor.conf.js，這個文件告訴Protractor去作：

• 打開谷歌瀏覽器且連接到應用
• 在瀏覽器中執行全部的端到端測試
• 在終端命令行中報告測試結果
• 關閉瀏覽器並退出

不管什麼時候你在html視圖中作了改變或者想檢查應用總體運行是否正確，它是有好處的去運行端到端測試。常見的作法是向遠程庫提交代碼前執行端到端測試。

 

常見的問題

防火牆/代理問題

Git和其它工具，經常使用git:協議從遠程庫得到文件。一些防火牆配置攔截git：//urls，這將致使在複製代碼庫或者下載依賴時出現錯誤（例如企業防火牆）

若是你遇到這個問題，你可使用https：代替，運行以下命令：

git config --global url."https://".insteadof git://

 

更新WebDriver花費時間長

第一次執行update-webdriver可能花費幾秒到幾分鐘（取決與你的硬件和網絡）。若是你取消執行（例如使用ctrl + c），當再次執行Protractor你可能會遇到錯誤。

這種狀況，你能夠刪除node—modules/目錄，而後再次執行npm install

 

Protractor 依賴

在這個引擎下，Protractor使用Selenium Standalone Server，它反過來須要在系統中安裝JDK。經過執行java -version檢查。若是JDK沒有安裝，你能夠在這下載安裝。

 

在網頁服務器中錯誤執行

這個服務器配置端口號爲8000，若是這個端口已經被佔用（例如被另外一個正在執行的網頁服務佔用），你將得到一個錯誤EADDRINUSE。在運行npm start以前肯定端口可用。

 

如今你已經創建了本地環境，咱們開始學習教程：Step 0 - Bootstrapping。