基于angular+bower+glup的webapp

Posted 2020-10-04 _林冲

一：bower介绍

1:全局安装安装bower

cnpm i -g bower

bower常用指令：

bower init    //初始化文件
bower install
bower uninstall

2:bower初始化配置：

bower init

后续的填写全部选yes

3：安装依赖（angularjs）

bower install -- save angular

4:创建.bowerrc

null>.bowerrc

这时候会提示null不是内部指令，但是没问题，已经创建好了。

然后在文件中输入：

{
	"directory": "lib"
}

这段代码的意思是，接下来我们bower install后的依赖都会放在lib这个文件夹下

5:安装requirejs 

bower install --save requirejs

这时候我们发现angular和require都放到了lib这个文件夹下了

6:删除目录，卸载requirejs

刚才4、5步在项目中没啥用处，我们使用bower uninstall卸载requirejs，然后删除lib目录和bowerrc文件

bower uninstall --save requirejs

 

二：自动化构建工具gulp项目结构介绍

gulp新建目录

1:全局安装gulp

cnpm i -g gulp

2：定义node的安装模块文件package.json

npm init

 后面需要填写的部分全部回车跳过

3：安装模块

模块安装的语法：cnpm i --save-dev xxxx

cnpm i --save-dev gulp

  接下来我们批量安装其他的模块,多个模块之间用空格隔开:语法为cnpm i --save-dev xxxx xxxx xxxx xxxx

cnpm i --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-plumber gulp-uglify open

4：新建配置文件gulpfile.js

拷贝依赖文件的方法:

var gulp = require(‘gulp‘); //引用gulp模块
var $ = require(‘gulp-load-plugins‘)(); //其他以gulp-开头的模块都不需要再定义变量了，可以直接用$引用
var open = require(‘open‘); //这个不是以gulp开头，需要引用

var app = {  //声明目录路径的全局变量
  srcPath: ‘src/‘,
  devPath: ‘build/‘,
  prdPath: ‘dist/‘
};
gulp.task(‘lib‘, function() {               //拷贝js的方法
  gulp.src(‘bower_components/**/*.js‘)      //读取bower_components路径下所有的js文件
  .pipe(gulp.dest(app.devPath + ‘vendor‘))  //dest()是写文件api
  .pipe(gulp.dest(app.prdPath + ‘vendor‘))
});

接下来我们执行gulp lib。执行成功后会我们会将所有的依赖文件都拷贝到build和dist文件夹下

注意：如果这里报错：cannot find module xxx说明之前安装依赖时有的依赖没有安装上，那缺什么依赖我们就cnpm i xxx啥依赖

 

接下来写拷贝html的方法：

gulp.task(‘html‘, function() {
  gulp.src(app.srcPath + ‘**/*.html‘) //读取app.srcPath路径下所有的html文件
  .pipe(gulp.dest(app.devPath))
  .pipe(gulp.dest(app.prdPath))
})

我们新建一个src文件夹，然后在src文件夹下新建index.html。view文件夹和view下的view.html

接着我们执行gulp html。执行成功后会我们会将index.html和view文件夹都拷贝到build和dist文件夹下

 

然后我们写拷贝json的方法，因为项目的数据没有和后台交互，所以我们要定义假的数据。

gulp.task(‘json‘, function() {
  gulp.src(app.srcPath + ‘data/**/*.json‘) //读取app.srcPath路径下所有的json文件
  .pipe(gulp.dest(app.devPath + ‘data‘))
  .pipe(gulp.dest(app.prdPath + ‘data‘))
});

在src文件夹下新建data文件夹，然后在data文件夹下新建1.json。　

接着我们执行gulp json。执行成功后会我们会将data文件夹和1.json都拷贝到build和dist文件夹下

 

接下来是拷贝less的方法：

gulp.task(‘less‘, function() {
  gulp.src(app.srcPath + ‘style/index.less‘) //读取app.srcPath路径下所有的less文件
  .pipe($.less())
  .pipe(gulp.dest(app.devPath + ‘css‘))
  .pipe($.cssmin()) //生产环境压缩
  .pipe(gulp.dest(app.prdPath + ‘css‘))
});

我们在src下新建style文件夹，然后在里面新建index.less

接着我们执行gulp less。执行成功后会我们会将css文件夹和index.css拷贝到build和dist文件夹下（这里的index.css是编译过后的index.less）

 

接下来是拷贝js的方法：

gulp.task(‘js‘, function() { //读取app.srcPath路径下所有的js文件
  gulp.src(app.srcPath + ‘script/**/*.js‘)
  .pipe($.concat(‘index.js‘)) //合并js文件
  .pipe(gulp.dest(app.devPath + ‘js‘))
  .pipe($.uglify())  //生产环境压缩
  .pipe(gulp.dest(app.prdPath + ‘js‘))
});

我们在src下新建script文件夹，然后在里面新建1.js和2.js，测试是否合并了js文件

接着我们执行gulp js。执行成功后会我们会将js文件夹和index.js拷贝到build和dist文件夹下（这里的index.js是合并过后的）

 

接下来是拷贝image的方法：

gulp.task(‘image‘, function() { //读取app.srcPath/image路径下所有的文件(jpg,png等)
  gulp.src(app.srcPath + ‘image/**/*‘)
  .pipe(gulp.dest(app.devPath + ‘image‘))
  .pipe($.imagemin()) //生产环境再压缩
  .pipe(gulp.dest(app.prdPath + ‘image‘))
});

我们在src下新建image文件夹，然后在里面放入一个png格式的图片

接着我们执行gulp image。在这里可能会抛出一个unhanded error event。这个错误好像是这个图片压缩插件对win7不友好。

 

如果我们需要删除某个文件夹：

gulp.task(‘clean‘, function() {  //清除build和dist文件
  gulp.src([app.devPath, app.prdPath])
  .pipe($.clean());
});

接着我们执行gulp clean。执行完成后build和dist文件夹都被删除了。

 

合并上述方法：

gulp.task(‘build‘, [‘image‘, ‘js‘, ‘less‘, ‘lib‘, ‘html‘, ‘json‘]); //合并方法

执行gulp build后，会将执行合并的几个方法。

 

接下来是开启服务的方法：

gulp.task(‘serve‘, [‘build‘], function() {  //开启服务
  $.connect.server({
    root: [app.devPath],  //根目录
    livereload: true,     // 热更新
    port: 3000
  });
  open(‘http://localhost:3000‘);

  gulp.watch(‘bower_components/**/*‘, [‘lib‘]);  //监控文件的变化，并实时编译
  gulp.watch(app.srcPath + ‘**/*.html‘, [‘html‘]);
  gulp.watch(app.srcPath + ‘data/**/*.json‘, [‘json‘]);
  gulp.watch(app.srcPath + ‘style/**/*.less‘, [‘less‘]);
  gulp.watch(app.srcPath + ‘script/**/*.js‘, [‘js‘]);
  gulp.watch(app.srcPath + ‘image/**/*‘, [‘image‘]);
});

执行gulp serve后，浏览器会打开http://localhost:3000。因为在win7上image这个方法会报错，所以我们得将build中的image和gulp.watch的image都去掉。编译成功后，我们直接修改index.html中的内容，保存一下发现页面已经刷新内容了（热更新）。gulp.watch这个方法使用的前提是需要给其监控的方法中加上一句代码

.pipe($.connect.reload());

：如html这个方法修改为：

gulp.task(‘html‘, function() {
  gulp.src(app.srcPath + ‘**/*.html‘) //读取app.srcPath路径下所有的html文件
  .pipe(gulp.dest(app.devPath))
  .pipe(gulp.dest(app.prdPath))
  .pipe($.connect.reload());
})

 

然后是默认的方法

gulp.task(‘default‘, [‘serve‘]); //默认的方法

当我们执行gulp指令时，会执行默认的gulp serve。

 

 

三：页面的开发

模块划分： 本次应用划分为： 职位 搜索 用户

 

一：页面架构  :页面中的相对路径都是dist和build下的。

1：在index.html中引入angular.min.js和index.js

<script src="vendor/angular/angular.min.js" charset="utf-8"></script>
<script src="js/index.js" charset="utf-8"></script>

注意：这里的index.js是所有的js合并的js文件。

2：在script下新建app.js

‘use strict‘;
angular.module(‘app‘, [‘ui.router‘]); //全局对象angular,module方法可以创建模块,[]里面是模块的依赖。模块需要启动，第一种是angular.boostrap()

　　

 

二：路由配置与安装 ：

1:安装与引用

bower install --save angular-ui-router

  之后我们在页面中引入： 这里的vendor其实是打包后dist和build下的文件目录。

<script src="vendor/angular-ui-router/release/angular-ui-router.min.js" charset="utf-8"></script>

然后在app.js中引入此模块

angular.module(‘app‘, [‘ui.router‘]);

2:在script>config>router.js

‘use strict‘

angular.module(‘app‘).config([‘$stateProvider‘, ‘$urlRouterProvider‘, function($stateProvider, $urlRouterProvider) {
  $stateProvider.state(‘main‘, {
    url: ‘/main‘,
    templateUrl: ‘view/main.html‘,
    controller: ‘mainCtrl‘
  })
  $urlRouterProvider.otherwise(‘main‘);
}])

3：新建src>view>main.html

<div class="">
  angular
</div>

 4:新建script>controller>mainCtrl.js

‘use strict‘;
angular.module(‘app‘).controller(‘mainCtrl‘, [‘$scope‘, function($scope){

}]);

 

三：职位页面的开发

1：在main.html添加

<div app-head></div>
<div app-position-list></div>
<div app-foot></div>

2:添加head模板template>head.html

<div class="head">
  <span>10秒定制职位</span>
  <button>去登陆</button>
</div>

3:添加指令directive>head.js

‘use strict‘;
angular.module(‘app‘).directive(‘appHead‘, [function(cache){
  return {
    restrict: ‘A‘, //A是以属性方式调用指令
    replace: true, //为true时，模板必须要有根元素
    templateUrl: ‘view/template/head.html‘
  };
}]);

4:添加样式文件style>template>head.less

@import ‘../variable.less‘;

.head {
  background-color: @headBgColor;
  .h(40);
  .lh(40);
  padding: 0 7px;
  .text {
    color: @defaultColor;
  }
  .custom {
    background-color: @warnColor;
    border-color: @warnColor;
    color: @defaultColor;
    border-style: dashed;
    .mt(7);
    .pl(15);
    .pr(15);
  }
  .back-btn {
    font-size: 20px;
    width: 1rem;
    left: 0;
  }
}

样式文件需要在index.less中引用进来，我们也可以在index.less中将一些css方法写进去

@import ‘template/head.less‘;

新建variable.less将主题颜色定义

@defaultColor: #fff;
@headBgColor: #12d5b5;
.............

新建property.less将一些具有固定值的css定义

.ta-l {
  text-align: left;
}
.ta-c {
  text-align: center;
}
.ta-r {
  text-align: right;
}
。。。。。。

　　

之后我们要在index.html中将css引入进来

  <link rel="stylesheet" href="/css/index.css" media="screen" title="no title" charset="utf-8">

 

四：搜索页面的开发

 

1：创建全局变量

 在script>config>dict.js

‘use strict‘;
angular.module(‘app‘).value(‘dict‘, {}).run([‘dict‘, ‘$http‘, function(dict, $http){
  $http.get(‘data/city.json‘).success(function(resp){
    dict.city = resp;
  });
  $http.get(‘data/salary.json‘).success(function(resp){
    dict.salary = resp;
  });
  $http.get(‘data/scale.json‘).success(function(resp){
    dict.scale = resp;
  });
}]);

 如何使用全局变量：依赖注入并声明:

angular.module(‘app‘).controller(‘searchCtrl‘, [‘dict‘, ‘$http‘, ‘$scope‘, function(dict, $http, $scope){

　　

2:创建过滤器

新建script>filter>filterByObj.js

 

‘use strict‘;
angular.module(‘app‘).filter(‘filterByObj‘, [function(){
  return function(list, obj) {
    var result = [];
    angular.forEach(list, function(item){
      var isEqual = true;
      for(var e in obj){
        if(item[e]!==obj[e]) {
          isEqual = false;
        }
      }
      if(isEqual) {
        result.push(item);
      }
    });
    return result;
  };
}]);

使用：

找到需要使用的页面：

ng-repeat="item in data|filterByObj:filterObj"

这里的data是filterByObj的list参数(被过滤的对象)，fliterObj是参数obj(过滤条件)。

 

 

 

 

 五：页面动画切换angular.animate.js

1:安装：

bower install --save angular-animate

2:使用：app.js中注入

angular.module(‘app‘, [‘ui.router‘, ‘ngCookies‘, ‘validation‘, ‘ngAnimate‘]);

　　

　

 

 

 

项目文件夹：

bower_components：第三方依赖
src：源码
build： 编译后的开发环境代码
dist：压缩后生产环境代码
test：单元测试和集成测试代码
node_modules：node安装依赖包