Angular boilerplate generator
Download as PPTX, PDF1 like1,036 views
This document discusses Yeoman generators for AngularJS applications, comparing ngBoilerplate and generator-angular. It provides instructions for setting up a project with ngBoilerplate, customizing Grunt tasks, installing dependencies with Bower, and tips for using Foundation with Sass. The presenter encourages learning Gulp and writing custom generators.
Ad
More Related Content
What's hot (20)
Similar to Angular boilerplate generator (20)
![Faster java ee builds with gradle [con4921]](https://cdn.slidesharecdn.com/ss_thumbnails/fasterjavaeebuildswithgradlecon4921-160927042155-thumbnail.jpg?width=560&fit=bounds)
Ad
Recently uploaded (20)
![Pixologic ZBrush Crack Plus Activation Key [Latest 2025] New Version](https://cdn.slidesharecdn.com/ss_thumbnails/fashionevolution2-250322112409-f76abaa7-250428124909-b51264ff-250504160528-fc2bb1c5-thumbnail.jpg?width=560&fit=bounds)
![Get & Download Wondershare Filmora Crack Latest [2025]](https://cdn.slidesharecdn.com/ss_thumbnails/revolutionizingresidentialwi-fi-250422112639-60fb726f-250429170801-59e1b240-thumbnail.jpg?width=560&fit=bounds)
Ad
Angular boilerplate generator
- 1. ngBoilerplate & generator-angular JS HCM Meetup – presented by Vincent De Smet
- 2. Why? • Yeoman - Stamp out a skeleton for your app quickly • Try: http://yeoman.io/codelab.html - very good intro! Uses generator-angular
- 3. Why ngBoilerplate? generator-angular • Package by layer • How to reuse? • How to debug? • Extensive sub-generators • Configuration options ngBoilerplate • Package by module • Lacks sub-generators • Lacks configuration options
- 4. Yeoman • Yo • Grunt / Gulp • Bower Get started: Install the ngBoilerplate generator globally: Using generator-ngbp.. Last updated on Aug, 28
- 5. Run generator of your choice
- 6. Use Bower package management • Uninstall what your project does not allow: • Install what your project requires: *i.e.: Foundation5+libsass instead of bootstrap+less **get sass as developer dependency only!
- 7. Manage dev dependencies with npm • Add grunt tasks with npm **grunt-sass is a SASS compiler using libsass instead of compass (ruby gem)
- 8. Customize your task runner (Grunt) • For example: to add sass compilation: 1. Load the grunt-sass tasks: 2. Configure the grunt tasks initConfig ngBoilerplate splits 1. File Config (meta data for task config) 2. Task Config & merges using lodash 3. Register Alias Task, Multi Task for task running goodness - or create your own custom task
- 9. Customize your task runner (Grunt) - 2 • In File config add sass info • In Task config configure grunt-sass task, multiple Task targets possible Templates are expanded recursively http://gruntjs.com/configuring-tasks#templates
- 10. Customize your task runner (Grunt) - 3 • A task config can have multiple targets, if no target specified on run, all targets run • A task exposes default options for configuration. Options can be configured at different target level • Most grunt tasks are file operations (source > destination), declaration formats: 1. Compact Format 2. Files Object Format 3. Files Array Format 4. Older formats (won’t go into this)
- 11. Grunt File operations: Compact Format • ngBoilerplate example: Example: This concat task – build_css target 1 source property ‘scr’ 1 destination property ‘dest’ This format can only have 1 source-destination pair.
- 12. Grunt File operations: Files Object Format • ngBoilerplate example: Example: This sass task – dist target The property name ‘css/app.css’ is the destination The property value ‘scss/app.scss’ is the source This format can have multiple source – destination pairs
- 13. Grunt File operations: Files Array Notation • ngBoilerplate example: Example: This copy task – build_app_assets target Array of (src – dest) pairs +properties This format can have multiple source – destination pairs This format can also have additional properties per mapping
- 14. Grunt file: globbing patterns / +properties • http://gruntjs.com/configuring-tasks#globbing-patterns • http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
- 15. Registering Tasks • Alias Task • Multi Task Runs a plugin task taking into account the target, looks for configuration in config object. • Basic/Custom Task Example:
- 16. generator-ngbp – interesting bits: karmaconfig MultiTask : automatically updates the karma config file with all dependencies required to run tests: this.fileSrc http://gruntjs.com/api/inside-tasks#this.filessrc will contain all src files specified in the config object properties for the karmaconfig multi-task Grunt.file.copy http://gruntjs.com/api/grunt.file#grunt.file.copy with a processFunction to render the karma-unit.tpl.js template (expanding all vendor_files.js specified in the grunt config)
- 17. generator-ngbp – interesting bits: • Bower installed dependencies thus need to be added manually to:
- 18. Foundation5 / libsass tricky bits • Where to get Foundation5 SASS files? Get sass as developer dependency only! • Copy missing scss files from foundation libsass repo
- 19. Foundation5 / libsass tricky bits • _settings.scss partial still missing? • Get it from Foundation5 / Compass ruby gem generated directory.. • Update imports • Update gruntfile for Foundation5 sass files and replace recess task by sass task in: • concat:build_css • Index:build & index:compile • delta:sass • build & compile alias tasks
- 20. Grunt tricks • Could automatically load grunt tasks: https://github.com/sindresorhus/load-grunt-tasks • Better to use https://github.com/shootaroo/jit-grunt for Just In Time loading of grunt tasks • Use https://github.com/sindresorhus/time-grunt to see the benefits • https://github.com/tschaub/grunt-newer to run grunt with newer files only • https://github.com/sindresorhus/grunt-concurrent to run tasks concurrently • Split grunt configuration files http://creynders.github.io/load-grunt-configs • Have fun with github pages, https://github.com/tschaub/grunt-gh-pages
- 21. What’s next? • Learn Gulp! http://gulpjs.com/ Grunt is old… Gulp is all the rage now. • Write your own Generator… http://yeoman.io/authoring/
- 22. Generator explosion! • http://www.dancancro.com/comparison-of-angularjs-application-starters/
- 23. About me Author: Vincent De Smet this presentation source code: https://github.com/so0k/ngbp-foundation-libsass • Presentation prepared for Javascript Ho Chi Minh City Meetup Group You can find us at: • http://www.meetup.com/JavaScript-Ho-Chi-Minh-City/ • https://www.facebook.com/JavaScriptHCMC • https://plus.google.com/u/0/communities/116105314977285194967 • http://www.slideshare.net/JavascriptMeetup
Editor's Notes
- #2: I’m not affiliated with yeoman, bower, grunt, zurb/foundation5 and all images belong to these companies and were blatantly ripped from their website
- #4: https://github.com/yeoman/generator-angular/issues/109 The organization by module was a requirement for the project – other generators / templates to consider: https://github.com/CleverStack/frontend-example-module/blob/master/module.js https://github.com/willogden/angular-acorn https://github.com/henyojess/generator-gulp-ng https://github.com/CleverStack/angular-seed https://github.com/pbojinov/generator-gulp-angular-less
- #5: Yo sets up the skeleton, can conditionally generate Grunt & Bower configurations Grunt is a build system that can perform simple tasks similar to make/bundle/.. But extension modules provide a lot more powerful workflow. Grunt is heavily file based and goals are reached through task configuration. Since January 2014, Gulp has gained a lot of popularity due to it’s more intuitive stream oriented approach of tasks (without the need of intermediary files) However, Gulp & Grunt do not have to be exclusive: https://github.com/gratimax/gulp-grunt Bower is a package manager used for dependency management on the front end. (todo: better understand relationship between bower and browserify)
- #6: https://github.com/thardy/generator-ngbp/commit/3f20f66c76781b978734c7500790edbe47060642
- #10: See grunt tricks on automatically loading all tasks or loading JIT
- #23: http://www.100percentjs.com/just-like-grunt-gulp-browserify-now/ https://github.com/yeoman/yeoman/issues/1232 https://www.npmjs.org/package/grunt-browserify-bower https://www.youtube.com/channel/UCm9iiIfgmVODUJxINecHQkA http://mindthecode.com/lets-build-an-angularjs-app-with-browserify-and-gulp/ http://mindthecode.com/writing-browserify-modules-for-your-angular-app/ Learn Browserify! http://browserify.org/articles.html
- #24: There are simply too many generators to keep track off. Every few months a new technology appears and in my opinion it’s impossible to expect 1 generator that caters for all possible combinations. It’s a matter of finding the best tool for the job and mastering the tools you need.