generator-ng-super

generator-ng-super

Read my attempt to explain the ng-Super philosophy here.

To install yeoman:

$ npm install yo -g

To install generator-ng-super clone this repository and then:

$ cd generator-ng-super
$ npm install link

Finally, initiate the generator:

$ mkdir superApp
$ cd superApp
$ yo ng-super

Generates:

├── app
│   ├── fonts
│   │   └── Kelvetica Nobis.otf
│   ├── images
│   │   └── welcome
│   │       └── super-logo.jpg
│   ├── index.html
│   ├── src
│   │   ├── app.module.js
│   │   ├── common
│   │   │   └── common.module.js
│   │   ├── core
│   │   │   ├── core.module.js
│   │   │   ├── restangular.config.js
│   │   │   └── router.config.js
│   │   └── welcome
│   │       ├── welcome.controller.js
│   │       ├── welcome.html
│   │       └── welcome.module.js
│   └── styles
│       ├── css
│       │   └── main.css
│       ├── main.scss
│       └── partials
│           ├── _skin.scss
│           └── _welcome.scss
├── bower.json
├── configLoader.js
├── gruntfile.js
├── package.json
├── tasks
│   ├── bump.js
│   ├── clean.js
│   ├── compass.js
│   ├── concurrent.js
│   ├── connect.js
│   ├── copy.js
│   ├── html2js.js
│   ├── karma.js
│   ├── ngAnnotate.js
│   ├── replace.js
│   ├── usemin.js
│   ├── useminPrepare.js
│   ├── watch.js
│   └── wiredep.js
└── tests
    └── welcome
        └── welcome.controller.js

Run $ grunt server to run the application.

Sub-generators

Controller

Generates an Angular Controller for the provided Module

yo ng-super:controller dashboard.user

Produces: app/src/dashboard/user.controller.js:

 (function(){
 	'use strict';
 
 	angular
 		.module('app.dashboard')
 		.controller('UserCtrl', UserCtrl)
 
 	function UserCtrl(){
 		vm = this;
 
 		vm.testFunction = testFunction;

    		/////////////////////
     
 		function testFunction () {
 			console.info('This is a test function');
 		}
 	}
 }());

Directive

Generates an Angular Directive for the provided Module

yo ng-super:directive common.kuSubmit

Produces: app/src/common/kuSubmit.directive.js:

(function(){

  'use strict';

  angular
    .module('app.common')
    .directive('kuSubmit', kuSubmit);

  function kuSubmit(){

    var directive = {
      link: link,
      restrict: 'EA',
      template: '<div></div>',
      scope: {

      }
    };

    return directive;

    /////////////////////

    function link (scope, elem, attrs){
      console.info('This is a link function of the directive');
    }
  }
}());

Factory

Generates an Angular Factory for the provided Module

yo ng-super:factory common.calendar

Produces: app/src/common/calendar.factory.js:

(function(){
	'use strict';

	angular
		.module('app.common')
		.factory('calendar', calendar)

	function calendar(){
		var service = {
			testFunction: testFunction
		}

		return service;

		////////////////////

		function testFunction () {
			console.info('This is a test function');
		}
	}
}());

###Filter

Generates an Angular Filter for the provided Module

yo ng-super:filter common.currency

Produces: app/src/common/currency.filter.js:

(function(){

  angular
    .module('app.common')
    .filter('currency', currency);

  function currency(){
    return function (input){
      return 'currency filter: ' + input;
    }
  }

}());

Feature

Generates an Angular Module

yo ng-super:feature talks

Produces: app/src/talks/talks.module.js:

(function(){
  'use strict';

  angular
    .module('app.talks', [])
    .config(configuration);

  function configuration($stateProvider){

    //add your state mappings here
    //$stateProvider
    //  .state();
  }
}());

View

Generates an HTML view

yo ng-super:view dashboard.performance

Produces: app/src/dashboard/performance.html:

<div> this a a sample view for dashboard.performance </div>

Grunt Tasks

$ grunt server

Pops up a development environment with HTML, CSS and JS Livereload

$ grunt test

Runs all unit tests on Karma

$ grunt build

Creates a dist containing a distribute-able Angular App

$ grunt bump

Bump application version and goodies, details at grunt-bump

License

MIT