For scaffolding enterprise AngularJS SPA.
This generator is a fork of cc-angular, with additional improvments:
- Bower components auto-injected into index.html (by wiredep package)
- Added restangular module (for fast building REST-full interaction.)
- separated API develop/production configuration
rest_service- add restangularzed service.
npm install -g grunt-cli yo bower
Next, install this generator:
# for global use, otherwise install in project npm install -g generator-spa-angular
To create a project:
mkdir VeryNiceApp cd VeryNiceApp #if not installed globally, install it in the project npm install generator-spa-angular # let's generate the app yo spa-angular #we need webdriver for protractor ./node_modules/grunt-protractor-runner/node_modules/protractor/bin/webdriver-manager update After creating project, edit `conf/api-config.dev.js` and `conf/api-config.prod.js` (set valid api url's)
Now, 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
There are a set of subgenerators to initialize empty Angular components. Each of these generators will:
- Update index.html and add the necessary
- Update app.less and add the @import as needed.
- For partials, update the app.js, adding the necessary route call if a route was entered in the generator prompts.
There are generators for
Running a generator:
yo spa-angular:directive my-awesome-directive yo spa-angular:partial my-partial yo spa-angular:service my-service yo spa-angular:rest_service my-service endpoint yo spa-angular:filter my-filter yo spa-angular:module my-module
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
Subgenerators are also customizable. Please read CUSTOMIZING.md for details.
Submodules allow you to more explicitly separate parts of your application. Use the
yo spa-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.
Also submodules have the appCore.module as dependency, because this module manages all 3thrd party dependencies
The new app will have a handful of preconfigured libraries included. This includes Angular 1.3, Bootstrap 3, AngularUI Utils, FontAwesome 4, JQuery 2, Underscore 1.7, LESS 1.6, and Moment 2.5. 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.
The project will include a ready-made Grunt build that will:
- Build all the LESS files into one minified CSS file.
- Uses grunt-ng-annotate to preprocess all Angular injectable methods and make them minification safe. Thus you don't have to use the array syntax.
- Replaces all appropriate script references in
index.htmlwith the minified CSS and JS files.
- (Optionally) Minifies any images in
- Minifies the
- 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 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
To prevent a script or link tag from being removed from the finalized
index.html, use a
The generator comes with E2E tests in Gherkin, compiled to JS with cucumber.js. This makes it easy to elaborate these tests as part of the "feature contract" together with a non tech person (product owner, customer...).
spa-angular generates .feature files for partial with a route and puts it in the same directory as the partial file. The step defninitions should be in a sub folder step_definitions of the partial folder, because this way, the whole module contains all files needed to be placed in another app created with spa-angular.
Naming convention for step files: PARTIALNAME.steps.js