基於angular+bower+glup的webapp

標籤：color   lte   過濾   定製   即時   說明   head   項目   tle   

一：bower介紹

1:全域安裝安裝bower

cnpm i -g bower

bower常用指令：

bower init    //初始設定檔案bower installbower 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‘]);  //監控檔案的變化，並Just-In-Time 編譯  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安裝依賴包

　　

基於angular+bower+glup的webapp