NPM start function

When you configure a Phonecat project, you need to run NPM start to configure a server environment locally, NPM start will first install a series of necessary programs that depend on the content in Package.json, and the contents of Package.json are detailed below:

Dependency Package Introduction

After cloning the project, the directory is as follows:

?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

There is a file Package.json in this directory, what is the file for?

In the NodeJS project, use the Package.json file to declare the modules used in the project so that when the new environment is deployed, the required modules can be installed as long as the commands are executed in the same directory as the Package.json files npm install .

Refer to Package.json field full solution for configurable options in Package.json.

From this file you can see the dependency of 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"}

And some scripts:

"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‘, ///////@@[email protected]@[//s//S]*//////@@[email protected]@/, ‘//@@[email protected]@//n‘ + cat(‘bower_components/angular-loader/angular-loader.min.js‘) + ‘//n//@@[email protected]@‘, ‘app/index-async.html‘);/""}

From the above can be seen run npm start before running npm install , then run http-server -a 0.0.0.0 -p 8000 start a Web server, and finally run bower install the Install Bower managed package.

Bower managed packages are defined by the Bower.json file:

{"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"}}

Of course, some test-related commands are also defined in the Package.json file.

Bower

For Bower Introduction, refer to the blog article: Bower introduction.

In this project, the bower downloaded package is guaranteed to exist in the Angular-phonecat/app/bower_components directory, depending on the following:

├── bower_components│ ├── angular│ ├── angular-animate│ ├── angular-mocks│ ├── angular-resource│ ├── angular-route│ ├── bootstrap│ └── jquery

Karma

Karma is a Javascript test run tool that can help you turn off feedback loops. Karma can run tests when a particular file is modified, and it can be tested in parallel on different browsers. Different devices can point to the Karma server to overwrite the actual scene.

Regarding the use of Karma, this article does not introduce.

Http-server

Http-server is a simple 0 configuration command line HTTP server, based on node. js.

The way to use the command line is:

$ node http-server

The methods defined in Package.json are:

 "scripts": { "start": "http-server -a 0.0.0.0 -p 8000", }

Supported parameters:

 -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 is an end-to-end test run tool that simulates user interaction and helps you verify the health of your Angular app.

Protractor uses the Jasmine test framework to define tests. Protractor provides a robust set of APIs for different page interactions.

Of course, there are other end-to-end tools, but Protractor has its own advantages, and it knows how to run with AngularJS code, especially when faced with $digest loops.

Regarding the use of protractor, this article does not introduce.

Shelljs

Shelljs is a node. js extension that implements Unix shell command execution and supports Windows.

A sample code:

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);}

In Phonecat, it is mainly used in the following:

"update-index-async": "node -e /"require(‘shelljs/global‘); sed(‘-i‘, ///////@@[email protected]@[//s//S]*//////@@[email protected]@/, ‘//@@[email protected]@//n‘ + cat(‘bower_components/angular-loader/angular-loader.min.js‘) + ‘//n//@@[email protected]@‘, ‘app/index-async.html‘);/""

Test

Run unit Tests

Unit tests in the PHONECAT project are done using Karma, and all unit test cases are stored in the Test/unit directory. You can run unit tests by executing the following command:

$ npm test

It's worth mentioning that Google Chrome must be installed on your computer before running unit tests, because Karma-chrome-launcher is used here.

Run end-to-end testing

The PHONECAT project uses end-to-end testing to ensure the operability of WEB applications, and this end-to-end testing is done by using protractor, where all end-to-end test cases are stored in the TEST/E2E directory. You can run an end-to-end test by performing the following steps:

//更新webdriver，此命令只需运行一次$ npm run update-webdriver//运行PhoneCat$ npm start

Open another command-line window in which to run:

$ npm run protractor

Code Analysis

After introducing the running and testing environment of PHONECAT, we can see how the Phonecat page and JS are organized.

• First, you can see from the index.html content that the Phonecat page uses the bootstrap framework, and introduces the related dependencies of jquery and angular, including some additional modules: 路由 , 动画 , 资源 .
• The angular application scope is defined on the ng-app HTML node, which acts on the entire page with the name phonecatApp .
• by ng-view specifying where to load the child views, here are the main partials/phone-list.html and partials/phone-detail.html two views.
• App.js is the portal of the application and relies on files such as Animations.js, Controllers.js, Filters.js, Services.js, and so on. As can be seen from here, a angular application of JS probably includes which parts of the content.

App.js content is as follows:

//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‘});}]);

The Phonecatapp module relies on several other modules: Ngroute, Phonecatanimations, Phonecatcontrollers, Phonecatfilters, phonecatservices.

Ngroute is a built-in routing module that defines routing rules:

• When accessed /phones , is PhoneListCtrl handled by the controller and partials/phone-list.html rendered by the template display content.
• When accessed /phones/:phoneId , is PhoneDetailCtrl handled by the controller and partials/phone-detail.html rendered by the template display content.
• If the above conditions are not met, redirect to/phones

Phonecatanimations module is to define the animation effect, no module does not affect the program's main function of the operation, it does not analyze this part of the code.

The Phonecatcontrollers module is defined in the Controllers.js file:

‘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;}}]);

The Phonecatfilters module is defined in the Filter.js file and is primarily a custom filter checkmark : Returns or is determined based on whether the input has content ? ? .

The Phonecatservices module is defined in the Services.js file:

‘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}});}]);

NPM start function