[AngularJS]项目框架搭建-MyFirst Skeleton

前文有提到过 做一个简单的订餐系统,最近花了点时间,了解了一下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‘, /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, ‘//@@NG_LOADER_START@@\\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//@@NG_LOADER_END@@‘, ‘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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。