Rapid development with angular
Download as PPTX, PDF0 likes342 views
The document discusses using Angular, Yeoman, Bower, Grunt and other tools for rapid web development. It introduces the tools and how they can be used together in a workflow. Specifically, it covers using Yeoman to generate an Angular application, adding services and routes, installing dependencies with Bower, testing with Protractor, automating tasks with Grunt, and an example workflow of generating an application with Angular generators.
![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](https://image.slidesharecdn.com/ee5313f7-c877-43ed-99f1-ba2ffbf4a469-150604222323-lva1-app6891/85/Rapid-development-with-angular-17-320.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']);
21Rapid Web Development With Angular, Yeoman, Bower, Grunt](https://image.slidesharecdn.com/ee5313f7-c877-43ed-99f1-ba2ffbf4a469-150604222323-lva1-app6891/85/Rapid-development-with-angular-21-320.jpg)
![CUTTING EDGE 2015
grunt-contrib-watch
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['copy']
}
}
22Rapid Web Development With Angular, Yeoman, Bower, Grunt](https://image.slidesharecdn.com/ee5313f7-c877-43ed-99f1-ba2ffbf4a469-150604222323-lva1-app6891/85/Rapid-development-with-angular-22-320.jpg)
![CUTTING EDGE 2015
grunt-contrib-watch
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['jshint','uglify','copy']
}
}
23Rapid Web Development With Angular, Yeoman, Bower, Grunt](https://image.slidesharecdn.com/ee5313f7-c877-43ed-99f1-ba2ffbf4a469-150604222323-lva1-app6891/85/Rapid-development-with-angular-23-320.jpg)
![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](https://image.slidesharecdn.com/ee5313f7-c877-43ed-99f1-ba2ffbf4a469-150604222323-lva1-app6891/85/Rapid-development-with-angular-24-320.jpg)
![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](https://image.slidesharecdn.com/ee5313f7-c877-43ed-99f1-ba2ffbf4a469-150604222323-lva1-app6891/85/Rapid-development-with-angular-27-320.jpg)
![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](https://image.slidesharecdn.com/ee5313f7-c877-43ed-99f1-ba2ffbf4a469-150604222323-lva1-app6891/85/Rapid-development-with-angular-28-320.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'
]);
30Rapid Web Development With Angular, Yeoman, Bower, Grunt](https://image.slidesharecdn.com/ee5313f7-c877-43ed-99f1-ba2ffbf4a469-150604222323-lva1-app6891/85/Rapid-development-with-angular-30-320.jpg)
Rapid development with angular
- 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?