WebApp based on the Angular+bower+glup

One: Bower introduction

1: Global Installation Installation Bower

CNPM I-g Bower

Bower Common directives:

Bower Init    //initialization file Bower Installbower Uninstall

2:bower Initialization configuration:

Bower Init

All subsequent fill-in options Yes

3: Installation Dependent (ANGULARJS)

Bower Install--Save angular

4: Create. BOWERRC

Null>.bowerrc

At this point, NULL is not an internal instruction, but no problem, it has been created.

Then enter in the file:

{"Directory": "Lib"}

This code means, next we bower install after the dependency will be placed in the Lib this folder

5: Install Requirejs

Bower Install--save Requirejs

At this time we found that angular and require were placed in the Lib folder.

6: Delete directory, uninstall Requirejs

Just 4, 5 steps in the project is not useful, we use Bower Uninstall Uninstall Requirejs, and then delete the Lib directory and BOWERRC file

Bower Uninstall--save Requirejs

Two: Automation build Tool Gulp Project Structure Introduction Gulp New Directory

1: Global Installation Gulp

CNPM I-g Gulp

2: Define node's installation module file Package.json

NPM Init

You need to fill in the back part of all the return skip

3: Mounting Module

Module Installation Syntax:CNPM i--save-dev xxxx

CNPM I--save-dev Gulp

Next we batch installs the other module, separates the multiple modules with the space: The syntax is 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: New configuration file Gulpfile.js

How to copy dependent files:

var gulp = require (' gulp '); Reference Gulp module var $ = require (' Gulp-load-plugins ') (); Other modules that start with gulp-do not need to define variables, and can be directly referenced by the var open = require (' open '); This is not the beginning of gulp, need to refer to var app = {  //Declaration directory path global variable  srcpath: ' src/',  devPath: ' build/',  prdpath: ' dist/'}; Gulp.task (' Lib ', function () {               //Copy JS method  gulp.src (' bower_components/**/*.js ')      //Read Bower_ All JS files under the components path  . Pipe (Gulp.dest (app.devpath + ' vendor '))  //dest () is the Write file API  . PIPE (Gulp.dest ( App.prdpath + ' vendor ')});

Next we execute Gulp lib. After successful execution, we will copy all dependent files to the build and Dist folder

Note: If there is an error: Cannot find module XXX Description before the installation depends on the dependencies are not installed, that lack of what depends on us on cnpm i xxx what depends on

The next way to write the HTML copy:

Gulp.task (' HTML ', function () {  gulp.src (app.srcpath + ' **/*.html ')//reads all the HTML files under the App.srcpath path  . PIPE ( Gulp.dest (App.devpath))  . Pipe (Gulp.dest (App.prdpath))})

We create a new SRC folder and then create a new index.html under the SRC folder. View folder and view under the view.html

Then we execute gulp HTML. After successful execution, we will copy the index.html and view folders to the build and Dist folders

Then we write the method of copying JSON, because the project data does not interact with the background, so we want to define false data.

Gulp.task (' JSON ', function () {  gulp.src (app.srcpath + ' Data/**/*.json ')//reads all JSON files under the App.srcpath path  . PIPE ( Gulp.dest (App.devpath + ' data '))  . Pipe (Gulp.dest (app.prdpath + ' data ')});

Create a new Data folder under the SRC folder, and then create a new 1.json under the Data folder.

We then execute the Gulp JSON. After successful execution, we will copy the Data folder and 1.json to the build and Dist folder

Next is the method of copying less:

Gulp.task (' Less ', function () {  gulp.src (app.srcpath + ' style/index.less ')//reads all the less files under the App.srcpath path  . pipe ($.less ())  . Pipe (Gulp.dest (app.devpath + ' CSS '))  . Pipe ($.cssmin ())//Production environment Compression  . PIPE (Gulp.dest (app.prdpath + ' CSS ')});

We create a new style folder under SRC, and then create a new index.less inside

Then we execute gulp less. After successful execution, we will copy the CSS folder and index.css to the Build and Dist folder (here The index.css is compiled index.less)

Next is the method of copying JS:

Gulp.task (' JS ', function () {//reads all JS files under the App.srcpath path  gulp.src (App.srcpath + ' script/**/*.js ')  . Pipe ($. Concat (' index.js '))//merge JS files  . Pipe (Gulp.dest (App.devpath + ' JS '))  . Pipe ($.uglify ())  //Production environment compression  . Pipe (Gulp.dest (App.prdpath + ' JS ')});

We create a new script folder under SRC, and then create a new 1.js and 2.js inside to test if the JS file is merged.

Then we execute Gulp JS. After successful execution, we will copy the JS folder and Index.js to the Build and Dist folder (the index.js here is merged)

Next is the method of copying the image:

Gulp.task (' Image ', function () {//Read all files under App.srcpath/image path (jpg,png, etc.)  gulp.src (App.srcpath + ' image/**/* ')  . Pipe (Gulp.dest (app.devpath + ' image '))  . Pipe ($.imagemin ())//Production environment re  -compressed. Pipe (Gulp.dest (App.prdpath + ') Image ')});

We create a new image folder under SRC, and then put a picture in PNG format

We then execute gulp image. A unhanded Error event may be thrown here. This error is like this image compression plugin is unfriendly to Win7.

If we need to delete a folder:

Gulp.task (' Clean ', function () {  //clear Build and Dist file  gulp.src ([App.devpath, App.prdpath])  . Pipe ($.clean () );});

Then we execute gulp clean. The build and Dist folders are deleted after execution is complete.

Combine the above methods:

Gulp.task (' Build ', [' image ', ' js ', ' less ', ' lib ', ' html ', ' JSON ']); Merge method

After the gulp build is executed, several methods of merging will be performed.

Here's how to start the service:

Gulp.task (' Serve ', [' build '], function () {  //Open service  $.connect.server ({    root: [App.devpath],  //root directory    livereload:true,     //Hot update    port:3000  });  Open (' http://localhost:3000 ');  Gulp.watch (' bower_components/**/* ', [' Lib ']);  Monitor file changes and compile gulp.watch in real time  (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 ']);});

After gulp serve is executed, the browser will open http://localhost:3000. Because the image on the Win7 error, we have to remove the image from the build and the image of Gulp.watch. After compiling successfully, we directly modify the content in Index.html, save the discovery page has refreshed the content (hot update). Gulp.watch This method is used only if you need to add a code to its monitoring method

. Pipe ($.connect.reload ());

: This method, such as HTML, is modified to:

Gulp.task (' HTML ', function () {  gulp.src (app.srcpath + ' **/*.html ')//reads all the HTML files under the App.srcpath path  . PIPE ( Gulp.dest (App.devpath))  . Pipe (Gulp.dest (App.prdpath))  . Pipe ($.connect.reload ());})

Then the default method

Gulp.task (' Default ', [' serve ']); The default method

When we execute the gulp instruction, the default gulp serve is executed.

Three: The development of the page

Module Division: This application is divided into: Job search users

A: Page schema : The relative path in the page is dist and build.

1: Introduction of Angular.min.js and Index.js in index.html

<script src= "Vendor/angular/angular.min.js" charset= "Utf-8" ></script><script src= "Js/index.js" charset= "Utf-8" ></script>

Note: Here the index.js is all JS merged js file.

2: Create a new app.js under script

' Use strict '; Angular.module (' app ', [' ui.router ']); The global object Angular,module method can create a module, [] Inside the module's dependencies. The module needs to be started, the first is Angular.boostrap ()

　　

Two: Routing Configuration and installation :

1: Installation and reference

Bower Install--save Angular-ui-router

Then we introduce in the page: The vendor here is actually the file directory under Dist and build after packaging.

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

This module is then introduced into the App.js

Angular.module (' app ', [' ui.router ']);

2: In 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: New src>view>main.html

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

4: New Script>controller>mainctrl.js

' Use strict '; Angular.module (' app '). Controller (' Mainctrl ', [' $scope ', function ($scope) {}]);

Three: The development of the position page

1: Add in main.html

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

2: Add head template template>head.html

<div class= "Head" >  <span>10 sec Custom jobs </span>  <button> go to login </button></div>

3: Add Directive directive>head.js

' Use strict '; Angular.module (' app '). Directive (' apphead ', [function (cache) {  return {    restrict: ' A ',// A is to invoke the instruction replace:true in the attribute mode    ,//True, the template must have root element    Templateurl: ' view/template/head.html '  };}]);

4: Add Style file style>template>head.less

@import '. /variable.less ';. Head {  background-color: @headBgColor;  . H (+);  . LH (+);  padding:0 7px;  . Text {    color: @defaultColor;  }  . Custom {    background-color: @warnColor;    Border-color: @warnColor;    Color: @defaultColor;    border-style:dashed;    . MT (7);    . PL (a);    . PR (a);  }  . back-btn {    font-size:20px;    Width:1rem;    left:0;}  }

Style files need to be referenced in index.less, we can also write some CSS methods in index.less

@import ' template/head.less ';

New variable.less defines the theme color

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

New property.less defines some CSS with fixed values

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

　　

And then we're going to introduce CSS in index.html.

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

Four: The development of search page

1: Create global variables

In 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;  });}]);

How to use global variables: Dependency Injection and declaration:

Angular.module (' app '). Controller (' Searchctrl ', ['dict', ' $http ', ' $scope ', function (dict , $http, $scope) {

　　

2: Create filter

New 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;  };});

Use:

Find the page you want to use:

Ng-repeat= "Item in Data|filterbyobj:filterobj"

The data here is the list parameter of Filterbyobj (the filtered object), and the fliterobj is the parameter obj (filter condition).

V: page Animation switch angular.animate.js

1: Installation:

Bower Install--save Angular-animate

2: Use: Inject in app.js

Angular.module (' app ', [' ui.router ', ' ngcookies ', ' validation ', ' nganimate ']);

　　

　

project folder:

Bower_components: Third-party dependent SRC: Source build: Compiled development Environment Code dist: Post-compression production environment Code test: unit Test and integration test Code Node_modules:node installation Dependency Package

　　

WebApp based on the Angular+bower+glup