generator-ng-router

Yeoman generator for AngularJS Router with ngRouter or uiRoute.

Usage

Install yeoman

npm install -g yo

Install generator-ng-router:

npm install -g generator-ng-router

(If you do not have a project yet, I recommend use gulp-angular generator)

Go to you project directory:

cd <your-project>

Create a new route

yo ng-router <route-name>

### Questions Answer these questions if you do not have a saved configuration or use --skip-config option.

• What do you want to use as module name? Default: Your package's name.
• Where do you want to put the route? Default: src/app.
• Would you like to use Jade? Default: false.
• Would you like to use Coffee? Default: false.
• Which you like to use as CSS preprocessor? None (default), Less, Sass (, SCSS) or Stylus.
• Which you want to use as router? ngRouter (default) or UI-Router.
• Would you like to save these options? Default: Yes.

### Files created Generates a controller with the route configuration in the same file, and generates a view and style file.

Example

$ yo ng-router myRoute
What do you want to use as module name? myPackageName
Where do you want to put the route? src/app
Would you like to use Jade? false
Would you like to use Coffee? false
Which you like to use as CSS preprocessor? None
Which you want to use as router? ngRouter
Would you like to save these options? Yes

Produces src/app/myroute/myroute.js

'use strict';

/**
 * @ngdoc function
 * @name myPackageName.controller:myRouteCtrl
 * @description
 * # myRouteCtrl
 * Controller of the myPackageName
 */

angular
.module('myPackageName')

.config(function config($routeProvider) {
  $routeProvider
    .when('myroute', {
      templateUrl: 'app/myroute/myroute.html',
      controller: 'myRouteCtrl'
    });
})

.controller('myRouteCtrl', function myRouteCtrl($scope) {

});

Produces src/app/myroute/myroute.html

<span class="myroute">Hello world!</span>

Produces src/app/myroute/myroute.css

.myroute {
  display: inherit;
}

## Recomendations

Directory structure

Best Practice Recommendations for Angular App Structure

Generators

• App: gulp-angular
• Component: generator-ng-component
• MEAN: generator-angular-fullstack

Changelog

All changes listed in the GitHub releases

Contribute

See the contributing docs

When submitting an issue, please follow the guidelines in the contributing docs.

When submitting a PR, make sure that the commit messages match the AngularJS conventions.

When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.

When submitting a new feature, add tests that cover the feature.

## TODO

• [ ] Feat: Support Dart
• [ ] Feat: Support Tests (Protractor? Karma? Jasmine? Mocha?)
• [ ] Feat: Add new files to index.html (?)
• [ ] Feat: Autocheck options (?)
• [ ] Docs: Improve PR guidelines

License

MIT