angularJs項目搭建

前言

剛進入我司的時候我也是個啥都不懂得菜鳥，對於angularJs的印象也就是停留於他的指令，而且他的指令能夠做爲 標籤使用，這樣能夠極大的減小代碼量,【實習的時候曾和大牛短暫接觸過，看了這段代碼】。
我司的angularJs項目是分模塊化的，在我剛進入公司的時候，我直接就能夠新建模版引擎以及對應的controller、router、service方法，每個js均可以被依賴注入，後期在深刻的時候能夠去寫component、directive，這樣一個好處是方便上手，能夠在短期內操做頁面的更刪改查，項目結構清晰，減小代碼耦合；但同時也有它的弊端，那就是徹底不知道一個項目是如何搭建起來的。如今我開始着手搭建一個新的項目，我就來記錄一下我是如何將這個項目搭建起來的。

npm

1 dependencies以及devDependencies的區別

*dependencies 項目運行時所須要的文件
*devDependencies 開發時須要而線上運行時不須要的文件

1 npm中主要用到的cli

* npm init : 初始化package.json文件，有些有括號的則說明是默認有的，不填也能夠

    在這個裏面有一個用法

"scripts": {
    "buildpc": gulp,
    "test": "echo 22222"
  }

在cmd中執行時能夠npm run test/buildpc，這樣就能夠去執行對應的程序。
    
* npm install/i --save：安裝到dependencies
* npm install/i --save-dev：安裝到devDependencies
* npm search ：搜索npm模塊，可是這個search速度很慢，能夠在谷歌中搜索而後直接下載，在搜索的結果中也會有這個項目的git地址

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

* bower init : 初始化package.json文件，有些有括號的則說明是默認有的，不填也能夠
* bower install/i --save：安裝到dependencies
* bower install/i --save-dev：安裝到devDependencies
* bower search ：搜索bower模塊，速度還行
* bower register ：註冊bower，release版本後才能bower install
* bower unregister ：

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', ['clean'], 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,
        libs: 'bower_components',
        dist: 'dist/' + env,
        filters: 'filters',
        models: 'models',
        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.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'
    ])
        .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'], function() {
    return gulp.src([
        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'
    ])
        .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,
            root: {
                js: cdnDomain,
                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,
            root: {
                js: cdnDomain,
                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,
            root: {
                js: cdnDomain,
                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', ['clean'], function() {
    gulp.start('build:pc');
    gulp.start('build:mobile');
});

gulp.task('build-pc', ['clean'], function() {
    initEnvironment(ENVIRONMENT.PC);
    gulp.start('build');
});

gulp.task('build-mobile', ['clean'], function() {
    initEnvironment(ENVIRONMENT.MOBILE);
    gulp.start('build');
});

gulp.task('debug-pc', ['clean'], function() {
    initEnvironment(ENVIRONMENT.PC);
    gulp.start('debug');
});

gulp.task('debug-mobile', ['clean'], 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依賴的變量成爲局部變量