前文有提到过 做一个简单的订餐系统，最近花了点时间，了解了一下AngularJS框架的使用。因此本文的目的根据了解的知识重新搭建基于 AngularJS框架. 该框架是基于对于AngularJS的学习而制定的，这其中肯定有很多不足，在以后的学习中在加以改进。
一。系统准备
安装Node.js version>=0.10.0版本
Git Shell 并添加该 Shell脚本到Path环境变量中 Path=:,"$git_home/bin"
二。手动搭建框架
2.1 创建开发目录
cd $PROJECT_HOME$
mkdir client
cd client
mkdir app
mkdir test
mkdir dist
2.2 配置文件package.json
创建一个空的package.json文件，并且修改该package.json文件 内容如下：
package.json文件是NPM package管理的具体配置文件，当npm执行时则会解析该文件中的内容。具体请看https://docs.npmjs.com/files/package.json
{ "name": "client", "version": "1.0.0", "private": true, "description": "A skeleton based on angularJS", "dependencies": {}, "repository": { "type" : "git", "url" : "https://github.com/hlxinyan/AngularJSSkeleton.git"}, "devDependencies": { "grunt": "^0.4.5", "grunt-autoprefixer": "^2.0.0", "grunt-concurrent": "^1.0.0", "grunt-contrib-clean": "^0.6.0", "grunt-contrib-compass": "^1.0.0", "grunt-contrib-concat": "^0.5.0", "grunt-contrib-connect": "^0.9.0", "grunt-contrib-copy": "^0.7.0", "grunt-contrib-cssmin": "^0.12.0", "grunt-contrib-htmlmin": "^0.4.0", "grunt-contrib-imagemin": "^0.9.2", "grunt-contrib-jshint": "^0.11.0", "grunt-contrib-uglify": "^0.7.0", "grunt-contrib-watch": "^0.6.1", "grunt-filerev": "^2.1.2", "grunt-google-cdn": "^0.4.3", "grunt-karma": "^0.10.1", "grunt-newer": "^1.1.0", "grunt-ng-annotate": "^0.9.2", "grunt-svgmin": "^2.0.0", "grunt-usemin": "^3.0.0", "grunt-wiredep": "^2.0.0", "jshint-stylish": "^1.0.0", "karma": "~0.12", "karma-jasmine": "^0.3.5", "karma-phantomjs-launcher": "^0.1.4", "load-grunt-tasks": "^3.1.0", "time-grunt": "^1.0.0", "protractor": "^1.1.1", "http-server": "^0.6.1", "bower": "^1.3.1", "shelljs": "^0.2.6", "karma-junit-reporter": "^0.2.2" }, "dependencies": { "angular-resource": "^1.3.15" }, "engines": { "node": ">=0.10.0" }, "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",
"preupdate-webdriver": "npm install", "update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver", "protractor": "protractor e2e-tests/protractor.conf.js",
"update-index-async": "node -e \"require(‘shelljs/global‘); sed(‘-i‘, /\\/\\/@@[email protected]@[\\s\\S]*\\/\\/@@[email protected]@/, ‘//@@[email protected]@\\n‘ + sed(/sourceMappingURL=angular-loader.min.js.map/,‘sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map‘,‘app/bower_components/angular-loader/angular-loader.min.js‘) + ‘\\n//@@[email protected]@‘, ‘app/index-async.html‘);\"" }}
2.3 配置bower
2.3.1 创建一个.bowerc文件，并修改该文件内容如下：
http://bower.io/docs/config/#placement--order
{
"directory": "app/bower_components",
"analytics": false
"interactive": false }
2.3.2 创建一个空的bower.json文件，并且修改该bower.json文件 .
http://bower.io/docs/creating-packages/#maintaining-dependencies
{
"name": "client",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.0",
"bootstrap-sass-official": "^3.2.0",
"angular-animate": "^1.3.0",
"angular-cookies": "^1.3.0",
"angular-resource": "^1.3.0",
"angular-route": "^1.3.0",
"angular-sanitize": "^1.3.0",
"angular-touch": "^1.3.0"
},
"devDependencies": {
"angular-mocks": "^1.3.0"
},
"appPath": "app",
"moduleName": "clientApp"
}
2.4 安装包
npm install
在执行install后，在client目录下将会看到 新增的node_modules 以及在 client/app目录下看到 bower_components。 具体如图所表示：
2.5 配置单元测试
cd $PROJECT_HOME/client/test
mkdir unit
创建karma.conf.js文件，并编辑其内容如下：
module.exports = function (config) {
config.set({
basePath: ‘../‘,
files: [
‘app/bower_components/angular/angular.js‘,
‘app/bower_components/angular-route/angular-route.js‘,
‘app/bower_components/angular-resource/angular-resource.js‘,
‘app/bower_components/angular-mocks/angular-mocks.js‘,
‘app/js/**/*.js‘,
‘test/unit/**/*.js‘
],
autoWatch: true,
frameworks: [‘jasmine‘],
browsers: [‘Chrome‘],
plugins: [
‘karma-chrome-launcher‘,
‘karma-firefox-launcher‘,
‘karma-jasmine‘
],
junitReporter: {
outputFile: ‘test_out/unit.xml‘,
suite: ‘unit‘
}
});
};
执行npm test
2.6 配置E2E测试
cd $PROJECT_HOME/client/test
mkdir e2e
创建protractor.conf.js文件，并编辑其内容如下：
exports.config = {
allScriptsTimeout: 11000,
specs: [
‘e2e/*.js‘
],
capabilities: {
‘browserName‘: ‘chrome‘
},
baseUrl: ‘http://localhost:8000/app/‘,
framework: ‘jasmine‘,
jasmineNodeOpts: {
defaultTimeoutInterval: 30000
}
};
执行
现在一个console启动npm start
在另一个console启动npm run protractor
3.制作一个空的页面
cd client/app
cd client/app/js 创建一个app.js
cd client/app/css 创建一个 app.css
创建一个index.html
<!doctype html> <html lang="en" ng-app="clientApp"> <head> <meta charset="utf-8"> <title>Online Food Ordering</title> <!-- build:css css/main.css --> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="css/app.css"> <!-- endbuild --> <!-- build:js js/main.js --> <!-- jQuery is used for JavaScript animations (include this before angular.js) --> <script src="bower_components/jquery/dist/jquery.js"></script> <!-- required module to enable animation support in AngularJS --> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> <script src="js/app.js"></script> <!-- endbuild --> </head> <body> <div class="view-container"> <div ng-view class="view-frame"></div> </div> </body> </html>
其中把 css部分用：
<!-- build:css css/main.css –> <!-- endbuild --> 给包括起来
把JS部分用
<!-- build:js js/main.js –> <!—endbuild --> 给包括起来
4.项目打包
cd $PROJECT_HOME/client 创建一个Gruntfile.js,编辑内容如下：
/*jslint node: true */
"use strict";
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
copy: {
main: {
src: ‘app/index.html‘,
dest: ‘dist/index.html‘
}
},
useminPrepare: {
html: ‘app/index.html‘,
options: {
dest: ‘dist‘
}
},
usemin: {
html: [‘dist/index.html‘]
},
jshint: {
all: [ ‘Gruntfile.js‘, ‘app/*.js‘, ‘app/js/*.js‘ ]
},
uglify: {
options: {
report: ‘min‘,
mangle: false
}
},
clean: {
temp: {
src: [ ‘tmp‘ ]
}
}
});
grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
grunt.loadNpmTasks(‘grunt-contrib-clean‘);
grunt.loadNpmTasks(‘grunt-contrib-connect‘);
grunt.loadNpmTasks(‘grunt-contrib-compress‘);
grunt.loadNpmTasks(‘grunt-contrib-concat‘);
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
grunt.loadNpmTasks(‘grunt-html2js‘);
grunt.loadNpmTasks(‘grunt-contrib-watch‘);
grunt.loadNpmTasks(‘grunt-bower-task‘);
grunt.loadNpmTasks(‘grunt-karma‘);
grunt.loadNpmTasks(‘grunt-usemin‘);
grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
grunt.loadNpmTasks(‘grunt-contrib-copy‘);
grunt.registerTask(‘default‘, [ ‘jshint‘, ‘clean‘,‘copy‘, ‘useminPrepare‘, ‘concat‘, ‘uglify‘, ‘cssmin‘, ‘usemin‘ ]);
};
在控制台执行 grunt，运行结果如下：
单击dist/index.html 可以看到js以及css 都被合成一个文件，具体如下：
<!doctype html> <html lang="en" ng-app="clientApp"> <head> <meta charset="utf-8"> <title>Online Food Ordering</title> <link rel="stylesheet" href="css/main.css"> <script src="js/main.js"></script> </head> <body> <div class="view-container"> <div ng-view class="view-frame"></div> </div> </body> </html>
到此该项目框架搭建结束了，对于gruntfile目前只是用来文件的合并和压缩，而包管理 则直接使用 bower,单元测试 则直接使用 karma,e2e测试则使用protractor.
5. 提交Git
git add –A
git commit –m ‘myfirst skeleton’
git remote add myskeleton https://github.com/hlxinyan/AngularJSSkeleton.git
git push -u myskeleton master