myAngular

自己用angular+angular-ui-router+requirejs+gulp 搭的小項目

配置安裝

下載源文件后運行

NPM

npm install 

前端自動化

對靜態(tài)資源進行監(jiān)聽赔硫，編譯侥猩，使用模塊如下：

• browser-sync
• run-sequence
• gulp-less
• gulp-autoprefixer
• gulp-sourcemaps
• gulp-cssnano

使用browser-sync 來進行本地靜態(tài)資源服務(wù)器及刷新瀏覽器

gulp.task('browserSync', () => {
    browserSync({
        server: {
            baseDir: ''
        }
    })
});

引入less，使用gulp-less钓丰，gulp-autoprefixer晨逝，gulp-sourcemap缎岗，gulp-cssnano 來編譯壓縮

gulp.task('less', () =>
    gulp
    .src('static/less/bootstrap.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write({ includeContent: false }))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('/'))
    .pipe(gulp.dest('static/css'))
    .pipe(browserSync.reload({ stream: true }))
);

使用run-sequence 來同步運行任務(wù)插件

gulp.task('default', (callback) => {
    runSequence(['browserSync', 'watch'], callback);
})

項目入口

使用的庫主要是

• requirejs
• angular
• angular-ui-router

使用requirejs 來加載頁面所需的js

const CURRENT_PATH = '/'
const COMPONENTS_PATH = './components/';

require.config({
    paths: {
        'angular': COMPONENTS_PATH + 'angular/angular',
        'app': CURRENT_PATH + 'app',
        'ui-route': COMPONENTS_PATH + 'angular-ui-router/release/angular-ui-router',
        'route': CURRENT_PATH + 'route/angular.route',
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'ui-route': {
            deps: ['angular'],
            exports: 'ui-route'
        }
    }
})

引入

require([
    'angular',
    'app',
    'route',
    'ui-route',
    './controller/controller',
], function() {
    angular.bootstrap(document, ['webapp']);
})

angular 入口 app.js

    var app = angular.module('webapp', [
        'ui.router',
        'webapp.Ctrl',
    ]);
    return app;

angular 路由定義 angular.route.js

const PATH_LAYOUT = './views/common/layout.html';

const PATH_MENU = './views/common/menu.html';

$stateProvider.state('index', {
    url: '/index',
    views: {
        'layout': {
            templateUrl: PATH_LAYOUT
        },
        'side@index': {
            templateUrl: PATH_MENU
        },
        'main@index': {
            templateUrl: './views/homepage/index.html'
        }
    }
})

未完待續(xù)（還有相關(guān)angular指令哈打，等有時間再補上）

github