前言
刚进入我司的时候我也是个啥都不懂得菜鸟,对于angularJs的印象也就是停留于他的指令,并且他的指令可以作为 标签使用,这样可以极大的减少代码量,【实习的时候曾和大牛短暂接触过,看了这段代码】。@H_403_3@我司的angularJs项目是分模块化的,在我刚进入公司的时候,我直接就可以新建模版引擎以及对应的controller、router、service方法,每一个js都可以被依赖注入,后期在深入的时候可以去写component、directive,这样一个好处是方便上手,可以在短时间内操作页面的更删改查,项目结构清晰,减少代码耦合;但同时也有它的弊端,那就是完全不知道一个项目是如何搭建起来的。现在我开始着手搭建一个新的项目,我就来记录一下我是如何将这个项目搭建起来的。
npm
1 dependencies以及devDependencies的区别
1 npm中主要用到的cli
- "scripts": {
- "buildpc": gulp,"test": "echo 22222"
- }
2 我在这个项目中主要用到的devDependencies【按照它们的作用去划分】
- del:
- "del": //删除文件
- css:
- "gulp-sass": //编译为css
- "gulp-clean-css": //压缩为min.css
- "gulp-rename": //重命名
- html:
- "gulp-htmlmin": //压缩html
- "gulp-flatten": //去掉文件夹层次,将他们提到同级目录下
- js:
- "jshint" + "gulp-jshint": //js语法检查,后者是依赖于前者的,
- "gulp-concat": //合并js,
- "gulp-uglify": //混淆js,合并到同一行,
- "gulp-flatten": //重命名,改为.min.js,
- others:
- "browser-sync": //自动刷新浏览器,
- "http-proxy-middleware": //中转站,将ajax请求转发到test域名,
- gulp-others:【暂时未用】
- "gulp-bower": "0.0.13","gulp-cdn-replace": "^0.3.0","gulp-filter": "^4.0.0","gulp-rev": "^7.1.2","gulp-rev-collector": "^1.0.5","gulp-useref": "^3.1.2",
bower
1 为什么要使用bower
2 常用的cli
3 angularJs项目中所需要用到的bower
- "angular": "^1.5.8",//angularJs.min.js
- "angular-ui-router": "^0.3.1",//ui-router
gulpfile
1 简单的小栗子
- gulp.task('step1',function () {
- console.log('This is step1');
- });
- gulp.task('step2',['step1'],function () {
- console.log('This is step2');
- });
- gulp.task('step3',[ 'step1','step2'],function () {
- console.log('This is step3');
- });
- //[ 'step1','step2']这里的是并发执行
- gulp.task('step4',function () {
- return gulp.src([
- 'src/*.model.js','src/*.service.js'
- ])//这里的src会按照先后顺序去执行编译,而不是并发执行
- .pipe(gulp.dest('dist'));//gulp.dest输出dist目录
- });
2 在一个gulpfile中有多个项目去编译
- var ENV_PC = 'pc';
- var ENV_MOBILE = 'mobile';
- var env = 'pc';
- // pc
- var pcPaths = {
- app: 'apps/' + env,libs: 'bower_components',dist: 'dist/' + env,filters: 'filters',models: 'models',services: 'services'
- };
- gulp.task('build:pc',['clean'],function() {
- env = ENV_PC;
- gulp.start('step1');
- });
- gulp.task('build:mobile',function() {
- env = ENV_MOBILE;
- gulp.start('step1');
- });
- gulp.task('step1',function () {
- console.log(111,env);
- });
3 CLI
- * gulp :默认执行default的task
- * gulp <任务名>: 执行特定任务
4 项目中的gulpfile.js文件
- 'use strict';
- var proxyHost = 'http://127.0.0.1:8000';//输入自己的测试地址
- var cdnDomain = '';
- var templateConfig = {
- cdnPrefix: 'http://127.0.0.1:8000/'//输入自己的cdn地址
- };
- var htmlminConfig = {
- collapseWhitespace: true
- };
- var gulp = require('gulp');
- var jshint = require('gulp-jshint');
- var concat = require('gulp-concat');
- var uglify = require('gulp-uglify');
- var rename = require('gulp-rename');
- var flatten = require('gulp-flatten');
- var filter = require('gulp-filter');
- var htmlmin = require('gulp-htmlmin');
- var cleanCSS = require('gulp-clean-css');
- var del = require('del');
- var sass = require('gulp-sass');
- var rev = require('gulp-rev');
- var revCollector = require('gulp-rev-collector');
- var cdn = require('gulp-cdn-replace');
- var browserSync = require('browser-sync').create();
- var proxyMiddleware = require('http-proxy-middleware');
- var proxy = proxyMiddleware('/ajax',{
- target: proxyHost,changeOrigin: true,pathRewrite: {
- '^/ajax': ''
- }
- });
- const ENVIRONMENT = {
- PC: 'pc',MOBILE: 'mobile'
- }
- var path = {};
- function initEnvironment(env) {
- path = {
- app: 'apps/' + env,services: 'services'
- };
- }
- gulp.task('watch',['build'],function() {
- gulp.watch(path.libs + '/**/*',['build:vendor']);
- gulp.watch([
- path.app + '/scss/*.scss'
- ],['build:css']);
- gulp.watch([
- path.app + '/components/*.component.js',path.app + '/components/*.controller.js',path.app + '/directives/*.directive.js',path.app + '/pages/*.controller.js',path.app + '/pages/*.router.js',path.app + '/pages/*.js',path.filters + '/*.filter.js',path.models + '/*.model.js',path.services + '/*.service.js'
- ],['build:js']);
- //gulp.watch(path.assets + '/fonts/*',['build:fonts']);
- gulp.watch(path.app + '/images/*',['build:images']);
- gulp.watch(path.app + '/**/*.html',['build:html']);
- });
- gulp.task('lint',function() {
- return gulp.src([
- path.app + '/components/*.component.js',path.services + '/*.service.js'
- ])
- .pipe(jshint())
- .pipe(jshint.reporter('default'));
- });
- gulp.task('build',[
- 'build:js','build:css',//'build:fonts','build:images','build:vendor','build:html','build:others'
- ]);
- // css task
- gulp.task('build:css',function() {
- return gulp.src([
- path.app + '/scss/*.scss'
- ])
- .pipe(concat('turnado.css'))
- .pipe(sass().on('error',sass.logError))
- .pipe(gulp.dest(path.dist + '/assets/css'))
- .pipe(cleanCSS())
- .pipe(rename({suffix: '.min'}))
- .pipe(gulp.dest(path.dist + '/assets/css'))
- });
- // vendor task
- gulp.task('build:vendor',function() {
- return gulp.src(path.libs + '/**/*')
- .pipe(gulp.dest(path.dist + '/vendor'));
- });
- //js task
- gulp.task('build:js',['lint'],path.services + '/*.service.js'
- ])
- .pipe(concat('turnado.js'))
- .pipe(gulp.dest(path.dist + '/assets/js/'))
- .pipe(uglify())
- .pipe(rename({suffix: '.min'}))
- .pipe(gulp.dest(path.dist + '/assets/js/'));
- });
- //html task
- //html index task
- gulp.task('build:html:index',function() {
- return gulp.src([
- path.app + '/pages/index.html'
- ])
- .pipe(cdn({
- dir: path.dist,root: {
- js: cdnDomain,css: cdnDomain
- }
- }))
- .pipe(gulp.dest(path.dist));
- });
- //html views task
- gulp.task('build:html:views',function() {
- return gulp.src([
- path.app + '/pages/*/*.html'
- ])
- .pipe(flatten())
- .pipe(cdn({
- dir: path.dist,css: cdnDomain
- }
- }))
- .pipe(gulp.dest(path.dist + '/views'));
- });
- //html shared task
- gulp.task('build:html:shared',function() {
- return gulp.src([
- path.app + '/shared/*.html'
- ])
- .pipe(flatten())
- .pipe(cdn({
- dir: path.dist,css: cdnDomain
- }
- }))
- .pipe(gulp.dest(path.dist + '/views/shared'));
- });
- // components task
- gulp.task('build:html:components',function() {
- return gulp.src([
- path.app + '/components/**/*.html'
- ])
- .pipe(flatten())
- .pipe(cdn({
- dir: path.dist,css: cdnDomain
- }
- }))
- .pipe(gulp.dest(path.dist + '/views/components'));
- });
- gulp.task('build:html',[
- 'build:html:index','build:html:views','build:html:shared','build:html:components'
- ]);
- // images task
- gulp.task('build:images',function() {
- return gulp.src([
- path.app + '/images/**/*'
- ])
- .pipe(gulp.dest(path.dist + '/assets/images'));
- });
- gulp.task('build:others',function() {
- return gulp.src([
- 'robots.txt','baidu_verify_*.html','.htaccess'
- ])
- .pipe(gulp.dest(path.dist));
- });
- gulp.task('debug',['watch'],function () {
- browserSync.init({
- startPath: '/',server: {
- baseDir: path.dist
- },//browser: 'google chrome',middleware: [proxy]
- });
- gulp.watch(path.dist + '/**/*').on('change',browserSync.reload);
- });
- gulp.task('clean',function () {
- return del(path.dist);
- });
- gulp.task('default',function() {
- gulp.start('build:pc');
- gulp.start('build:mobile');
- });
- gulp.task('build-pc',function() {
- initEnvironment(ENVIRONMENT.PC);
- gulp.start('build');
- });
- gulp.task('build-mobile',function() {
- initEnvironment(ENVIRONMENT.MOBILE);
- gulp.start('build');
- });
- gulp.task('debug-pc',function() {
- initEnvironment(ENVIRONMENT.PC);
- gulp.start('debug');
- });
- gulp.task('debug-mobile',function() {
- initEnvironment(ENVIRONMENT.MOBILE);
- gulp.start('debug');
- });
index.html
引入需要用的js、css文件
index.js
- (function() {
- angular.module('mall',[
- 'ui.router','angular-carousel'
- ])
- .constant('xx',{
- xx: 2,xx: 1
- })//定义常量,减少硬编码
- angular.module('admin.services',[]);//处理业务逻辑
- angular.module('admin.models',[]);//底层ajax请求
- angular.module('admin.directives',[]);//指令,处理dom操作
- angular.module('admin.components',[]);//组件
- angular.module('admin.filters',[]);//过滤器
- })();
- angular
- .module('mall')
- .controller('MainCtrl',MainCtrl)
- .config(mainConfig)
- .run(mainRun);
- MainCtrl.$inject = ['$rootScope','$scope'];
- function MainCtrl($rootScope,$scope) {
- var vm = this;
- }
- mainConfig.$inject = ['$urlRouterProvider','$locationProvider'];
- function mainConfig($urlRouterProvider,$locationProvider) {
- $locationProvider.hashPrefix('!');
- $locationProvider.html5Mode(false);
- $urlRouterProvider.otherwise("/home");//定义入口文件
- }
- mainRun.$inject = ['$rootScope','$state'];
- function mainRun($rootScope,$state) {
- $rootScope.$state = $state;
- }
组件,作为标签元素使用,directive的一种,将需要依赖于scope的directive写成组件是有好处的第一是使项目中的directive更有独立性第二是可以避免directive文件在controller加载完成之前就compile,这样directive中的scope依赖的变量成为局部变量