1. 1
Rapid Web Development with Angular,
Yeoman, Bower, Grunt
Hongbiao Chen
Sr. Principal Web Developer
Rapid Web Development With Angular, Yeoman, Bower, Grunt
David Close
Principal Web Developer

2. CUTTING EDGE 2015
Agenda
Rapid Web Development With Angular, Yeoman, Bower, Grunt 2
Unicon project1
Angular, Yeoman, Bower, Protractor, Grunt2
Demo3

3. CUTTING EDGE 2015
Project Unicon
3Rapid Web Development With Angular, Yeoman, Bower, Grunt

4. CUTTING EDGE 2015
Project Unicon - Cart
4Rapid Web Development With Angular, Yeoman, Bower, Grunt

5. CUTTING EDGE 2015
Project Unicon – Purchase flow
5Rapid Web Development With Angular, Yeoman, Bower, Grunt

6. CUTTING EDGE 2015
Project Unicon – Certificate enrollment flow
6Rapid Web Development With Angular, Yeoman, Bower, Grunt

7. CUTTING EDGE 2015
Technology & Tools
Rapid Web Development With Angular, Yeoman, Bower, Grunt 7
Angular1
Yeoman2
Bower3
Protractor4
Grunt5

8. CUTTING EDGE 2015
AngularJS
HTML Enhanced for Web Apps
8Rapid Web Development With Angular, Yeoman, Bower, Grunt

9. CUTTING EDGE 2015
AngularJS Concepts
9Rapid Web Development With Angular, Yeoman, Bower, Grunt

10. CUTTING EDGE 2015
Yeoman
The Web’s Scaffolding Tool for Modern Webapps
npm install –g yo
10Rapid Web Development With Angular, Yeoman, Bower, Grunt

11. CUTTING EDGE 2015
Generator ecosystem
11Rapid Web Development With Angular, Yeoman, Bower, Grunt

12. CUTTING EDGE 2015
Sub-generators from angular-fullstack
12Rapid Web Development With Angular, Yeoman, Bower, Grunt

13. CUTTING EDGE 2015
Bower
A package manager for the web
npm install –g bower
13Rapid Web Development With Angular, Yeoman, Bower, Grunt

14. 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.*"
}
}
14Rapid Web Development With Angular, Yeoman, Bower, Grunt

15. CUTTING EDGE 2015
Protractor
End to End Testing for AngularJS
http://angular.github.io/protractor/#/
15Rapid Web Development With Angular, Yeoman, Bower, Grunt

16. CUTTING EDGE 2015
Protractor
http://angular.github.io/protractor/#/
16Rapid Web Development With Angular, Yeoman, Bower, Grunt

17. 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',
};
17Rapid Web Development With Angular, Yeoman, Bower, Grunt

18. CUTTING EDGE 2015
Grunt
The JavaScript Task Runner
http://gruntjs.com/
18Rapid Web Development With Angular, Yeoman, Bower, Grunt

19. 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
19Rapid Web Development With Angular, Yeoman, Bower, Grunt

20. CUTTING EDGE 2015
Plugins
grunt-contrib-watch
grunt-contrib-jshint
grunt-contrib-uglify
grunt-contrib-copy
grunt-contrib-concat
grunt-karma
grunt-concurrent
20Rapid Web Development With Angular, Yeoman, Bower, Grunt

21. 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']);
21Rapid Web Development With Angular, Yeoman, Bower, Grunt

22. CUTTING EDGE 2015
grunt-contrib-watch
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['copy']
}
}
22Rapid Web Development With Angular, Yeoman, Bower, Grunt

23. CUTTING EDGE 2015
grunt-contrib-watch
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['jshint','uglify','copy']
}
}
23Rapid Web Development With Angular, Yeoman, Bower, Grunt

24. CUTTING EDGE 2015
grunt-contrib-jshint
jshint: {
options: {
indent: false,
curly: true
},
files: {
src: ['Gruntfile.js', 'src/**/*.js']
}
}
24Rapid Web Development With Angular, Yeoman, Bower, Grunt

25. CUTTING EDGE 2015
grunt-contrib-jasmine
jasmine: {
yourTask: {
src: 'src/**/*.js',
options: {
specs: 'spec/*Spec.js',
template: require('grunt-template-
jasmine-requirejs')
}
}
}
25Rapid Web Development With Angular, Yeoman, Bower, Grunt

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

27. CUTTING EDGE 2015
grunt-contrib-concat
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/built.js'
}
}
27Rapid Web Development With Angular, Yeoman, Bower, Grunt

28. CUTTING EDGE 2015
grunt-concurrent
grunt.initConfig({
concurrent: {
first: ['concat'],
second: ['uglify', 'imagemin']
}
});
grunt.registerTask('deploy',[
'concurrent:first',
'concurrent:second'
]);
28Rapid Web Development With Angular, Yeoman, Bower, Grunt

29. CUTTING EDGE 2015
Grunt
http://gruntjs.com
29Rapid Web Development With Angular, Yeoman, Bower, Grunt

30. 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'
]);
30Rapid Web Development With Angular, Yeoman, Bower, Grunt

31. CUTTING EDGE 2015
Work flow
Rapid Web Development With Angular, Yeoman, Bower, Grunt 31
yo angular-fullstack unicon1
yo angular-fullstack:service cart2
yo angular-fullstack:route order3
yo angular-fullstack:directive price-box4
yo angular-fullstack:directive shopping-guide5

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