rapid development with angular
TRANSCRIPT
![Page 1: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/1.jpg)
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
![Page 2: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/2.jpg)
CUTTING EDGE 2015
Agenda
Rapid Web Development With Angular, Yeoman, Bower, Grunt 2
Unicon project1
Angular, Yeoman, Bower, Protractor, Grunt2
Demo3
![Page 3: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/3.jpg)
CUTTING EDGE 2015
Project Unicon
3Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 4: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/4.jpg)
CUTTING EDGE 2015
Project Unicon - Cart
4Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 5: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/5.jpg)
CUTTING EDGE 2015
Project Unicon – Purchase flow
5Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 6: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/6.jpg)
CUTTING EDGE 2015
Project Unicon – Certificate enrollment flow
6Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 7: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/7.jpg)
CUTTING EDGE 2015
Technology & Tools
Rapid Web Development With Angular, Yeoman, Bower, Grunt 7
Angular1
Yeoman2
Bower3
Protractor4
Grunt5
![Page 8: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/8.jpg)
CUTTING EDGE 2015
AngularJS
HTML Enhanced for Web Apps
8Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 9: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/9.jpg)
CUTTING EDGE 2015
AngularJS Concepts
9Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 10: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/10.jpg)
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
![Page 11: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/11.jpg)
CUTTING EDGE 2015
Generator ecosystem
11
Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 12: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/12.jpg)
CUTTING EDGE 2015
Sub-generators from angular-fullstack
12
Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 13: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/13.jpg)
CUTTING EDGE 2015
Bower
A package manager for the web
npm install –g bower
13
Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 14: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/14.jpg)
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
![Page 15: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/15.jpg)
CUTTING EDGE 2015
Protractor
End to End Testing for AngularJS
http://angular.github.io/protractor/#/
15
Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 16: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/16.jpg)
CUTTING EDGE 2015
Protractor
http://angular.github.io/protractor/#/
16
Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 17: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/17.jpg)
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
![Page 18: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/18.jpg)
CUTTING EDGE 2015
Grunt
The JavaScript Task Runner
http://gruntjs.com/
18
Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 19: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/19.jpg)
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
![Page 20: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/20.jpg)
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
![Page 21: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/21.jpg)
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
![Page 22: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/22.jpg)
CUTTING EDGE 2015
grunt-contrib-watch
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['copy']
}
}
22
Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 23: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/23.jpg)
CUTTING EDGE 2015
grunt-contrib-watch
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['jshint','uglify','copy']
}
}
23
Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 24: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/24.jpg)
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
![Page 25: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/25.jpg)
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
![Page 26: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/26.jpg)
CUTTING EDGE 2015 26
Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 27: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/27.jpg)
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
![Page 28: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/28.jpg)
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
![Page 29: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/29.jpg)
CUTTING EDGE 2015
Grunt
http://gruntjs.com
29
Rapid Web Development With Angular, Yeoman, Bower, Grunt
![Page 30: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/30.jpg)
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
![Page 31: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/31.jpg)
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
![Page 32: Rapid development with angular](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c4c9cebb61ebe13f8b4615/html5/thumbnails/32.jpg)
CUTTING EDGE 2015Rapid Web Development With Angular, Yeoman, Bower, Grunt 32
Questions?