Generator-nodes NPM

generator nodes

Opinionated workflow and toolkit used for Angular front-end development at Nodes, feel free to use it for your own projects aswell.

Usage:

Prerequisites:

Install yo, grunt-cli, bower and generator-nodes globally:

npm install -g grunt-cli bower yo generator-mpdes

Make a new directory, and cd into it:

mkdir my-new-project && cd $_

Run yo nodes:

yo nodes

Grunt

The following grunt tasks are available:

grunt serve - starts a browsersync server, serving files from the app folder
grunt dist - starts a browsersync server, serving the production ready files from the dist folder
grunt build - builds the project (please have a look at the gruntfile to see the steps involved in this process, and have a look at the minification-safe section of this readme)

Generators

Available basic generators:

nodes (aka nodes:app)

nodes:constant
nodes:value
nodes:controller
nodes:factory
nodes:service
nodes:decorator
nodes:provider
nodes:directive
nodes:filter
nodes:route
nodes:module
nodes:html
nodes:scss
nodes:font

Available advanced generators:

nodes:state
nodes:child-state
nodes:model
nodes:component

Project structure

├── app
    ├── assets              - fonts, images, etc…
    ├── common              - Common components, sharable across modules (directives, filters, etc.)
    ├── config              - Project specific configuration files (endpoints, config/bootstrap etc.)
    ├── models              - API Communication, Buisness Models etc.
    ├── modules             - Views / Routes
    └── styles				- Application wide styles

State structure

In our experience, having some "high level" wrapper states around an application greatly improves flexibility and removes alot of noice from the $rootScope. With this in mind we have structured our states like this:

All states are children of the application state which is an abstract state
The application state is rendered in the [ui-view="root"] element.
All children of application are rendered in the [ui-view="application"] which is located in the _application.template.html file.

Minification safe

tl;dr: You don't need to write annotated code as the build step will handle it for you.

By default, generators produce unannotated code. Without annotations, AngularJS's DI system will break when minified. Typically, these annotations that make minification safe are added automatically at build-time, after application files are concatenated, but before they are minified. The annotations are important because minified code will rename variables, making it impossible for AngularJS to infer module names based solely on function parameters.

The recommended build process uses ng-annotate, a tool that automatically adds these annotations. However, if you'd rather not use it, you have to add these annotations manually yourself. Why would you do that though? If you find a bug in the annotated code, please file an issue at ng-annotate.