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視圖的時候,然后就作為一個整體的能正確執行的程序去做檢查。這種檢查是很正常和需要的,尤其是在提交新的代碼或者功能到遠程服務器的時候。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM