angularJs项目搭建

前端之家收集整理的这篇文章主要介绍了angularJs项目搭建前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

刚进入我司的时候我也是个啥都不懂得菜鸟,对于angularJs的印象也就是停留于他的指令,并且他的指令可以作为 标签使用,这样可以极大的减少代码量,【实习的时候曾和大牛短暂接触过,看了这段代码】。@H_403_3@我司的angularJs项目是分模块化的,在我刚进入公司的时候,我直接就可以新建模版引擎以及对应的controller、router、service方法,每一个js都可以被依赖注入,后期在深入的时候可以去写component、directive,这样一个好处是方便上手,可以在短时间内操作页面的更删改查,项目结构清晰,减少代码耦合;但同时也有它的弊端,那就是完全不知道一个项目是如何搭建起来的。现在我开始着手搭建一个新的项目,我就来记录一下我是如何将这个项目搭建起来的。

npm

1 dependencies以及devDependencies的区别

  1. *dependencies 项目运行时所需要的文件
  2. *devDependencies 开发时需要而线上运行时不需要的文件

1 npm中主要用到的cli

  1. * npm init : 初始化package.json文件,有些有括号的则说明是默认有的,不填也可以
  2.  
  3. 在这个里面有一个用法
  1. "scripts": {
  2. "buildpc": gulp,"test": "echo 22222"
  3. }
  1. cmd中执行时可以npm run test/buildpc,这样就可以去执行对应的程序。
  2. * npm install/i --save:安装到dependencies
  3. * npm install/i --save-dev:安装到devDependencies
  4. * npm search 搜索npm模块,但是这个search速度很慢,可以在谷歌中搜索然后直接下载,在搜索的结果中也会有这个项目的git地址

2 我在这个项目中主要用到的devDependencies【按照它们的作用去划分】

  1. del:
  2. "del": //删除文件
  3. css:
  4. "gulp-sass": //编译为css
  5. "gulp-clean-css": //压缩为min.css
  6. "gulp-rename": //重命名
  7. html:
  8. "gulp-htmlmin": //压缩html
  9. "gulp-flatten": //去掉文件夹层次,将他们提到同级目录下
  10. js:
  11. "jshint" + "gulp-jshint": //js语法检查,后者是依赖于前者的,
  12. "gulp-concat": //合并js,
  13. "gulp-uglify": //混淆js,合并到同一行,
  14. "gulp-flatten": //重命名,改为.min.js,
  15. others:
  16. "browser-sync": //自动刷新浏览器,
  17. "http-proxy-middleware": //中转站,将ajax请求转发到test域名,
  18. gulp-others:【暂时未用】
  19. "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

  1. 便于查看项目依赖的文件以及版本号,同时也可以查看依赖文件本身所依赖的文件

2 常用的cli

  1. * bower init : 初始化package.json文件,有些有括号的则说明是默认有的,不填也可以
  2. * bower install/i --save:安装到dependencies
  3. * bower install/i --save-dev:安装到devDependencies
  4. * bower search 搜索bower模块,速度还行
  5. * bower register 注册bowerrelease版本后才能bower install
  6. * bower unregister

3 angularJs项目中所需要用到的bower

  1. "angular": "^1.5.8",//angularJs.min.js
  2. "angular-ui-router": "^0.3.1",//ui-router

gulpfile

1 简单的小栗子

  1. gulp.task('step1',function () {
  2. console.log('This is step1');
  3. });
  4. gulp.task('step2',['step1'],function () {
  5. console.log('This is step2');
  6. });
  7. gulp.task('step3',[ 'step1','step2'],function () {
  8. console.log('This is step3');
  9. });
  10. //[ 'step1','step2']这里的是并发执行
  11. gulp.task('step4',function () {
  12. return gulp.src([
  13. 'src/*.model.js','src/*.service.js'
  14. ])//这里的src会按照先后顺序去执行编译,而不是并发执行
  15. .pipe(gulp.dest('dist'));//gulp.dest输出dist目录
  16. });

2 在一个gulpfile中有多个项目去编译

  1. var ENV_PC = 'pc';
  2. var ENV_MOBILE = 'mobile';
  3. var env = 'pc';
  4. // pc
  5. var pcPaths = {
  6. app: 'apps/' + env,libs: 'bower_components',dist: 'dist/' + env,filters: 'filters',models: 'models',services: 'services'
  7. };
  8. gulp.task('build:pc',['clean'],function() {
  9. env = ENV_PC;
  10. gulp.start('step1');
  11. });
  12. gulp.task('build:mobile',function() {
  13. env = ENV_MOBILE;
  14. gulp.start('step1');
  15. });
  16. gulp.task('step1',function () {
  17. console.log(111,env);
  18. });

3 CLI

  1. * gulp :默认执行defaulttask
  2. * gulp <任务名>: 执行特定任务

4 项目中的gulpfile.js文件

  1. 'use strict';
  2.  
  3. var proxyHost = 'http://127.0.0.1:8000';//输入自己的测试地址
  4. var cdnDomain = '';
  5.  
  6. var templateConfig = {
  7. cdnPrefix: 'http://127.0.0.1:8000/'//输入自己的cdn地址
  8. };
  9.  
  10. var htmlminConfig = {
  11. collapseWhitespace: true
  12. };
  13.  
  14. var gulp = require('gulp');
  15. var jshint = require('gulp-jshint');
  16. var concat = require('gulp-concat');
  17. var uglify = require('gulp-uglify');
  18. var rename = require('gulp-rename');
  19. var flatten = require('gulp-flatten');
  20. var filter = require('gulp-filter');
  21. var htmlmin = require('gulp-htmlmin');
  22. var cleanCSS = require('gulp-clean-css');
  23. var del = require('del');
  24. var sass = require('gulp-sass');
  25. var rev = require('gulp-rev');
  26. var revCollector = require('gulp-rev-collector');
  27. var cdn = require('gulp-cdn-replace');
  28. var browserSync = require('browser-sync').create();
  29. var proxyMiddleware = require('http-proxy-middleware');
  30.  
  31. var proxy = proxyMiddleware('/ajax',{
  32. target: proxyHost,changeOrigin: true,pathRewrite: {
  33. '^/ajax': ''
  34. }
  35. });
  36.  
  37. const ENVIRONMENT = {
  38. PC: 'pc',MOBILE: 'mobile'
  39. }
  40.  
  41. var path = {};
  42.  
  43. function initEnvironment(env) {
  44. path = {
  45. app: 'apps/' + env,services: 'services'
  46. };
  47. }
  48.  
  49. gulp.task('watch',['build'],function() {
  50. gulp.watch(path.libs + '/**/*',['build:vendor']);
  51. gulp.watch([
  52. path.app + '/scss/*.scss'
  53. ],['build:css']);
  54. gulp.watch([
  55. 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'
  56. ],['build:js']);
  57. //gulp.watch(path.assets + '/fonts/*',['build:fonts']);
  58. gulp.watch(path.app + '/images/*',['build:images']);
  59. gulp.watch(path.app + '/**/*.html',['build:html']);
  60. });
  61.  
  62. gulp.task('lint',function() {
  63. return gulp.src([
  64. path.app + '/components/*.component.js',path.services + '/*.service.js'
  65. ])
  66. .pipe(jshint())
  67. .pipe(jshint.reporter('default'));
  68. });
  69.  
  70. gulp.task('build',[
  71. 'build:js','build:css',//'build:fonts','build:images','build:vendor','build:html','build:others'
  72. ]);
  73.  
  74. // css task
  75. gulp.task('build:css',function() {
  76. return gulp.src([
  77. path.app + '/scss/*.scss'
  78. ])
  79. .pipe(concat('turnado.css'))
  80. .pipe(sass().on('error',sass.logError))
  81. .pipe(gulp.dest(path.dist + '/assets/css'))
  82. .pipe(cleanCSS())
  83. .pipe(rename({suffix: '.min'}))
  84. .pipe(gulp.dest(path.dist + '/assets/css'))
  85. });
  86.  
  87. // vendor task
  88. gulp.task('build:vendor',function() {
  89. return gulp.src(path.libs + '/**/*')
  90. .pipe(gulp.dest(path.dist + '/vendor'));
  91. });
  92.  
  93. //js task
  94. gulp.task('build:js',['lint'],path.services + '/*.service.js'
  95. ])
  96. .pipe(concat('turnado.js'))
  97. .pipe(gulp.dest(path.dist + '/assets/js/'))
  98. .pipe(uglify())
  99. .pipe(rename({suffix: '.min'}))
  100. .pipe(gulp.dest(path.dist + '/assets/js/'));
  101. });
  102.  
  103. //html task
  104. //html index task
  105. gulp.task('build:html:index',function() {
  106. return gulp.src([
  107. path.app + '/pages/index.html'
  108. ])
  109. .pipe(cdn({
  110. dir: path.dist,root: {
  111. js: cdnDomain,css: cdnDomain
  112. }
  113. }))
  114. .pipe(gulp.dest(path.dist));
  115. });
  116. //html views task
  117. gulp.task('build:html:views',function() {
  118. return gulp.src([
  119. path.app + '/pages/*/*.html'
  120. ])
  121. .pipe(flatten())
  122. .pipe(cdn({
  123. dir: path.dist,css: cdnDomain
  124. }
  125. }))
  126. .pipe(gulp.dest(path.dist + '/views'));
  127. });
  128. //html shared task
  129. gulp.task('build:html:shared',function() {
  130. return gulp.src([
  131. path.app + '/shared/*.html'
  132. ])
  133. .pipe(flatten())
  134. .pipe(cdn({
  135. dir: path.dist,css: cdnDomain
  136. }
  137. }))
  138. .pipe(gulp.dest(path.dist + '/views/shared'));
  139. });
  140. // components task
  141. gulp.task('build:html:components',function() {
  142. return gulp.src([
  143. path.app + '/components/**/*.html'
  144. ])
  145. .pipe(flatten())
  146. .pipe(cdn({
  147. dir: path.dist,css: cdnDomain
  148. }
  149. }))
  150. .pipe(gulp.dest(path.dist + '/views/components'));
  151. });
  152. gulp.task('build:html',[
  153. 'build:html:index','build:html:views','build:html:shared','build:html:components'
  154. ]);
  155.  
  156. // images task
  157. gulp.task('build:images',function() {
  158. return gulp.src([
  159. path.app + '/images/**/*'
  160. ])
  161. .pipe(gulp.dest(path.dist + '/assets/images'));
  162. });
  163.  
  164. gulp.task('build:others',function() {
  165. return gulp.src([
  166. 'robots.txt','baidu_verify_*.html','.htaccess'
  167. ])
  168. .pipe(gulp.dest(path.dist));
  169. });
  170.  
  171. gulp.task('debug',['watch'],function () {
  172. browserSync.init({
  173. startPath: '/',server: {
  174. baseDir: path.dist
  175. },//browser: 'google chrome',middleware: [proxy]
  176. });
  177.  
  178. gulp.watch(path.dist + '/**/*').on('change',browserSync.reload);
  179. });
  180.  
  181. gulp.task('clean',function () {
  182. return del(path.dist);
  183. });
  184.  
  185. gulp.task('default',function() {
  186. gulp.start('build:pc');
  187. gulp.start('build:mobile');
  188. });
  189.  
  190. gulp.task('build-pc',function() {
  191. initEnvironment(ENVIRONMENT.PC);
  192. gulp.start('build');
  193. });
  194.  
  195. gulp.task('build-mobile',function() {
  196. initEnvironment(ENVIRONMENT.MOBILE);
  197. gulp.start('build');
  198. });
  199.  
  200. gulp.task('debug-pc',function() {
  201. initEnvironment(ENVIRONMENT.PC);
  202. gulp.start('debug');
  203. });
  204.  
  205. gulp.task('debug-mobile',function() {
  206. initEnvironment(ENVIRONMENT.MOBILE);
  207. gulp.start('debug');
  208. });

index.html

引入需要用的js、css文件

index.js

  1. (function() {
  2. angular.module('mall',[
  3. 'ui.router','angular-carousel'
  4. ])
  5. .constant('xx',{
  6. xx: 2,xx: 1
  7. })//定义常量,减少硬编码
  8. angular.module('admin.services',[]);//处理业务逻辑
  9. angular.module('admin.models',[]);//底层ajax请求
  10. angular.module('admin.directives',[]);//指令,处理dom操作
  11. angular.module('admin.components',[]);//组件
  12. angular.module('admin.filters',[]);//过滤器
  13. })();
  14.  
  15. angular
  16. .module('mall')
  17. .controller('MainCtrl',MainCtrl)
  18. .config(mainConfig)
  19. .run(mainRun);
  20.  
  21. MainCtrl.$inject = ['$rootScope','$scope'];
  22.  
  23. function MainCtrl($rootScope,$scope) {
  24. var vm = this;
  25. }
  26.  
  27. mainConfig.$inject = ['$urlRouterProvider','$locationProvider'];
  28. function mainConfig($urlRouterProvider,$locationProvider) {
  29. $locationProvider.hashPrefix('!');
  30. $locationProvider.html5Mode(false);
  31. $urlRouterProvider.otherwise("/home");//定义入口文件
  32. }
  33.  
  34. mainRun.$inject = ['$rootScope','$state'];
  35. function mainRun($rootScope,$state) {
  36. $rootScope.$state = $state;
  37. }

组件,作为标签元素使用,directive的一种,将需要依赖于scope的directive写成组件是有好处的第一是使项目中的directive更有独立性第二是可以避免directive文件在controller加载完成之前就compile,这样directive中的scope依赖的变量成为局部变量

猜你在找的Angularjs相关文章