Add Angular New Router

app/prompts.json

@@ -131,6 +131,13 @@
         },
         "name": "ngRoute, the official router"
       },
+      {
+        "value": {
+          "key": "new-router",
+          "module": "ngNewRouter"
+        },
+        "name": "Angular 2 new router which is compatible with Angular 1 (experimental)"
+      },
       {
         "value": {
           "key": "none",

app/src/bower.js

@@ -58,6 +58,12 @@ module.exports = function(GulpAngularGenerator) {
       }
     }
 
+    if (this.props.router.key === 'new-router') {
+      bowerOverrides['angular-new-router'] = {
+        main: [ 'dist/router.es5.js' ]
+      };
+    }
+
     if (_.isEmpty(bowerOverrides)) {
       this.bowerOverrides = null;
     } else {

app/src/router.js

@@ -9,20 +9,27 @@ module.exports = function(GulpAngularGenerator) {
   GulpAngularGenerator.prototype.computeRouter = function computeRouter() {
     var routerPartialSrc = 'src/app/main/__' + this.props.ui.key + '.html';
 
-    if (this.props.router.module === 'ngRoute') {
+    if (this.props.router.key === 'angular-route') {
       this.routerHtml = '<div ng-view></div>';
       this.files.push({
         src: 'src/app/_ngroute/__ngroute.' + this.props.jsPreprocessor.srcExtension,
         dest: 'src/app/index.route.' + this.props.jsPreprocessor.extension,
         template: true
       });
-    } else if (this.props.router.module === 'ui.router') {
+    } else if (this.props.router.key === 'ui-router') {
       this.routerHtml = '<div ui-view></div>';
       this.files.push({
         src: 'src/app/_uirouter/__uirouter.' + this.props.jsPreprocessor.srcExtension,
         dest: 'src/app/index.route.' + this.props.jsPreprocessor.extension,
         template: true
       });
+    } else if (this.props.router.key === 'new-router') {
+      this.routerHtml = '<div ng-viewport ng-controller="RouterController"></div>';
+      this.files.push({
+        src: 'src/app/_newrouter/__newrouter.' + this.props.jsPreprocessor.srcExtension,
+        dest: 'src/app/index.route.' + this.props.jsPreprocessor.extension,
+        template: true
+      });
     } else {
       this.routerHtml = this.fs.read(this.templatePath(routerPartialSrc));
       this.routerHtml = this.routerHtml.replace(

app/templates/_bower.json

@@ -26,6 +26,8 @@
     "angular-route": "<%- props.angularVersion %>",
 <% } if (props.router.key === 'ui-router') { -%>
     "angular-ui-router": "~0.2.15",
+<% } if (props.router.key === 'new-router') { -%>
+    "angular-new-router": "~0.5.3",
 <% } if(props.ui.key === 'bootstrap') { -%>
 <%   if(props.cssPreprocessor.extension === 'scss') { -%>
     "bootstrap-sass": "~3.3.4",

app/templates/src/app/_index.module.es6

@@ -1,8 +1,11 @@
 /* global malarkey:false, moment:false */
+
 import config from './index.config';
-<% if (props.router.key !== 'none') { %>
+<% if (props.router.key === 'new-router') { -%>
+import { routerConfig, RouterController } from './index.route';
+<% } else if (props.router.key !== 'none') { -%>
 import routerConfig from './index.route';
-<% } %>
+<% } -%>
 import runBlock from './index.run';
 import MainController from './main/main.controller';
 import GithubContributorService from '../app/components/githubContributor/githubContributor.service';
@@ -14,12 +17,15 @@ angular.module('<%- appName %>', [<%- modulesDependencies %>])
   .constant('malarkey', malarkey)
   .constant('moment', moment)
   .config(config)
-<% if (props.router.key !== 'none') { %>
+<% if (props.router.key !== 'none') { -%>
   .config(routerConfig)
-<% } %>
+<% } -%>
   .run(runBlock)
   .service('githubContributor', GithubContributorService)
   .service('webDevTec', WebDevTecService)
+<% if (props.router.key === 'new-router') { -%>
+  .controller('RouterController', RouterController)
+<% } -%>
   .controller('MainController', MainController)
   .directive('acmeNavbar', () => new NavbarDirective())
   .directive('acmeMalarkey', () => new MalarkeyDirective(malarkey));

app/templates/src/app/_index.module.ts

@@ -1,7 +1,9 @@
 /// <reference path="../../<%- props.paths.tmp %>/typings/tsd.d.ts" />
 
 import { config } from './index.config';
-<% if (props.router.key !== 'none') { -%>
+<% if (props.router.key === 'new-router') { -%>
+import { routerConfig, RouterController } from './index.route';
+<% } else if (props.router.key !== 'none') { -%>
 import { routerConfig } from './index.route';
 <% } -%>
 import { runBlock } from './index.run';
@@ -14,16 +16,23 @@ import { acmeMalarkey } from '../app/components/malarkey/malarkey.directive';
 declare var malarkey: any;
 declare var moment: moment.MomentStatic;
 
-angular.module('<%- appName %>', [<%- modulesDependencies %>])
-  .constant('malarkey', malarkey)
-  .constant('moment', moment)
-  .config(config)
+module <%- appName %> {
+  'use strict';
+
+  angular.module('<%- appName %>', [<%- modulesDependencies %>])
+    .constant('malarkey', malarkey)
+    .constant('moment', moment)
+    .config(config)
 <% if (props.router.key !== 'none') { -%>
-  .config(routerConfig)
+    .config(routerConfig)
+<% } -%>
+    .run(runBlock)
+    .service('githubContributor', GithubContributor)
+    .service('webDevTec', WebDevTecService)
+<% if (props.router.key === 'new-router') { -%>
+    .controller('RouterController', RouterController)
 <% } -%>
-  .run(runBlock)
-  .service('githubContributor', GithubContributor)
-  .service('webDevTec', WebDevTecService)
-  .controller('MainController', MainController)
-  .directive('acmeNavbar', acmeNavbar)
-  .directive('acmeMalarkey', acmeMalarkey);
+    .controller('MainController', MainController)
+    .directive('acmeNavbar', acmeNavbar)
+    .directive('acmeMalarkey', acmeMalarkey);
+}

app/templates/src/app/_newrouter/__newrouter.coffee

@@ -0,0 +1,12 @@
+angular.module '<%- appName %>'
+  .config ($componentLoaderProvider) ->
+    'ngInject'
+    $componentLoaderProvider.setTemplateMapping (name) ->
+      "app/#{ name }/#{ name }.html"
+
+  .controller 'RouterController', ($router) ->
+    'ngInject'
+    $router.config [
+      path: '/'
+      component: 'main'
+    ]

app/templates/src/app/_newrouter/__newrouter.es6

@@ -0,0 +1,15 @@
+export function routerConfig($componentLoaderProvider) {
+  'ngInject';
+  $componentLoaderProvider.setTemplateMapping(function(name) {
+    return `app/${ name }/${ name }.html`;
+  });
+}
+
+export class RouterController {
+  constructor($router) {
+    'ngInject';
+    $router.config([
+      { path: '/', component: 'main' }
+    ]);
+  }
+}

app/templates/src/app/_newrouter/__newrouter.js

@@ -0,0 +1,23 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('<%- appName %>')
+    .config(routerConfig)
+    .controller('RouterController', RouterController);
+
+  /** @ngInject */
+  function routerConfig($componentLoaderProvider) {
+    $componentLoaderProvider.setTemplateMapping(function(name) {
+      return 'app/' + name + '/' + name + '.html';
+    });
+  }
+
+  /** @ngInject */
+  function RouterController($router) {
+    $router.config([
+      { path: '/', component: 'main' }
+    ]);
+  }
+
+})();

app/templates/src/app/_newrouter/__newrouter.ts

@@ -0,0 +1,13 @@
+export function routerConfig($componentLoaderProvider) {
+  $componentLoaderProvider.setTemplateMapping(function(name) {
+    return 'app/' + name + '/' + name + '.html';
+  });
+}
+
+export class RouterController {
+  constructor($router) {
+    $router.config([
+      { path: '/', component: 'main' }
+    ]);
+  }
+}

app/templates/src/app/_uirouter/__uirouter.js

@@ -3,10 +3,10 @@
 
   angular
     .module('<%- appName %>')
-    .config(routeConfig);
+    .config(routerConfig);
 
   /** @ngInject */
-  function routeConfig($stateProvider, $urlRouterProvider) {
+  function routerConfig($stateProvider, $urlRouterProvider) {
     $stateProvider
       .state('home', {
         url: '/',

test/inception/test-inception.js

@@ -96,10 +96,11 @@ describe('gulp-angular generator inception tests', function () {
     });
   });
 
-  describe('with [jQuery 1, $http, ngMaterial, Stylus, TypeScript, handlebars]', function () {
+  describe('with [jQuery 1, $http, new router, ngMaterial, Stylus, TypeScript, handlebars]', function () {
     before(function() {
       return inception.prepare({}, {
         jQuery: prompts.jQuery.values['jquery 1'],
+        router: prompts.router.values['new-router'],
         ui: prompts.ui.values['angular-material'],
         cssPreprocessor: prompts.cssPreprocessor.values.stylus,
         jsPreprocessor: prompts.jsPreprocessor.values.typescript,

test/node/test-bower.js

@@ -28,7 +28,8 @@ describe('gulp-angular generator bower script', function () {
 
     it('should return null if bootstrap is not selected', function() {
       generator.props = {
-        ui: { key: 'notbootstrap' }
+        ui: { key: 'notbootstrap' },
+        router: { key: 'notnewrouter' }
       };
       generator.prepareBowerOverrides();
       expect(generator.bowerOverrides).to.be.null;
@@ -38,7 +39,8 @@ describe('gulp-angular generator bower script', function () {
       generator.props = {
         ui: { key: 'bootstrap' },
         bootstrapComponents: { key: 'official' },
-        cssPreprocessor: { key: 'something' }
+        cssPreprocessor: { key: 'something' },
+        router: { key: 'notnewrouter' }
       };
       generator.prepareBowerOverrides();
       var bootstrapMain = JSON.parse(generator.bowerOverrides).bootstrap.main;
@@ -51,7 +53,8 @@ describe('gulp-angular generator bower script', function () {
       generator.props = {
         ui: { key: 'bootstrap' },
         bootstrapComponents: { key: 'something' },
-        cssPreprocessor: { key: 'none' }
+        cssPreprocessor: { key: 'none' },
+        router: { key: 'notnewrouter' }
       };
       generator.prepareBowerOverrides();
       var bootstrapMain = JSON.parse(generator.bowerOverrides).bootstrap.main;
@@ -64,7 +67,8 @@ describe('gulp-angular generator bower script', function () {
       generator.props = {
         ui: { key: 'bootstrap' },
         bootstrapComponents: { key: 'official' },
-        cssPreprocessor: { key: 'notnone', extension: 'scss' }
+        cssPreprocessor: { key: 'notnone', extension: 'scss' },
+        router: { key: 'notnewrouter' }
       };
       generator.prepareBowerOverrides();
       var bootstrapMain = JSON.parse(generator.bowerOverrides)['bootstrap-sass'].main;
@@ -80,7 +84,8 @@ describe('gulp-angular generator bower script', function () {
       generator.props = {
         ui: { key: 'bootstrap' },
         bootstrapComponents: { key: 'something' },
-        cssPreprocessor: { key: 'notnone', extension: 'scss' }
+        cssPreprocessor: { key: 'notnone', extension: 'scss' },
+        router: { key: 'notnewrouter' }
       };
       generator.prepareBowerOverrides();
       var bootstrapMain = JSON.parse(generator.bowerOverrides)['bootstrap-sass'].main;
@@ -94,7 +99,8 @@ describe('gulp-angular generator bower script', function () {
       generator.props = {
         ui: { key: 'bootstrap' },
         bootstrapComponents: { key: 'something' },
-        cssPreprocessor: { key: 'less' }
+        cssPreprocessor: { key: 'less' },
+        router: { key: 'notnewrouter' }
       };
       generator.prepareBowerOverrides();
       var bootstrapMain = JSON.parse(generator.bowerOverrides).bootstrap.main;
@@ -103,15 +109,28 @@ describe('gulp-angular generator bower script', function () {
       allFonts(bootstrapMain);
     });
 
+    it('should add new router js file', function() {
+      generator.props = {
+        ui: { key: 'notbootstrap' },
+        router: { key: 'new-router' }
+      };
+      generator.prepareBowerOverrides();
+      var routerMain = JSON.parse(generator.bowerOverrides)['angular-new-router'].main;
+      var first = routerMain.shift();
+      first.should.match(/router\.es5\.js/);
+    });
+
     it('should keep indent in bower.json', function() {
       generator.props = {
         ui: { key: 'bootstrap' },
         bootstrapComponents: { key: 'something' },
-        cssPreprocessor: { key: 'something' }
+        cssPreprocessor: { key: 'something' },
+        router: { key: 'notnewrouter' }
       };
       generator.prepareBowerOverrides();
       generator.bowerOverrides.should.match(/^{.*\n {4}/);
     });
+
   });
 
   describe('select wiredep exclusions depending the choices', function () {

test/node/test-router.js

@@ -11,45 +11,60 @@ var generator;
 
 var router = require('../../app/src/router.js');
 
-describe('gulp-angular generator techs script', function () {
+describe('gulp-angular generator router script', function () {
+  var read;
 
   before(function() {
     router(Generator);
   });
 
   beforeEach(function() {
     generator = new Generator();
-  });
-
-  it('should prepare router files and html depending choices', function() {
-    var read = sinon.stub(generator.fs, 'read');
 
     generator.props = {
-      router: { module: 'ngRoute' },
+      router: { key: 'angular-route' },
       ui: { key: 'testUi' },
       jsPreprocessor: {
         srcExtension: 'testSrcExtension',
         extension: 'testExtension'
       }
     };
 
+    read = sinon.stub(generator.fs, 'read');
+  });
+
+  it('should prepare router files and html for angular route', function() {
     generator.files = [];
     generator.computeRouter();
     generator.routerHtml.should.match(/ng-view/);
     generator.files[0].src.should.equal('src/app/_ngroute/__ngroute.testSrcExtension');
     generator.files[0].dest.should.equal('src/app/index.route.testExtension');
+  });
 
+  it('should prepare router files and html for UI Router', function() {
     generator.files = [];
-    generator.props.router.module = 'ui.router';
+    generator.props.router.key = 'ui-router';
     generator.computeRouter();
     generator.routerHtml.should.match(/ui-view/);
     generator.files[0].src.should.equal('src/app/_uirouter/__uirouter.testSrcExtension');
     generator.files[0].dest.should.equal('src/app/index.route.testExtension');
+  });
+
+  it('should prepare router files and html for angular new router', function() {
+    generator.files = [];
+    generator.props.router.key = 'new-router';
+    generator.computeRouter();
+    generator.routerHtml.should.match(/ng-viewport/);
+    generator.routerHtml.should.match(/RouterController/);
+    generator.files[0].src.should.equal('src/app/_newrouter/__newrouter.testSrcExtension');
+    generator.files[0].dest.should.equal('src/app/index.route.testExtension');
+  });
 
+  it('should prepare router files and html for not router', function() {
     generator.files = [];
     read.withArgs('template/src/app/main/__testUi.html')
       .returns('<div class="container">');
-    generator.props.router.module = 'none';
+    generator.props.router.key = 'none';
     generator.computeRouter();
     generator.routerHtml.should.match(/MainController/);
     generator.files.length.should.equal(0);