feat(route): add route generation

Close angular#64
filipesilva · Jan 23, 2016 · 4b4239f · 4b4239f
1 parent a8ee48b
commit 4b4239f
Show file tree

Hide file tree

Showing 14 changed files with 208 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,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
@@ -57,6 +57,44 @@ Add a new pipe with:
 ng generate pipe my-new-pipe
 ```
 
+### 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.ts
+|   |   |-- hero-list.component.html
+|   |   |-- hero-list.component.css
+|   |   |-- hero-list.component.ts
+|   |   |-- hero-root.component.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}
+])
+```
+
 
 ### Creating a build
 
@@ -69,17 +107,17 @@ The build artifacts will be stored in the `dist/` directory.
 
 ### Running tests
 
-Before running the tests make sure that the project is built. To build the 
+Before running the tests make sure that the project is built. To build the
 project once you can use:
 
 ```bash
 ng build
 ```
 
-With the project built in the `dist/` folder you can just run: `karma start`. 
+With the project built in the `dist/` folder you can just run: `karma start`.
 Karma will run the tests and keep the browser open waiting to run again.
 
-This will be easier when the command 
+This will be easier when the command
 [ng test](https://github.com/angular/angular-cli/issues/70) is implemented.
 
 

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) {
     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="/">
   <script src="vendor/angular2/bundles/angular2-polyfills.js"></script>
   {{content-for 'head'}}
   <link rel="icon" type="image/x-icon" href="favicon.ico">

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.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.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.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.
+  // }
+};