Generator Angular Components ES6

A Yeoman generator to bootstrap Angular 1.5+ applications with ES6 and Webpack.

Suitable for component-based application structure. Facilitates creation of components tree.

Contribution

It's a very early version of the generator. Any feedback is welcome.

TODO:

~~Add component generator~~
Add routing support
Add webpack dev server support

Setting up project

Install: npm install -g yo generator-angular-components-es6
Run: yo angular-components-es6

Commands

yo angular-components-es6 shows a wizard for generation of a new generator.
yo angular-components-es6:component generates new component in your application. Supports nested components. E.g. 'parent/nested' will generate a component with name 'nested' in /app/components/parent directory.

Generated Structure

angular-webpack-es6/
 ├──app/                                     * source files to be compiled to javascript
 |   ├──components                           * Root directory for your application components
 |   └──%appname%.js                         * entry file for our Angular application
 ├──webpack.config.js                        * webpack config
 └──package.json                             * package.json file

Component Structure

Generated component directory has the following structure

app/components/awesome
 ├──nestedComponent/                         * Nested component used by this component.
 ├──awesome-component.js                     * Angular module and component registration file. Includes Angular 1.5+ component registration logic.
 ├──awesome-controller.js                    * Angular controller for your component.
 ├──awesome.html                             * Angular template for your component.
 └──awesome.scss                             * Styles for your component

Webpack features

Bundles and minifies all javascript and css files.
Copies all image files to output folder and gives unique names to images based on content hash.
Generates a single sprite images for all images in /app/shared/images/sprite directory.
Gives unique names to assets based on its content hash which help busting cache for changed assets.
Includes all angular templates into js file and adds them to template cache.
Enables LiveReload for dev configuration