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


CUTTING EDGE 2015

Project Unicon – Purchase flow


CUTTING EDGE 2015

Project Unicon – Certificate enrollment flow


CUTTING EDGE 2015

Technology & Tools


Angular1

Yeoman2

Bower3

Protractor4

Grunt5

CUTTING EDGE 2015

AngularJS

HTML Enhanced for Web Apps


CUTTING EDGE 2015

AngularJS Concepts


CUTTING EDGE 2015

Yeoman

The Web’s Scaffolding Tool for Modern Webapps

npm install –g yo

10


CUTTING EDGE 2015

Generator ecosystem

11


CUTTING EDGE 2015

Sub-generators from angular-fullstack

12


CUTTING EDGE 2015

Bower

A package manager for the web

npm install –g bower

13


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


CUTTING EDGE 2015

Protractor

End to End Testing for AngularJS

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

15


http://angular.github.io/protractor/%23/



CUTTING EDGE 2015

Protractor

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

16





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


CUTTING EDGE 2015

Grunt

The JavaScript Task Runner

http://gruntjs.com/

18


http://gruntjs.com/

http://gruntjs.com/

http://gruntjs.com/

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


CUTTING EDGE 2015

Plugins

grunt-contrib-watch

grunt-contrib-jshint

grunt-contrib-uglify

grunt-contrib-copy

grunt-contrib-concat

grunt-karma

grunt-concurrent

20


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


CUTTING EDGE 2015

grunt-contrib-watch

watch: {

scripts: {

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

tasks: ['copy']

}

}

22


CUTTING EDGE 2015

grunt-contrib-watch

watch: {

scripts: {

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

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

}

}

23


CUTTING EDGE 2015

grunt-contrib-jshint

jshint: {

options: {

indent: false,

curly: true

},

files: {

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

}

}

24


CUTTING EDGE 2015

grunt-contrib-jasmine

jasmine: {

yourTask: {

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

options: {

specs: 'spec/*Spec.js',

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

}

}

}

25


CUTTING EDGE 2015 26


CUTTING EDGE 2015

grunt-contrib-concat

concat: {

options: {

separator: ';'

},

dist: {

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

dest: 'dist/built.js'

}

}

27


CUTTING EDGE 2015

grunt-concurrent

grunt.initConfig({

concurrent: {

first: ['concat'],

second: ['uglify', 'imagemin']

}

});

grunt.registerTask('deploy',[

'concurrent:first',

'concurrent:second'

]);28


CUTTING EDGE 2015

Grunt

http://gruntjs.com

29


http://gruntjs.com/

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


CUTTING EDGE 2015

Work flow


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?

rapid development with angular

Documents