feat(route): add route generation

Close angular#64
filipesilva · Jan 31, 2016 · aae61ee · aae61ee
1 parent e2c8795
commit aae61ee
Show file tree

Hide file tree

Showing 20 changed files with 316 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 [![Dependency Status][david-badge]][david-badge-url]
 [![devDependency Status][david-dev-badge]][david-dev-badge-url]
 [![npm][npm-badge]][npm-badge-url]
- 
+
 Prototype of a CLI for Angular 2 applications based on the [ember-cli](http://www.ember-cli.com/) project.
 
 ## Note
@@ -59,6 +59,50 @@ Directive | `ng g directive my-new-directive`
 Pipe      | `ng g pipe my-new-pipe`
 Service   | `ng g service my-new-service`
 
+### Generating a route
+
+You can generate a new route by with the following command (note the singular
+used in `hero`):
+
+```bash
+ng generate route hero
+```
+
+This will create a folder with a routable component (`hero-root.component.ts`)
+with two sub-routes. The file structure will be as follows:
+
+```
+...
+|-- app
+|   |-- hero
+|   |   |-- hero-detail.component.html
+|   |   |-- hero-detail.component.css
+|   |   |-- hero-detail.component.spec.ts
+|   |   |-- hero-detail.component.ts
+|   |   |-- hero-list.component.html
+|   |   |-- hero-list.component.css
+|   |   |-- hero-list.component.spec.ts
+|   |   |-- hero-list.component.ts
+|   |   |-- hero-root.component.spec.ts
+|   |   |-- hero-root.component.ts
+|   |   |-- hero.service.spec.ts
+|   |   |-- hero.service.ts
+|   |-- ...
+|-- app.ts
+...
+```
+
+Afterwards to use the new route open your main app component, import
+`hero-root.component.ts` and add it in the route config:
+
+```
+@RouteConfig([
+  {path:'/hero/...', name: 'HeroRoot', component: HeroRoot}
+])
+```
+
+Visiting `http://localhost:4200/hero` will show the hero list.
+
 
 ### Creating a build
 

diff --git a/addon/ng2/blueprints/ng2/files/karma-test-shim.js b/addon/ng2/blueprints/ng2/files/karma-test-shim.js
@@ -37,7 +37,7 @@ System.import('angular2/platform/browser').then(function(browser_adapter) {
 });
 
 function onlyAppFiles(filePath) {
-  return /^\/base\/dist\/app\/(?!spec)([a-z0-9-_\/]+)\.js$/.test(filePath);
+  return /^\/base\/dist\/app\/(?!.*\.spec\.js$)([a-z0-9-_\.\/]+)\.js$/.test(filePath);
 }
 
 function onlySpecFiles(path) {

diff --git a/addon/ng2/blueprints/ng2/files/karma.conf.js b/addon/ng2/blueprints/ng2/files/karma.conf.js
@@ -11,6 +11,8 @@ module.exports = function(config) {
       {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true},
       {pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true},
       {pattern: 'node_modules/angular2/bundles/angular2.js', included: true, watched: true},
+      {pattern: 'node_modules/angular2/bundles/http.dev.js', included: true, watched: true},
+      {pattern: 'node_modules/angular2/bundles/router.dev.js', included: true, watched: true},
       {pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true},
 
       {pattern: 'karma-test-shim.js', included: true, watched: true},

diff --git a/addon/ng2/blueprints/ng2/files/src/app.ts b/addon/ng2/blueprints/ng2/files/src/app.ts
@@ -1,5 +1,7 @@
 import {bootstrap} from 'angular2/platform/browser';
 import {<%= jsComponentName %>App} from './app/<%= htmlComponentName %>';
+import {ROUTER_PROVIDERS} from 'angular2/router';
 
-
-bootstrap(<%= jsComponentName %>App);
+bootstrap(<%= jsComponentName %>App, [
+  ROUTER_PROVIDERS
+]);
diff --git a/addon/ng2/blueprints/ng2/files/src/app/__name__.html b/addon/ng2/blueprints/ng2/files/src/app/__name__.html
@@ -1,3 +1,5 @@
 <p>
   <%= htmlComponentName %> Works!
-</p>
+</p>
+
+<router-outlet></router-outlet>
diff --git a/addon/ng2/blueprints/ng2/files/src/app/__name__.ts b/addon/ng2/blueprints/ng2/files/src/app/__name__.ts
@@ -1,16 +1,20 @@
 import {Component} from 'angular2/core';
+import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
 
 
 @Component({
   selector: '<%= htmlComponentName %>-app',
   providers: [],
   templateUrl: 'app/<%= htmlComponentName %>.html',
-  directives: [],
+  directives: [ROUTER_DIRECTIVES],
   pipes: []
 })
+@RouteConfig([
+
+])
 export class <%= jsComponentName %>App {
   defaultMeaning: number = 42;
-  
+
   meaningOfLife(meaning?: number) {
     return `The meaning of life is ${meaning || this.defaultMeaning}`;
   }

diff --git a/addon/ng2/blueprints/ng2/files/src/index.html b/addon/ng2/blueprints/ng2/files/src/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title><%= jsComponentName %></title>
-  <base href=".">
+  <base href="/">
   {{content-for 'head'}}
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

diff --git a/addon/ng2/blueprints/route/files/src/app/__name__/__name__-detail.component.css b/addon/ng2/blueprints/route/files/src/app/__name__/__name__-detail.component.css
diff --git a/addon/ng2/blueprints/route/files/src/app/__name__/__name__-detail.component.html b/addon/ng2/blueprints/route/files/src/app/__name__/__name__-detail.component.html
@@ -0,0 +1,13 @@
+<div *ngIf="<%= camelizedModuleName %>">
+  <h3>"{{editName}}"</h3>
+  <div>
+    <label>Id:</label>
+    {{<%= camelizedModuleName %>.id}}
+  </div>
+  <div>
+    <label>Name:</label>
+    <input [(ngModel)]="editName" placeholder="name"/>
+  </div>
+  <button (click)="save()">Save</button>
+  <button (click)="cancel()">Cancel</button>
+</div>
diff --git a/addon/ng2/blueprints/route/files/src/app/__name__/__name__-detail.component.spec.ts b/addon/ng2/blueprints/route/files/src/app/__name__/__name__-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import {
+  it,
+  iit,
+  describe,
+  ddescribe,
+  expect,
+  inject,
+  injectAsync,
+  TestComponentBuilder,
+  beforeEachProviders
+} from 'angular2/testing';
+import {provide} from 'angular2/core';
+import {<%= classifiedModuleName %>DetailComponent} from './<%= dasherizedModuleName %>-detail.component';
+
+describe('<%= classifiedModuleName %>DetailComponent', () => {
+
+  beforeEachProviders(() => []);
+
+  it('should ...', injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
+    return tcb.createAsync(<%= classifiedModuleName %>DetailComponent).then((fixture) => {
+      fixture.detectChanges();
+    });
+  }));
+
+});
diff --git a/addon/ng2/blueprints/route/files/src/app/__name__/__name__-detail.component.ts b/addon/ng2/blueprints/route/files/src/app/__name__/__name__-detail.component.ts
@@ -0,0 +1,54 @@
+import {Component, OnInit} from 'angular2/core';
+import {<%= classifiedModuleName %>, <%= classifiedModuleName %>Service} from './<%= dasherizedModuleName %>.service';
+import {RouteParams, Router} from 'angular2/router';
+import {CanDeactivate, ComponentInstruction} from 'angular2/router';
+
+@Component({
+  templateUrl: 'app/<%= dasherizedModuleName %>/<%= dasherizedModuleName %>-detail.component.html',
+  styleUrls: ['app/<%= dasherizedModuleName %>/<%= dasherizedModuleName %>-detail.component.css']
+})
+export class <%= classifiedModuleName %>DetailComponent implements OnInit, CanDeactivate {
+
+  <%= camelizedModuleName %>: <%= classifiedModuleName %>;
+  editName: string;
+
+  constructor(
+    private _service: <%= classifiedModuleName %>Service,
+    private _router: Router,
+    private _routeParams: RouteParams
+    ) { }
+
+  ngOnInit() {
+    let id = +this._routeParams.get('id');
+    this._service.get(id).then(<%= camelizedModuleName %> => {
+      if (<%= camelizedModuleName %>) {
+        this.editName = <%= camelizedModuleName %>.name;
+        this.<%= camelizedModuleName %> = <%= camelizedModuleName %>;
+      } else {
+        this.gotoList();
+      }
+    });
+  }
+
+  routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction): any {
+    if (!this.<%= camelizedModuleName %> || this.<%= camelizedModuleName %>.name === this.editName) {
+      return true;
+    }
+
+    return new Promise<boolean>((resolve, reject) => resolve(window.confirm('Discard changes?')));
+  }
+
+  cancel() {
+    this.editName = this.<%= camelizedModuleName %>.name;
+    this.gotoList();
+  }
+
+  save() {
+    this.<%= camelizedModuleName %>.name = this.editName;
+    this.gotoList();
+  }
+
+  gotoList() {
+    this._router.navigate(['<%= classifiedModuleName %>List']);
+  }
+}
diff --git a/addon/ng2/blueprints/route/files/src/app/__name__/__name__-list.component.css b/addon/ng2/blueprints/route/files/src/app/__name__/__name__-list.component.css
diff --git a/addon/ng2/blueprints/route/files/src/app/__name__/__name__-list.component.html b/addon/ng2/blueprints/route/files/src/app/__name__/__name__-list.component.html
@@ -0,0 +1,12 @@
+<h2><%= classifiedModuleName %> List</h2>
+
+<ul>
+  <li *ngFor="#<%= camelizedModuleName %> of <%= camelizedModuleName %>s">
+    <a
+      [routerLink]="['<%= classifiedModuleName %>Detail', { id: <%= camelizedModuleName %>.id }]">
+      <strong>{{<%= camelizedModuleName %>.id}}</strong>
+      -
+      {{<%= camelizedModuleName %>.name}}
+    </a>
+  </li>
+</ul>
diff --git a/addon/ng2/blueprints/route/files/src/app/__name__/__name__-list.component.spec.ts b/addon/ng2/blueprints/route/files/src/app/__name__/__name__-list.component.spec.ts
@@ -0,0 +1,25 @@
+import {
+  it,
+  iit,
+  describe,
+  ddescribe,
+  expect,
+  inject,
+  injectAsync,
+  TestComponentBuilder,
+  beforeEachProviders
+} from 'angular2/testing';
+import {provide} from 'angular2/core';
+import {<%= classifiedModuleName %>ListComponent} from './<%= dasherizedModuleName %>-list.component';
+
+describe('<%= classifiedModuleName %>ListComponent', () => {
+
+  beforeEachProviders(() => []);
+
+  it('should ...', injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
+    return tcb.createAsync(<%= classifiedModuleName %>ListComponent).then((fixture) => {
+      fixture.detectChanges();
+    });
+  }));
+
+});
diff --git a/addon/ng2/blueprints/route/files/src/app/__name__/__name__-list.component.ts b/addon/ng2/blueprints/route/files/src/app/__name__/__name__-list.component.ts
@@ -0,0 +1,17 @@
+import {Component, OnInit} from 'angular2/core';
+import {<%= classifiedModuleName %>, <%= classifiedModuleName %>Service} from './<%= dasherizedModuleName %>.service';
+import {ROUTER_DIRECTIVES} from 'angular2/router';
+
+@Component({
+  templateUrl: 'app/<%= dasherizedModuleName %>/<%= dasherizedModuleName %>-list.component.html',
+  styleUrls: ['app/<%= dasherizedModuleName %>/<%= dasherizedModuleName %>-list.component.css'],
+  directives: [ROUTER_DIRECTIVES]
+})
+export class <%= classifiedModuleName %>ListComponent implements OnInit {
+  <%= camelizedModuleName %>s: <%= classifiedModuleName %>[];
+  constructor(
+    private _service: <%= classifiedModuleName %>Service) {}
+  ngOnInit() {
+    this._service.getAll().then(<%= camelizedModuleName %>s => this.<%= camelizedModuleName %>s = <%= camelizedModuleName %>s);
+  }
+}
diff --git a/addon/ng2/blueprints/route/files/src/app/__name__/__name__-root.component.ts b/addon/ng2/blueprints/route/files/src/app/__name__/__name__-root.component.ts
@@ -0,0 +1,19 @@
+import {Component} from 'angular2/core';
+import {RouteConfig, RouterOutlet} from 'angular2/router';
+
+import {<%= classifiedModuleName %>ListComponent} from './<%= dasherizedModuleName %>-list.component';
+import {<%= classifiedModuleName %>DetailComponent} from './<%= dasherizedModuleName %>-detail.component';
+import {<%= classifiedModuleName %>Service} from './<%= dasherizedModuleName %>.service';
+
+@Component({
+  template: '<router-outlet></router-outlet>',
+  providers: [<%= classifiedModuleName %>Service],
+  directives: [RouterOutlet]
+})
+@RouteConfig([
+  {path:'/', name: '<%= classifiedModuleName %>List', component: <%= classifiedModuleName %>ListComponent, useAsDefault: true},
+  {path:'/:id', name: '<%= classifiedModuleName %>Detail', component: <%= classifiedModuleName %>DetailComponent}
+])
+export class <%= classifiedModuleName %>Root {
+  constructor() {}
+}
diff --git a/addon/ng2/blueprints/route/files/src/app/__name__/__name__.service.spec.ts b/addon/ng2/blueprints/route/files/src/app/__name__/__name__.service.spec.ts
@@ -0,0 +1,17 @@
+import {describe, it, expect, beforeEachProviders, inject} from 'angular2/testing';
+import {provide} from 'angular2/core';
+import {<%= classifiedModuleName %>Service} from './<%= dasherizedModuleName %>.service';
+
+describe('<%= classifiedModuleName %>Service', () => {
+
+  beforeEachProviders(() => [<%= classifiedModuleName %>Service]);
+
+  it('should get all <%= camelizedModuleName %>s', inject([<%= classifiedModuleName %>Service], (<%= camelizedModuleName %>Service:<%= classifiedModuleName %>Service) => {
+    <%= camelizedModuleName %>Service.getAll().then(<%= camelizedModuleName %>s => expect(<%= camelizedModuleName %>s.length).toBe(3));
+  }));
+
+  it('should get one <%= camelizedModuleName %>', inject([<%= classifiedModuleName %>Service], (<%= camelizedModuleName %>Service:<%= classifiedModuleName %>Service) => {
+    <%= camelizedModuleName %>Service.get(1).then(<%= camelizedModuleName %> => expect(<%= camelizedModuleName %>.id).toBe(1));
+  }));
+
+});
diff --git a/addon/ng2/blueprints/route/files/src/app/__name__/__name__.service.ts b/addon/ng2/blueprints/route/files/src/app/__name__/__name__.service.ts
@@ -0,0 +1,21 @@
+import {Injectable} from 'angular2/core';
+
+export class <%= classifiedModuleName %> {
+  constructor(public id: number, public name: string) { }
+}
+
+@Injectable()
+export class <%= classifiedModuleName %>Service {
+  getAll() { return promise; }
+  get(id: number) {
+    return promise.then(all => all.find(e => e.id === id));
+  }
+}
+
+let mock = [
+  new <%= classifiedModuleName %>(1, 'one'),
+  new <%= classifiedModuleName %>(2, 'two'),
+  new <%= classifiedModuleName %>(3, 'three')
+];
+
+let promise = Promise.resolve(mock);
diff --git a/addon/ng2/blueprints/route/index.js b/addon/ng2/blueprints/route/index.js
@@ -0,0 +1,16 @@
+var stringUtils = require('ember-cli/lib/utilities/string');
+
+module.exports = {
+  description: ''
+
+  //locals: function(options) {
+  //   // Return custom template variables here.
+  //   return {
+  //
+  //   };
+  //}
+
+  // afterInstall: function(options) {
+  //   // Perform extra work here.
+  // }
+};