A Yeoman generator for AngularJs project

This is a yeoman generator for AngularJs project.

It takes advantage of the gulp build tool and makes use of bower and npm for dependency management.

GENERATED DIRECTORY STRUCTURE

assets/
  app/
    main/
      content.html
      mainCtrl.js
    app.js
    initializer.js
    route.js
  common/
    controllers/
      headerCtrl.js
      directives/
    layout/
      footer.html
      header.html
      layout.html
    models/
    partials/
    services/
  css/
    includes/
      _main.scss
    app.scss
  images/
  vendor/
    plugins.js
  404.html
  apple-touch-icon-precomposed.png
  crossdomain.xml
  favicon.ico
  humans.txt
  index.html
  robots.txt
bower_components/    
node_modules/
.bowerrc
.editorconfig
.gitignore
.jshintrc
bower.json
gulpfile.js
package.json

FEATURES

follows the project structure for angular seed
using HTML5 boilerplate and bootstrap 3
using 'gulp' command to develop app in development environment
using 'gulp production' command to release app in production environment
after run 'gulp production' command, all app files are compiled into release folder
a static server is run at port 3000 with livereload support

Prerequisites

node.js http://nodejs.org/
npm http://www.npmjs.org/
bower http://bower.io/
gulp.js http://gulpjs.com/
yo https://github.com/yeoman/yo
yeoman-generator https://github.com/yeoman/generator-generator

Generators

Available generators:

yo-angular
yo-angular:page
yo-angular:directive
yo-angular:model
yo-angular:controller
yo-angular:service

Note: Generators are to be run from the root directory of your app.

App

Sets up a new AngularJS app, generating all the boilerplate you need to get started.

Example:

yo yo-angular

Page

Generates a controller and view in assets/app/.

Example:

yo yo-angular:page

Produces assets/app/user/userCtrl.js:

"use strict";

angular.module('ng.controller').controller('userCtrl' ,
  function($scope) {

  }
);

Produces assets/app/user/content.html:

<div>
  user
</div>

Directive

Generates a directive in assets/common/directives/.

Example:

yo yo-angular:directive

Produces assets/common/directives/user.js:

"use strict";

angular.module('ng.directive').directive('user', [function () {
  return {
    restrict: 'A',
    link: function (scope) {

    },
    controller: function($scope){

    }
  };
}]);

Model

Generates a model in assets/common/models/.

Example:

yo yo-angular:model

Produces assets/common/models/userModel.js:

"use strict";

angular.module('ng.model').factory('userModel', ['$resource', function($resource) {
  function userModel() {
    this.url = '';
    return $resource(this.url, {id: '@id'},{
      'get':    {method:'GET','url':this.url},
      'getAll':  {method:'GET', isArray:true,'url':this.url},
      'update': {method:'PUT','url':this.url},
      'remove': {method:'DELETE','url':this.url}
    });
  }
  return new userModel();
}]);

Controller

Generates a controller in assets/common/controllers/.

Example:

yo yo-angular:controller

Produces assets/common/controllers/userCtrl.js:

"use strict";

angular.module('ng.controller').controller('userCtrl' ,
  function($scope) {

  }
);

Service

Generates a service in assets/common/services/.

Example:

yo yo-angular:service

Produces assets/common/services/userService.js:

"use strict";

angular.module('ng.service').controller('userService' ,
  function userService() {

  }
  return new userService();
);

USAGE

1) npm install -g bob76828/generator-yo-angular

2) mkdir myApp && cd myApp && yo yo-angular

3) gulp

6) start developing

Support

For questions and issues: https://github.com/bob76828/generator-yo-angular/issues