Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
1
Rapid Web Development with Angular,
Yeoman, Bower, Grunt
Hongbiao Chen
Sr. Principal Web Developer
Rapid Web Development...
CUTTING EDGE 2015
Agenda
Rapid Web Development With Angular, Yeoman, Bower, Grunt 2
Unicon project1
Angular, Yeoman, Bower...
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
Pr...
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
10Rapid Web Development With Angu...
CUTTING EDGE 2015
Generator ecosystem
11Rapid Web Development With Angular, Yeoman, Bower, Grunt
CUTTING EDGE 2015
Sub-generators from angular-fullstack
12Rapid Web Development With Angular, Yeoman, Bower, Grunt
CUTTING EDGE 2015
Bower
A package manager for the web
npm install –g bower
13Rapid Web Development With Angular, Yeoman, B...
CUTTING EDGE 2015
Bower.json
{
"name": "unicon",
"version": "0.0.0",
"dependencies": {
"angular": ">=1.2.*",
"json3": "~3....
CUTTING EDGE 2015
Protractor
End to End Testing for AngularJS
http://angular.github.io/protractor/#/
15Rapid Web Developme...
CUTTING EDGE 2015
Protractor
http://angular.github.io/protractor/#/
16Rapid Web Development With Angular, Yeoman, Bower, G...
CUTTING EDGE 2015
protractor.conf.js
'use strict';
exports.config = {
allScriptsTimeout: 110000,
baseUrl: 'http://localhos...
CUTTING EDGE 2015
Grunt
The JavaScript Task Runner
http://gruntjs.com/
18Rapid Web Development With Angular, Yeoman, Bower...
CUTTING EDGE 2015
Installation
//install the grunt-cli globally
$ npm install -g grunt-cli
//do this once for each project...
CUTTING EDGE 2015
Plugins
grunt-contrib-watch
grunt-contrib-jshint
grunt-contrib-uglify
grunt-contrib-copy
grunt-contrib-c...
CUTTING EDGE 2015
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
// task configurations go here
});
};...
CUTTING EDGE 2015
grunt-contrib-watch
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['copy']
}
}
22Rapid Web Developm...
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', '...
CUTTING EDGE 2015
grunt-contrib-jasmine
jasmine: {
yourTask: {
src: 'src/**/*.js',
options: {
specs: 'spec/*Spec.js',
temp...
CUTTING EDGE 2015 26Rapid Web Development With Angular, Yeoman, Bower, Grunt
CUTTING EDGE 2015
grunt-contrib-concat
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/bu...
CUTTING EDGE 2015
grunt-concurrent
grunt.initConfig({
concurrent: {
first: ['concat'],
second: ['uglify', 'imagemin']
}
})...
CUTTING EDGE 2015
Grunt
http://gruntjs.com
29Rapid Web Development With Angular, Yeoman, Bower, Grunt
CUTTING EDGE 2015
Gruntfile.js
grunt.registerTask('build', [
'clean:dist',
'injector:sass',
'concurrent:dist',
'injector',...
CUTTING EDGE 2015
Work flow
Rapid Web Development With Angular, Yeoman, Bower, Grunt 31
yo angular-fullstack unicon1
yo an...
CUTTING EDGE 2015Rapid Web Development With Angular, Yeoman, Bower, Grunt 32
Questions?
Nächste SlideShare
Wird geladen in …5
×

Rapid development with angular

318 Aufrufe

Veröffentlicht am

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

Rapid development with angular

  1. 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. 2. CUTTING EDGE 2015 Agenda Rapid Web Development With Angular, Yeoman, Bower, Grunt 2 Unicon project1 Angular, Yeoman, Bower, Protractor, Grunt2 Demo3
  3. 3. CUTTING EDGE 2015 Project Unicon 3Rapid Web Development With Angular, Yeoman, Bower, Grunt
  4. 4. CUTTING EDGE 2015 Project Unicon - Cart 4Rapid Web Development With Angular, Yeoman, Bower, Grunt
  5. 5. CUTTING EDGE 2015 Project Unicon – Purchase flow 5Rapid Web Development With Angular, Yeoman, Bower, Grunt
  6. 6. CUTTING EDGE 2015 Project Unicon – Certificate enrollment flow 6Rapid Web Development With Angular, Yeoman, Bower, Grunt
  7. 7. CUTTING EDGE 2015 Technology & Tools Rapid Web Development With Angular, Yeoman, Bower, Grunt 7 Angular1 Yeoman2 Bower3 Protractor4 Grunt5
  8. 8. CUTTING EDGE 2015 AngularJS HTML Enhanced for Web Apps 8Rapid Web Development With Angular, Yeoman, Bower, Grunt
  9. 9. CUTTING EDGE 2015 AngularJS Concepts 9Rapid Web Development With Angular, Yeoman, Bower, Grunt
  10. 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. 11. CUTTING EDGE 2015 Generator ecosystem 11Rapid Web Development With Angular, Yeoman, Bower, Grunt
  12. 12. CUTTING EDGE 2015 Sub-generators from angular-fullstack 12Rapid Web Development With Angular, Yeoman, Bower, Grunt
  13. 13. CUTTING EDGE 2015 Bower A package manager for the web npm install –g bower 13Rapid Web Development With Angular, Yeoman, Bower, Grunt
  14. 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. 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. 16. CUTTING EDGE 2015 Protractor http://angular.github.io/protractor/#/ 16Rapid Web Development With Angular, Yeoman, Bower, Grunt
  17. 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. 18. CUTTING EDGE 2015 Grunt The JavaScript Task Runner http://gruntjs.com/ 18Rapid Web Development With Angular, Yeoman, Bower, Grunt
  19. 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. 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. 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. 22. CUTTING EDGE 2015 grunt-contrib-watch watch: { scripts: { files: ['src/**/*.js'], tasks: ['copy'] } } 22Rapid Web Development With Angular, Yeoman, Bower, Grunt
  23. 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. 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. 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. 26. CUTTING EDGE 2015 26Rapid Web Development With Angular, Yeoman, Bower, Grunt
  27. 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. 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. 29. CUTTING EDGE 2015 Grunt http://gruntjs.com 29Rapid Web Development With Angular, Yeoman, Bower, Grunt
  30. 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. 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. 32. CUTTING EDGE 2015Rapid Web Development With Angular, Yeoman, Bower, Grunt 32 Questions?

×