# generator-rollbread-angular > Yeoman generator for Angular1 projects, built off of the cg-angular project. Latest version **0.1.0** (published 2017-07-04) · 0 weekly downloads ## Install ```sh npm install generator-rollbread-angular pnpm add generator-rollbread-angular yarn add generator-rollbread-angular bun add generator-rollbread-angular ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.0 | | Published | 2017-07-04 | | First published | 2017-05-27 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Node | >=0.8.0 | | Dependencies | 5 | | Known vulnerabilities | 0 (+3 in 2 direct dependencies) | | Install scripts | no | | Author | Brad "EbekFrostblade" Jones | | Maintainers | ebekfrostblade | | Keywords | yeoman-generator, angular | ## Links - npm: https://www.npmjs.com/package/generator-rollbread-angular - Repository: https://github.com/EbekFrostblade/generator-rollbread-angular - Issues: https://github.com/EbekFrostblade/generator-rollbread-angular/issues - npm.io page: https://npm.io/package/generator-rollbread-angular ## Dependencies (5) - [chalk](https://npm.io/package/chalk.md) ~0.4.0 - [underscore](https://npm.io/package/underscore.md) ~1.5 - [ng-parse-module](https://npm.io/package/ng-parse-module.md) ~0.1.0 - [yeoman-generator](https://npm.io/package/yeoman-generator.md) ~0.16 - [underscore.string](https://npm.io/package/underscore.string.md) ~2.3 ## Recent versions - 0.1.0 (latest) — 2017-07-04 - 0.0.1 — 2017-05-27 ## README #generator-rollbread-angular >Yeoman Generator for AngularJS 1.5 Projects This generator is built on the foundations of the excellent [generator-cg-angular](https://github.com/cgross/generator-cg-angular) project. I've used that generator for years, and after a long time, I decided to make my own version of it. So, here we are. The Major Changes * Uses SASS instead of LESS. * Bourbon and Neat are included to add some more functionality out of the box. * Adds a seperate build command for services and factories, as I prefer to use them for different tasks. * Renamed the generator "partial" to "view". * The file directory names are pluralized, for clarity's sake. Features * Provides a directory structure geared towards large AngularJS 1.5 projects. * Each controller, service, factory, filter, and directive are placed in their own file. * All files related to a conceptual unit are placed together. For example, the controller, HTML, SASS, and unit test for a partial are placed together in the same directory. * Provides a ready-made Grunt build that produces an extremely optimized distribution. * Build uses [grunt-ng-annotate](https://github.com/olov/ng-annotate) so you don't have to use the Angular injection syntax for safe minification (i.e. you dont need `$inject` or `(['$scope','$http',...`. * `grunt serve` task allows you to run a simple development server with watch/livereload enabled. Additionally, the appropriate unit tests are run for the changed files. * Integrates Bower for package management * Includes Yeoman subgenerators for directives, services, factories, views, filters, and modules. * Integrates SASS and includes Bootstrap via the bootstrap-SASS project allowing you to reuse Bootstrap vars/mixins/etc. * Easily Testable - Each sub-generator creates a skeleton unit test. Unit tests can be run via `grunt test` and they run automatically during the grunt watch that is active during `grunt serve`. To-Do * Add ESLint back to the code base. * Seperate the grunt tasks into seperate files for easier management. Directory Layout ------------- All subgenerators prompt the user to specify where to save the new files. Thus you can create any directory structure you desire, including nesting. The generator will create a handful of files in the root of your project including `index.html`, `app.js`, and `app.sass`. You determine how the rest of the project will be structured. In this example, the user has chosen to group the app into an `admin` folder, a `search` folder, and a `service` folder. app.scss ....................... main app-wide styles app.js ......................... angular module initialization and route setup index.html ..................... main HTML file Gruntfile.js ................... Grunt build file /admin ......................... example admin module folder admin.js ..................... admin module initialization and route setup admin.scss ................... admin module SASS /admin-directive1 ............ angular directives folder admin-directive1.js ........ example simple directive admin-directive1-spec.js.... example simple directive unit test /admin-directive2 ............ example complex directive (contains external partial) admin-directive2.js ........ complex directive javascript admin-directive2.html ...... complex directive partial admin-directive2.scss ...... complex directive SASS admin-directive2-spec.js ... complex directive unit test /admin-partial ............... example partial admin-partial.html ......... example partial html admin-partial.js ........... example partial controller admin-partial.scss ......... example partial SASS admin-partial-spec.js ...... example partial unit test /search ........................ example search component folder my-filter.js ................. example filter my-filter-spec.js ............ example filter unit test /search-partial .............. example partial search-partial.html ........ example partial html search-partial.js .......... example partial controller search-partial.scss ........ example partial SASS search-partial-spec.js ..... example partial unit test /service ....................... angular services folder my-service.js .............. example service my-service-spec.js ......... example service unit test my-service2.js ............. example service my-service2-spec.js ........ example service unit test /img ........................... images (not created by default but included in /dist if added) /dist .......................... distributable version of app built using grunt and Gruntfile.js /bower_component................ 3rd party libraries managed by bower /node_modules .................. npm managed libraries used by grunt Getting Started ------------- Prerequisites: Node, Grunt, Yeoman, and Bower. Once Node is installed, do: npm install -g grunt-cli yo bower Next, install this generator: npm install -g generator-rollbread-angular To create a project: mkdir MyNewBakeryApp cd MyNewBakeryApp yo rollbread-angular Grunt Tasks ------------- Now that the project is created, you have 3 simple Grunt commands available: grunt serve #This will run a development server with watch & livereload enabled. grunt test #Run local unit tests. grunt build #Places a fully optimized (minified, concatenated, and more) in /dist When `grunt serve` is running, any changed javascript files will be linted using JSHint as well as have their appropriate unit tests executed. Only the unit tests that correspond to the changed file will be run. This allows for an efficient test driven workflow. Yeoman Subgenerators ------------- There are a set of subgenerators to initialize empty Angular components. Each of these generators will: * Create one or more skeleton files (javascript, SCSS, html, spec etc) for the component type. * Update index.html and add the necessary `script` tags. * Update app.scss and add the @import as needed. * For views, update the app.js, adding the necessary route call if a route was entered in the generator prompts. There are generators for `directive`,`view`,`service`, `factory`, `filter`, `module`, and `modal`. Running a generator: yo rollbread-angular:directive my-awesome-directive yo rollbread-angular:view my-view yo rollbread-angular:service my-service yo rollbread-angular:factory my-factory yo rollbread-angular:filter my-filter yo rollbread-angular:module my-module yo rollbread-angular:modal my-modal The name paramater passed (i.e. 'my-awesome-directive') will be used as the file names. The generators will derive appropriate class names from this parameter (ex. 'my-awesome-directive' will convert to a class name of 'MyAwesomeDirective'). Each sub-generator will ask for the folder in which to create the new skeleton files. You may override the default folder for each sub-generator in the `.yo-rc.json` file. The modal subgenerator is a convenient shortcut to create views that work as modals for Bootstrap v3 and Angular-UI-Bootstrap v1.3 (both come preconfigured with this generator). If you choose not to use either of these libraries, simply don't use the modal subgenerator. Subgenerators are also customizable. Please read [CUSTOMIZING.md](CUSTOMIZING.md) for details. Submodules ------------- Submodules allow you to more explicitly separate parts of your application. Use the `yo cg-angular:module my-module` command and specify a new subdirectory to place the module into. Once you've created a submodule, running other subgenerators will now prompt you to select the module in which to place the new component. Preconfigured Libraries ------------- The new app will have a handful of preconfigured libraries included. This includes Angular 1.5, Bootstrap 3, AngularUI Bootstrap, JQuery, SASS, Bourbon, Neat, and Momentx. You may of course add to or remove any of these libraries. But the work to integrate them into the app and into the build process has already been done for you. Build Process ------------- The project will include a ready-made Grunt build that will: * Build all the SCSS files into one minified CSS file. * Uses [grunt-angular-templates](https://github.com/ericclemmons/grunt-angular-templates) to turn all your templates into Javascript. * Uses [grunt-ng-annotate](https://github.com/olov/ng-annotate) to preprocess all Angular injectable methods and make them minification safe. Thus you don't have to use the array syntax. * Concatenates and minifies all Javascript into one file. * Replaces all appropriate script references in `index.html` with the minified CSS and JS files. * (Optionally) Minifies any images in `/img`. * Minifies the `index.html`. * Copies any extra files necessary for a distributable build (ex. Font-Awesome font files, etc). The resulting build loads only a few highly compressed files. The build process uses [grunt-dom-munger](https://github.com/cgross/grunt-dom-munger) to pull script references from the `index.html`. This means that **your index.html is the single source of truth about what makes up your app**. Adding a new library, new controller, new directive, etc does not require that you update the build file. Also the order of the scripts in your `index.html` will be maintained when they're concatenated. Importantly, grunt-dom-munger uses CSS attribute selectors to manage the parsing of the script and link tags. Its very easy to exclude certain scripts or stylesheets from the concatenated files. This is often the case if you're using a CDN. This can also be used to prevent certain development scripts from being included in the final build. * To prevent a script or stylesheet from being included in concatenation, put a `data-concat="false"` attribute on the link or script tag. This is currently applied for the `livereload.js` and `sass.js` script tags. * To prevent a script or link tag from being removed from the finalized `index.html`, use a `data-remove="false"` attribute. Release History ------------- --- _Source: https://npm.io/package/generator-rollbread-angular · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._