在配置phonecat項目時需要運行npm start在本地配置一個服務器環境，npm start首先會安裝一系列的必要程序，這些程序依賴package.json中的內容，package.json中的內容詳解如下：
依賴包介紹
在克隆項目之后，目錄如下：
➜angular-phonecat git:(master) ✗ tree -L 2.├── LICENSE├── README.md├── app│ ├── bower_components│ ├── css│ ├── img│ ├── index.html│ ├── js│ ├── partials│ └── phones├── bower.json├── package.json├── scripts│ ├── private│ └── update-repo.sh└── test ├── e2e ├── karma.conf.js ├── protractor-conf.js └── unit20 directories, 8 files
這個目錄下存在一個文件 package.json，該文件是做什么用的呢？
在 NodeJS 項目中，用 package.json 文件來聲明項目中使用的模塊，這樣在新的環境部署時，只要在 package.json 文件所在的目錄執行npm install命令即可安裝所需要的模塊。
關於 package.json 中可配置的選項請參考package.json字段全解。
從該文件可以看出 PhoneCat 的依賴：
"devDependencies": { "karma": "^0.12.16", "karma-chrome-launcher": "^0.1.4", "karma-jasmine": "^0.1.5", "protractor": "~1.0.0", "http-server": "^0.6.1", "tmp": "0.0.23", "bower": "^1.3.1", "shelljs": "^0.2.6"}
以及一些腳本：
"scripts": { "postinstall": "bower install", "prestart": "npm install", "start": "http-server -a 0.0.0.0 -p 8000", "pretest": "npm install", "test": "node node_modules/karma/bin/karma start test/karma.conf.js", "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js--single-run", "preupdate-webdriver": "npm install", "update-webdriver": "webdriver-manager update", "preprotractor": "npm run update-webdriver", "protractor": "protractor test/protractor-conf.js", "update-index-async": "node -e /"require('shelljs/global'); sed('-i', ///////@@NG_LOADER_START@@[//s//S]*//////@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@//n' + cat('bower_components/angular-loader/angular-loader.min.js') + '//n//@@NG_LOADER_END@@', 'app/index-async.html');/""}
從上可以看出運行npm start之前會運行npm install，然后運行http-server -a 0.0.0.0 -p 8000啟動一個 web 服務器，最后是運行bower install安裝 bower 管理的包。
bower 管理的包由 bower.json 文件定義：
{"name": "angular-phonecat","description": "A starter project for AngularJS","version": "0.0.0","homepage": "https://github.com/angular/angular-phonecat","license": "MIT","private": true,"dependencies": {"angular": "1.3.x","angular-mocks": "1.3.x","jquery": "~2.1.1","bootstrap": "~3.1.1","angular-route": "1.3.x","angular-resource": "1.3.x","angular-animate": "1.3.x"}}
當然，package.json 文件中還定義了一些測試相關的命令。
bower
關於bower的介紹，參考博客內文章：bower介紹。
在本項目中，bower 下載的包保存在 angular-phonecat/app/bower_components 目錄下，依賴如下：
├── bower_components│ ├── angular│ ├── angular-animate│ ├── angular-mocks│ ├── angular-resource│ ├── angular-route│ ├── bootstrap│ └── jquery
karma
Karma是一個 Javascript 測試運行工具，可以幫助你關閉反饋循環。Karma 可以在特定的文件被修改時運行測試，它也可以在不同的瀏覽器上並行測試。不同的設備可以指向 Karma 服務器來覆蓋實際場景。
關於 Karma 的使用，本文不做介紹。
http-server
http-server是一個簡單的零配置命令行 HTTP 服務器，基於Node.js。
在命令行中使用方式是：
$ node http-server
在package.json 中定義方式是：
"scripts": { "start": "http-server -a 0.0.0.0 -p 8000", }
支持的參數：
-p 端口號 (默認 8080)-a IP 地址 (默認 0.0.0.0)-d 顯示目錄列表 (默認 'True')-i 顯示 autoIndex (默認 'True')-e or --ext 如果沒有提供默認的文件擴展名(默認 'html')-s or --silent 禁止日志信息輸出--cors 啟用 CORS -o 在開始服務后打開瀏覽器-h or --help 打印列表並退出-c 為 cache-control max-age header 設置Cache time(秒) ，禁用 caching, 則值設為 -1 .
Protractor
Protractor是一個端對端的測試運行工具，模擬用戶交互，幫助你驗證你的 Angular 應用的運行狀況。
Protractor 使用Jasmine測試框架來定義測試。Protractor 為不同的頁面交互提供一套健壯的 API。
當然，也有其他的端對端工具，不過 Protractor 有着自己的優勢，它知道怎么和 AngularJS 的代碼一起運行，特別是面臨 $digest 循環的時候。
關於 Protractor 的使用，本文不做介紹。
ShellJS
ShellJS是Node.js擴展，用於實現 Unix shell 命令執行，支持 Windows。
一個示例代碼：
require('shelljs/global');if (!which('git')) {echo('Sorry, this script requires git');exit(1);}// Copy files to release dirmkdir('-p', 'out/Release');cp('-R', 'stuff/*', 'out/Release');// Replace macros in each .js filecd('lib');ls('*.js').forEach(function(file) {sed('-i', 'BUILD_VERSION', 'v0.1.2', file);sed('-i', /.*REMOVE_THIS_LINE.*/n/, '', file);sed('-i', /.*REPLACE_LINE_WITH_MACRO.*/n/, cat('macro.js'), file);});cd('..');// Run external tool synchronouslyif (exec('git commit -am "Auto-commit"').code !== 0) {echo('Error: Git commit failed');exit(1);}
在 PhoneCat 中，主要是用在下面：
"update-index-async": "node -e /"require('shelljs/global'); sed('-i', ///////@@NG_LOADER_START@@[//s//S]*//////@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@//n' + cat('bower_components/angular-loader/angular-loader.min.js') + '//n//@@NG_LOADER_END@@', 'app/index-async.html');/""
測試
運行單元測試
PhoneCat 項目中的單元測試是使用 Karma 來完成的，所有的單元測試用例都存放在 test/unit 目錄下。可以通過執行以下命令來運行單元測試：
$ npm test
值得一提的是，在運行單元測試前，計算機上必須安裝 Google Chrome 瀏覽器，因為這里用到了 karma-chrome-launcher。
運行端到端測試
PhoneCat 項目使用端到端測試來保證 Web 應用的可操作性，而這個端到端測試是通過使用 Protractor 來實現的，所有的端到端測試用例都存放在test/e2e 目錄下。可以通過執行以下步驟來運行端到端測試：
//更新webdriver，此命令只需運行一次$ npm run update-webdriver//運行PhoneCat$ npm start
打開另一個命令行窗口，在其中運行：
$ npm run protractor
代碼分析
在介紹了 PhoneCat 的運行和測試環境后，來看看 PhoneCat 的頁面和 js 是怎么組織起來的。
- 首先，從 index.html 內容可以看到 PhoneCat 頁面使用 bootstrap 框架，並且引入了 jquery 以及 angular 的相關依賴，包括一些附加模塊：
路由、動畫、資源。 - angular 應用范圍由
ng-app定義在 html 節點上，即作用於整個頁面，其名稱為phonecatApp。 - 通過
ng-view指定加載子視圖的位置，這里主要包括partials/phone-list.html和partials/phone-detail.html兩個視圖。 - app.js 是應用的入口，並且依賴 animations.js、controllers.js、filters.js、services.js 等文件。從這里可以看出，一個 angular 應用的 js 大概包括哪幾個部分的內容。
app.js 內容如下：
//JavaScript語法支持嚴格模式:如果在語法檢測時發現語法問題，則整個代碼塊失效，並導致一個語法異常；如果在運行期出現了違反嚴格模式的代碼，則拋出執行異常。'use strict';/* App Module *///定義一個模塊，模塊名稱和頁面 ng-app 中內容一致var phonecatApp = angular.module('phonecatApp', ['ngRoute','phonecatAnimations','phonecatControllers','phonecatFilters','phonecatServices']);//定義路由phonecatApp.config(['$routeProvider',function($routeProvider) {$routeProvider.when('/phones', {templateUrl: 'partials/phone-list.html',controller: 'PhoneListCtrl'}).when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html',controller: 'PhoneDetailCtrl'}).otherwise({redirectTo: '/phones'});}]);
phonecatApp 模塊依賴其他幾個模塊：ngRoute、phonecatAnimations、phonecatControllers、phonecatFilters、phonecatServices。
ngRoute 是內置的路由模塊，定義路由規則：
- 當訪問
/phones，由PhoneListCtrl控制器處理，並且由partials/phone-list.html模板渲染顯示內容。 - 當訪問
/phones/:phoneId，由PhoneDetailCtrl控制器處理，並且由partials/phone-detail.html模板渲染顯示內容。 - 如果不滿足上面條件，則重定向到
/phones
phonecatAnimations 模塊是定義動畫效果，沒有真個模塊不影響程序的主要功能的運行，故不分析這部分代碼。
phonecatControllers 模塊定義在 controllers.js 文件中：
'use strict';/* Controllers */var phonecatControllers = angular.module('phonecatControllers', []);// 定義 PhoneListCtrl，並注入 Phone 對象phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',function($scope, Phone) {$scope.phones = Phone.query();$scope.orderProp = 'age';}]);// 定義 PhoneDetailCtrl，並注入 Phone 對象和 $routeParams，$routeParams 封裝了路由參數。phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',function($scope, $routeParams, Phone) {$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {//回調方法$scope.mainImageUrl = phone.images[0];});$scope.setImage = function(imageUrl) {$scope.mainImageUrl = imageUrl;}}]);
phonecatFilters 模塊定義在 filter.js 文件中，主要是自定義了一個過濾器checkmark：根據輸入是否有內容判斷返回✓還是✘。
phonecatServices 模塊定義在 services.js 文件中：
'use strict';/* Services */var phonecatServices = angular.module('phonecatServices', ['ngResource']);// 定義 Phone 服務，並提供了一個 query 方法，還包括一個內置的 get 方法。調用 get 方法實際上就是調用 query 方法，並且可以傳遞一個參數 phoneIdphonecatServices.factory('Phone', ['$resource',function($resource){return $resource('phones/:phoneId.json', {}, {query: {method:'GET', params:{phoneId:'phones'}, isArray:true}});}]);