先决条件
· nodejs
· webstorm
创建项目
webstorm中创建空白web项目
创建html、js文件夹
在项目中创建2个文件夹分别用于存放项目中用到的html、js文件。
安装框架
安装前端框架
项目中的前端框架主要为angularjs相关的框架,为了安装框架方便可安装bower包管理器。
1) 安装bower包管理器
在webstorm的terminal中执行脚本
npm install bower -save
2) 初始化bower.json文件
执行脚本生成bower.json文件，用于管理bower的依赖和配置。
bower init
3) 安装angular等框架
除了项目要用到的angular框架外还需要安装angular-mocks框架
bower install bootstrap -save
bower install angular -save
bower install angular-mocks -save
安装服务器端框架
服务器依赖于nodejs，需要安装nodejs的包，首先在根目录下创建package.json文件。
1)安装http-server模块
npm install http-server -save
2)安装其他模块
jasmine-core:javascript单元测试框架；
karma:模拟javascript脚本在各种浏览器执行的工具；
karma-chrome-launcher: 在chrome浏览器执行的工具；
karma-jasmine: jasmine-core在karma中的适配器；
karma-junit-reporter: 生成junit报告；
protractor:E2E测试框架
启动服务器
要启动node服务器需要在package.json中配置script节点,dependencies中定义依赖包，在script配置start节点用于启动服务器，test节点的内容会在后面讲解。
"name": "angularjs-test", "version": "0.0.1", "dependencies": { "bower": "^1.7.7", "http-server": "^0.9.0", "jasmine-core": "^2.4.1", "karma": "^0.13.22", "karma-chrome-launcher": "^0.2.3", "karma-jasmine": "^0.3.8", "karma-junit-reporter": "^0.4.1", "protractor": "^3.2.1" }, "scripts": { "postinstall": "bower install", "prestart": "npm install", "start": "http-server -a localhost -p 8000 -c-1", "pretest": "npm install", "test": "karma start karma.conf.js", "test-single-run": "karma start karma.conf.js --single-run" } |
配置后运行命令,启动服务器，浏览器上输入http://localhost:8000
npm start
开始单元测试
编写功能代码
在文件js中新建js文件index.js。在index.js中定义congroller,实现简单累加方法add,代码如下:
/** * Created by stephen on 2016/3/24. */ (function (angular) { angular.module('app', []). controller('indexCtrl', function ($scope) { $scope.add = function (a, b) { if(a&&b) return Number(a) + Number(b) return 0; } }); })(window.angular); |
