rapid development with angular

1

Rapid Web Development with Angular, Yeoman, Bower, GruntHongbiao ChenSr. Principal Web Developer

Rapid Web Development With Angular, Yeoman, Bower, Grunt

David ClosePrincipal Web Developer

CUTTING EDGE 2015

Agenda

Rapid Web Development With Angular, Yeoman, Bower, Grunt 2

Unicon project1

Angular, Yeoman, Bower, Protractor, Grunt2

Demo3

CUTTING EDGE 2015

Project Unicon

3Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Project Unicon - Cart

4Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Project Unicon – Purchase flow

5Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Project Unicon – Certificate enrollment flow

6Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Technology & Tools

Rapid Web Development With Angular, Yeoman, Bower, Grunt 7

Angular1

Yeoman2

Bower3

Protractor4

Grunt5

CUTTING EDGE 2015

AngularJS

HTML Enhanced for Web Apps

8Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

AngularJS Concepts

9Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Yeoman

The Web’s Scaffolding Tool for Modern Webapps

npm install –g yo

10

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Generator ecosystem

11

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Sub-generators from angular-fullstack

12

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Bower

A package manager for the web

npm install –g bower

13

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Bower.json{ "name": "unicon", "version": "0.0.0", "dependencies": { "angular": ">=1.2.*", "json3": "~3.3.1", "es5-shim": "~3.0.1", "jquery": "~1.11.0", "bootstrap-sass-official": "~3.1.1", "bootstrap": "~3.1.1", "angular-resource": ">=1.2.*", "angular-cookies": ">=1.2.*", "angular-sanitize": ">=1.2.*", "angular-bootstrap": "~0.11.0", "font-awesome": ">=4.1.0", "lodash": "~2.4.1", "angular-ui-router": "~0.2.10" }, "devDependencies": { "angular-mocks": ">=1.2.*", "angular-scenario": ">=1.2.*" }}

14

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Protractor

End to End Testing for AngularJS

http://angular.github.io/protractor/#/

15

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Protractor

http://angular.github.io/protractor/#/

16

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

protractor.conf.js'use strict';

exports.config = {

allScriptsTimeout: 110000,

baseUrl: 'http://localhost:' + (process.env.PORT || '9000'),

specs: [ 'e2e/**/*.spec.js' ],

capabilities: { 'browserName': 'chrome' },

framework: 'jasmine',

};

17

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Grunt

The JavaScript Task Runner

http://gruntjs.com/

18

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Installation

//install the grunt-cli globally

$ npm install -g grunt-cli

//do this once for each project, or after modifying the package.json file

$ npm install

$ grunt

19

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Plugins

grunt-contrib-watch

grunt-contrib-jshint

grunt-contrib-uglify

grunt-contrib-copy

grunt-contrib-concat

grunt-karma

grunt-concurrent

20

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Gruntfile.js

module.exports = function(grunt) {

grunt.initConfig({

// task configurations go here

});

};

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-concat');

grunt.registerTask('default', ['uglify']);

grunt.registerTask('deploy', ['concat', 'uglify']);

21

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

grunt-contrib-watch

watch: {

scripts: {

files: ['src/**/*.js'],

tasks: ['copy']

}

}

22

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

grunt-contrib-watch

watch: {

scripts: {

files: ['src/**/*.js'],

tasks: ['jshint','uglify','copy']

}

}

23

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

grunt-contrib-jshint

jshint: {

options: {

indent: false,

curly: true

},

files: {

src: ['Gruntfile.js', 'src/**/*.js']

}

}

24

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

grunt-contrib-jasmine

jasmine: {

yourTask: {

src: 'src/**/*.js',

options: {

specs: 'spec/*Spec.js',

template: require('grunt-template-jasmine-requirejs')

}

}

}

25

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015 26

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

grunt-contrib-concat

concat: {

options: {

separator: ';'

},

dist: {

src: ['src/**/*.js'],

dest: 'dist/built.js'

}

}

27

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

grunt-concurrent

grunt.initConfig({

concurrent: {

first: ['concat'],

second: ['uglify', 'imagemin']

}

});

grunt.registerTask('deploy',[

'concurrent:first',

'concurrent:second'

]);28

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Grunt

http://gruntjs.com

29

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Gruntfile.js grunt.registerTask('build', [ 'clean:dist', 'injector:sass', 'concurrent:dist', 'injector', 'wiredep', 'useminPrepare', 'autoprefixer', 'ngtemplates', 'concat', 'ngAnnotate', 'copy:dist', 'cdnify', 'cssmin', 'uglify', 'rev', 'usemin' ]);

grunt.registerTask('default', [ 'newer:jshint', 'test', 'build' ]);

30

Rapid Web Development With Angular, Yeoman, Bower, Grunt

CUTTING EDGE 2015

Work flow

Rapid Web Development With Angular, Yeoman, Bower, Grunt 31

yo angular-fullstack unicon 1

yo angular-fullstack:service cart2

yo angular-fullstack:route order3

yo angular-fullstack:directive price-box4

yo angular-fullstack:directive shopping-guide5

CUTTING EDGE 2015Rapid Web Development With Angular, Yeoman, Bower, Grunt 32

Questions?