Opinionated workflow and toolkit used for Angular front-end development at Nodes, feel free to use it for your own projects aswell.
npm install -g grunt-cli bower yo generator-mpdes
Make a new directory, and
cd into it:
mkdir my-new-project && cd $_
The following grunt tasks are available:
- grunt serve - starts a browsersync server, serving files from the
- grunt dist - starts a browsersync server, serving the production ready files from the
- 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)
Available basic generators:
Available advanced generators:
├── 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
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
- All children of application are rendered in the
[ui-view="application"]which is located in the _application.template.html file.
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.
Add to index
By default, new scripts are added to the index.html file. However, this may not always be suitable. Some use cases:
- Manually added to the file
- Auto-added by a 3rd party plugin
- Using this generator as a subgenerator
To skip adding them to the index, pass in the skip-add argument:
yo nodes:service serviceName --skip-add
The following modules are always installed by the generator:
- angulartics + angulartics.google.analytics
The following components can be installed when running the generator:
- Foundation + Angular-foundation
- Greensock Animation Platform
- Lodash + ngLodash