目录

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

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

简介

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

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

来源慕课网教学视频

开发环境搭建

NodeJs环境安装, 安装地址

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

npm install bower -g

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

全局安装gulp及相关依赖

npm install -g gulpnpm 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自动化更新发布，在开发中提供了很大的便利

附目录结构图

Angular js 单页应用环境搭建

原文地址：https://www.cnblogs.com/PeakPanBlog/p/9700342.html