angular-seed — AngularJS種子項目


 

AngularJS Seed 是典型 AngularJS web 應用的應用骨架,可以快速啟動你的 AngularJS webapp 項目和這些項目的開發環境。

AngularJS Seed 包括一個示例 AngularJS 應用,預配置安裝 Angular 框架,為滿足即時 Web 開發提供一些開發和測試工具。

Seed 應用只是展示如何連接兩個控制器和視圖。。


開始

准備條件

你需要先用 git 將angular-seed克隆到自己的本地,然后安裝它的依賴。

如果你沒有安裝過git,你可已再 http://git-scm.com/獲取他。

當然我們還需要用node.js來初始化和測試angular-seed,如果你沒有安裝node.js及相應的NPM,你可以從http://nodejs.org/獲取它。

克隆 angular-seed

使用git克隆 angular-seed,並進入 angular-seed目錄

  1. git clone https://github.com/angular/angular-seed.git
  2. cd angular-seed

如果你想獲取沒有歷史commit的Angular-seed源碼,請使用

  1. git clone --depth=1 https://github.com/angular/angular-seed.git <your-project-name>

安裝依賴

angular-seed已經預先設定npm去自動運行bower,所以我們能這樣簡單運行:

  1. npm install

后面的場景,也將調用bower install。安裝后,你能發現有兩個新文件夾在你的項目中。

  • node_modules - 包含我們需要的npm工具包。
  • app/bower_components - 包含angular的框架文件。

運行項目

angular-seed已經預先項目帶有一個簡單的開發Web服務器,我們可以很簡單的啟動它。

  1. npm start

在瀏覽器中訪問應用程序,http://localhost:8000/index.html

目錄結構

  1. app/-->項目的源文件
  2. app.css -->默認的css文件
  3. components/-->所有應用程序的特定模塊
  4. version/-->相關的組件
  5. version.js -->基本模塊的聲明
  6. version_test.js -->基本模塊的測試
  7. version-directive.js -->用戶定義的指令
  8. version-directive_test.js -->用戶定義的指令測試
  9. interpolate-filter.js -->用戶定義的過濾器
  10. interpolate-filter_test.js -->用戶定義的過濾器測試
  11. view1/--> view1視圖模板和控制器
  12. view1.html -->局部模板
  13. view1.js -->控制器
  14. view1_test.js -->控制器的測試
  15. view2/--> view2視圖模板和控制器
  16. view2.html -->局部模板
  17. view2.js -->控制器
  18. view2_test.js -->控制器的測試
  19. app.js -->主項目模塊
  20. index.html -->項目布局模板
  21. index-async.html -->就像index.html,但異步加載JS文件
  22. karma.conf.js -->用於運行karma單元測試的配置文件
  23. e2e-tests/-->端對端測試
  24. protractor-conf.js -->Protractor配置文件
  25. scenarios.js -->Protractor端對端測試的運行文件

測試

有兩種測試,單元測試和端對端測試。

運行單元測試

angular-seed預先配置了單元測試。它們是Jasmine寫的,我們使用 Karma測試運行器運行它。有一個默認的 Karma文件去運行它。

  • 你能在karma.conf.js查看單元測試配置。
  • 每個運行的代碼下有它對應的單元測試代碼,並命名為..._test.js

最簡單的運行單元測試,使用以下腳本:

  1. npm test

這句命令將啟動 Karma來執行單元測試。而且, Karma會監控代碼和測試文件的變化,並重新運行單元測試。但每次更改都運行單元測試,可能會打破你預期的代碼功能。

你也可以叫Karma運行簡單的單元測試后就退出。這樣可有效的檢驗一個特定版本的代碼是否是按預期運行的。使用下面的腳本:

  1. npm run test-single-run

端對端測試

angular-seed預先配置的端對端測試是用 Jasmine寫的,用 Protractor端對端測試器運行它。它使用本地事件,並對angular應用具有特殊功能。

  • 你能在e2e-tests/protractor-conf.js查看端對端測試配置。
  • 運行e2e-tests/scenarios.js進行端對端測試。

Protractor模擬與我們的Web應用程序的交互並且驗證應用程序是否正確響應。所以,我們的web服務器必須能被應用程序正常的打開,以便Protractor能與它互動。使用下面的腳本:

  1. npm start

運行Protractor需要先安裝 WebDriver,angular-seed使用以下代碼安裝它:

  1. npm run update-webdriver

這句腳本將會下載並安裝最新的獨立的WebDriver工具。

確保你的web服務器環境運行起來了,並且 WebDriver已經更新過了,你可以進行端對端測試了,運行以下代碼:

  1. npm run protractor

提醒: Protractor使用Selenium Standalone Server,這需要你的本地機器安裝了Java Development Kit (JDK)。在命令行輸入 java -version檢查下JDK是否安裝。

若沒安裝,你可以點擊這里下載它。


免責聲明!

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



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