PhoneCat App 教程

https://docs.angularjs.org/tutorial

AngularJS教程第一篇文章的翻譯，由於我在看中文版的AngularJS的翻譯的時候，發現第一篇文章翻譯的不許確，頗有多是陳舊了，英文官方版本更新了，形成我開始就進入不了教程中得實例，沒法進行下去，因此直接去官方看原文章，順便翻譯出來，給懶得看英文的、打不開英文站點的同窗一些參考，固然我翻譯的不必定準確哈，請多多留言指正，如下爲翻譯內容：

給你介紹AngularJS比較好的方式就是帶你看下這篇教程，這個教程說的是開發了一個款簡單的手機分類瀏覽Web程序，可讓你過濾你感興趣的機型，而後能夠進入詳情頁面等。

 

經過看這個教程能夠了解AngularJS是如何不增長頁面擴展和插件的狀況下讓瀏覽器更優雅的執行Web程序。

• 經過例子能夠理解，如何經過客戶端的數據綁定，來處理用戶的一些操做動做引發的頁面數據動態變化，而後頁面要當即作出響應這樣的狀況。
• 理解AngularJS是如何作到在不須要增長額外的DOM操做代碼的狀況下，保持視覺界面和數據的同步變化的
• 瞭解一種更好的、更簡單的方式去測試你的Web應用程序----Karma和Protractor。
• 瞭解如何使用依賴注入和服務去構建Web任務，好比更容易的獲取數據到你的應用中

當你看完這個教程以後，你應該可以：

• 在主流瀏覽器上建立動態應用程序
• 使用數據綁定去綁定你的數據模型到你的視圖程序中
• 使用Karma建立和運行單元測試
• 使用Protractor建立和運行端到端的測試
• 從模板中轉移應用程序的邏輯到控制器中
• 經過Angular服務從服務端獲取數據
• 在你的應用程序中使用ngAnimate完成動畫效果
• 獲知更多學習AngularJS的資源

這個教程指導你書寫一個簡單的應用程序，包括書寫和運行單元測試和端到端的測試。在每一步的開發中都會給你提出關於AngularJS的使用建議。

你既能夠花費幾個小時來看這個教程，也能夠花費一天的時間來深刻的研究它。若是你想照一個短一點的AngularJS介紹，請點擊上手文檔。

上手

接下來的內容告訴你如何在你的機器上運行這些代碼。若是你只是讀讀這些代碼，不想在你本地機器上運行它，你直接去看第一篇文章：第0步-起步

使用這些代碼運行

你能夠繼續跟隨這篇教程，在你熟悉的電腦上調試這個列子的代碼。若是是這樣的話，你會獲得手把手的操做實踐，去書寫AngularJS和測試工具。

這個教程依賴Git版本控制源碼管理工具。你能夠不須要知道太多Git，只是跟隨教程執行寥寥無幾的Git命令便可。

安裝Git

你能夠從http://git-scm.com/download下載和安裝Git。一旦你安裝完Git，你應該就有git命令行工具了。你可能用到的主要的命令是：

• git clone ... ：克隆一個遠程倉庫到你的本地電腦
• git checkout ... ：檢出一個特定的分支或者標記版本

下載  angular-phonecat 

經過下面的命令克隆存在GitHub上的 angular-phonecat倉庫 

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

這個命令會在你的本地電腦上建立 angular-phonecat 目錄。

--depth=14 選項只是告訴Git下去最新的14次提交。這樣會讓下載更小更快。

進入到 angular-phonecat 目錄。

cd angular-phonecat

這裏提示下，從如今開始，假設你全部的命令行操做都是基於 angualar-phonecat 目錄進行的，若是不是的話，請先切換到這個目錄。

安裝Node.js

若是你想運行提早配置好的本地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
nodejs --version

若是你但願在你的本地機器上同時運行另外一個不一樣版本的node.js，建議你安裝 Node 版本管理工具(nvm)

一旦你在本地機器上安裝了node.js，你就能夠經過下面的命令下載項目因此來的各類工具：

npm install

這個命令會下載以下工具到 node_modules 目錄：

• Bower - 客戶端代碼包管理工具
• Http-Server - 簡單的本地靜態Web服務器
• Karma - 單元測試工具
• Protractor - 端到端(E2E)測試工具

運行 npm install 也會自動的使用 bower 下載Angular框架到 app/bower_components 目錄。

注意：angular-phonecat 項目被安裝和運行是經過這些npm腳本工具。這意味着你不須要把這些工具安裝到你操做系統的全局環境中。看下面的 安裝助手工具 瞭解更多內容。

這個項目被預先配置了一些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 ...

sudo npm install -g bower

(若是你在windows操做系統中就刪除上面的sudo)

以後，你就能夠單獨運行bower，像這樣：

bower install

運行開發Web服務器

由於Angular應用程序是一個純客戶端的代碼程序，因此它能夠直接瀏覽器中打開運行，可是呢，他們最好仍是經過一個HTTP服務器的方式運行比較好。在一些狀況下，處於安全性的考慮，大多數的主流瀏覽器不運行JavaScript發送服務端請求，若是這個頁面是直接在文件夾裏運行的話。

angular-phonecat項目已經配置了簡單的靜態Web服務器，因此這樣就能夠啓動它：

npm start

這樣的話，就會建立一個Web服務器，監聽端口是8000，你如今能夠這樣在瀏覽器上訪問它了：

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

能夠在package.json中編輯‘start’選項中得 -a 參數改變ip地址，-p 參數改變監聽端口號

運行單元測試

咱們使用單元測試來確保JavaScript代碼在咱們的程序中得操做是正確的。單元測試專一在測試孤立的程序功能。單元測試被放在 test/unit 目錄。

angular-phonecat項目被配置使用Karma來運行單元測試。這樣啓動Karma：

npm test

這樣就啓動了Karma單元測試。Karma會讀取 test/karma.conf.js 配置文件。這個配置文件告訴Karma：

• 打開一個Chrome瀏覽器並鏈接到Karma上
• 在這個瀏覽器上執行全部的單元測試
• 在終端/命令行中打印這些單元測試的結果
• 檢測項目中得全部js文件，一點有修改就馬上從新運行單元測試

這樣讓單元測試始終在後臺檢測和運行是很是好的，它會馬上給你反饋，直到你經過全部測試。

運行端到端的測試

咱們使用端到端的測試確保應用程序就像預期的那樣是一個完整操做。端到端的測試被設計爲去測試整個客戶端應用，確保視圖能夠被正確的展現和表現。它就像一個真實的用戶交互同樣在瀏覽器中操做應用程序。

端到端的測試放在這個目錄：test/e2e 。

angular-phonecat項目使用Protractor運行端到端的測試。Protractor依賴一系列的驅動程序。你能夠這樣安裝這些驅動程序：

npm run update-webdriver

（你只須要運行一次就能夠了）

應爲Protractor運行須要依賴一個正在運行的應用程序，因此咱們首先須要保證咱們的Web服務是開啓的：

npm start

而後在另外一個終端/命令行中再啓動Protractor：

npm run protractor

Protractor會讀取 test/protractor-conf.js 配置文件。這個配置文件告訴Protractor：

• 打開一個Chrome瀏覽並鏈接到應用程序
• 執行全部的端到端測試在這個瀏覽器中
• 在終端/命令行中打印全部的測試結果
• 關閉瀏覽器並退出

這是件好事，每當你改變html視圖的時候，而後就做爲一個總體的能正確執行的程序去作檢查。這種檢查是很正常和須要的，尤爲是在提交新的代碼或者功能到遠程服務器的時候。