README
NooGie - AngularJS Component Generator
Noogie is a Yeoman generator that was created to help developers build Angular 1.5+ applications using a component-first approach.
What about Angular 2.0? We'll get to that momentarily...
The generator scaffolds "component bundles". These bundles contain the HTML, CSS (Noogie requires Sass) and JS files that make up Angular "components". This leads to a more manageable and reusable codebase and will help developers pave the way for Angular 2.0 adoption.
Noogie scaffolds component bundles in one of two ways, (1) using the new 1.5 Component API or also using (2) traditional Angular Directives.
Sample Component Bundle (as an Anguar 1.5 Component):
├── components/
│ ├── my-noogie-component
│ │ ├── my-noogie-component.html
│ │ ├── my-noogie-component.scss
│ │ ├── my-noogie-component-component.js
Sample Component Bundle (as a traditional Directive):
├── components/
│ ├── my-noogie-directive
│ │ ├── my-noogie-component.html
│ │ ├── my-noogie-component.scss
│ │ ├── my-noogie-directive.js
Angular 2.0
Noogie does not yet support Angular 2.0. The short-term goal of this project is to build Angular 1.x projects in a way that provides a 2.0 upgrade path in accordance with Angular's incremental hybrid approach to upgrading. There is some work and fundamental understanding on our end that needs to occur before this can happen. In the meantime, please take advantage of the generators Noogie provides.
Available Generators
yo noogie:directive
Builds a Directive Component bundleyo noogie:component
Builds an Angular 1.5 Component bundleyo noogie:controller
Builds an Angular controlleryo noogie:factory
Builds an Angular factoryyo noogie:service
Builds an Angular serviceyo noogie:route
Builds an HTML template and automatically wires up the new route into the app router. This also creates and associates a boilerplate controller file.
Installation & Getting Started
The generator uses yeoman, gulp and bower. If you do not have these dependencies installed, please install them using: npm install --global yo gulp bower
- Install the generator:
npm install --global generator-noogie
- Once complete, run
yo noogie
to scaffold your webapp - Run
gulp serve
to serve, preview and watch for changes - Run
bower install --save <package>
to install frontend dependencies - Run
gulp
to build your webapp for production - Run
gulp serve:dist
to preview the production build
Features
- Follows (very closely) the code conventions found in the Angular endorsed Angular 1 Style Guide
- Newly generated component bundle files are auto-injected into the index.html
- Component Sass partials are auto-imported into a main.scss file
- Includes Sass and Bootstrap (currently Sass is required)
- It's called Noogie. What's not to love about that?
Coming Soon
- Dynamic module loading (we are currently evaluating SystemJS and webpack)
- ES2015 style and compilation using Babel
- TypeScript support
Contribute
Contributors are welcome. Please use the dev branch and fork/submit pull requests. Approved PR's will be merged into master on a forthcoming release cadence.