Angular js 单页应用环境搭建

Angular js 单页应用的开发环境搭建

简介

一直都在做后端的开发，因为最近项目中有用到Angularjs,对这个google开发的前端框架很感兴趣，于是找了一个相关的资料学习了一下，写下文章记录一下学习的过程。

学习angularjs 1.x.x的应用，并以此做一个webapp的前端单页应用

来源慕课网教学视频

目录

• Angular js 单页应用的开发环境搭建
  • 简介
    • 学习angularjs 1.x.x的应用，并以此做一个webapp的前端单页应用
    • 来源慕课网教学视频
  • 开发环境搭建
    • NodeJs环境安装, 安装地址
    • 全局安装bower, 解决js的依赖管理
    • 全局安装自动化管理工具gulp
    • 安装angularjs 依赖及相关依赖
    • 结束语
    • 附目录结构图

开发环境搭建

NodeJs环境安装, 安装地址

全局安装bower, 解决js的依赖管理

npm install bower -g

全局安装自动化管理工具gulp

全局安装gulp及相关依赖

npm install -g gulp
npm install gulp-clean gulp-concat gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-plumber gulp-uglify open

配置文件gulpfile.js

var gulp = require("gulp");
var $ = require("gulp-load-plugins")();
var open = require('open');

var app = {
		srcPath: 'src/',
		devPath: 'build/',
		prdPath: 'dist/'
}

gulp.task('lib', function() {
	gulp.src('bower_components/**/*.js')
	.pipe(gulp.dest(app.devPath + 'vendor'))
	.pipe(gulp.dest(app.prdPath + 'vendor'))
	.pipe($.connect.reload())
});

gulp.task('html', function() {
	gulp.src(app.srcPath + '**/*.html')
	.pipe(gulp.dest(app.devPath))
	.pipe(gulp.dest(app.prdPath))
	.pipe($.connect.reload())
});

gulp.task('json', function() {
	gulp.src(app.srcPath + 'data/**/*.json')
	.pipe(gulp.dest(app.devPath + 'data'))
	.pipe(gulp.dest(app.prdPath + 'data'))
	.pipe($.connect.reload())
});

gulp.task('less', function() {
	gulp.src(app.srcPath + 'style/index.less')
	.pipe($.less())
	.pipe(gulp.dest(app.devPath + 'css'))
	.pipe($.cssmin())
	.pipe(gulp.dest(app.prdPath + 'css'))
	.pipe($.connect.reload())
});

gulp.task('js', function() {
	gulp.src(app.srcPath + 'script/**/*.js')
	.pipe($.concat('index.js'))
	.pipe(gulp.dest(app.devPath + 'js'))
	.pipe($.uglify())
	.pipe(gulp.dest(app.prdPath + 'js'))
	.pipe($.connect.reload())
});

gulp.task('image', function() {
	gulp.src(app.srcPath + 'image/**/*')
	.pipe(gulp.dest(app.devPath + 'image'))
	.pipe($.imagemin())
	.pipe(gulp.dest(app.prdPath + 'image'))
	.pipe($.connect.reload())
});

gulp.task('clean', function() {
	gulp.src([app.devPath, app.prdPath])
	.pipe($.clean())
});

gulp.task('build', ['image', 'json', 'js', 'less', 'html', 'lib']);

gulp.task('server',['build'], function () {
	$.connect.server({
		root:[app.devPath],
		livereload:true,
		port:1234
	});
	open('http://localhost:1234');

	gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
	gulp.watch(app.srcPath + '**/*.html', ['html']);
	gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
	gulp.watch(app.srcPath + 'image/**/*', ['image']);
	gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
	gulp.watch(app.srcPath + 'bower_components/**/*.js', 'lib');
});

gulp.task('default', ['server']);

安装angularjs 依赖及相关依赖

"dependencies": {
    "angular": "1.5.8",
    "angular-ui-router": "ui-router#0.3.1",
    "angular-cookies": "1.5.8"
 }

结束语

感觉bower与gulp是很强大而且很实用的工具，bower能很方便的解决依赖问题，gulp自动化更新发布，在开发中提供了很大的便利

附目录结构图