Routing By Example #2: Simple master/detail contact manager

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://routingbyexample.com/css/main.css">
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.46/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.46/router.dev.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body class="rbe-plunk">
    <app>
      Loading, please wait...
    </app>
  </body>

</html>

/* Styles go here */
.form__row{
  margin: 0 0 30px 0;
}
.form__row + .form__row{
  margin-top: -15px;
}
.form__actions{
  
}

### Angular 2 Simple Routing (single route)

In Angular 2, we always bootstrap a root component which is our application
at the same time. Other components can be used inside that root component
to compose a component tree structure, which represents our application.

To get started with routing in Angular 2, we need to do a couple of
things:

1. Import `ROUTER_PROVIDERS` from `angular/router` (main.ts:4)
2. Add the providers to our `bootstrap()` function to configure our root
   injector (main.ts:10)
3. [OPTIONAL]: Configure the router to use `HashLocationStrategy`, this
   is to support deep links if we're not able to configure the server
   (main.ts:12)
4. Import the `RouteConfig` decorator so we can use it on our application
   component (app.ts:2)
5. Decorate our component with a route (app.ts:5)
6. Use `RouterOutlet` directive to specify where components should be
   loaded (app.ts:10)

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

// Import Angular dependencies
import {bootstrap, provide} from 'angular2/angular2';
import {ContactsService} from './contacts/contacts.service';

// Import Component Router dependencies
import {
  ROUTER_PROVIDERS,
  LocationStrategy,
  HashLocationStrategy
} from 'angular2/router';

// Import application component
import {App} from './app/app.component';

// Bootstrap the application
bootstrap(App, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy}),
  ContactsService
]).catch(err => console.error(err));

import {Component} from 'angular2/angular2';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {ContactsListComponent} from '../contacts/contacts-list.component';
import {ContactsDetailComponent} from '../contacts/contacts-detail.component';

@RouteConfig([
  {path: '/', component: ContactsListComponent, as: 'ContactsList'},
  {path: '/detail/:id', component: ContactsDetailComponent, as: 'ContactsDetail'}
])
@Component({
  selector: 'app',
  templateUrl: 'src/app/app.html',
  directives: [ROUTER_DIRECTIVES]
})
export class App {

}

<main>
  <router-outlet></router-outlet>
  <!-- The router will put the content here, right after the outlet -->
</main>

import {Injectable} from 'angular2/angular2';

var contacts = [
	{ id: 1, firstName: 'Pascal', lastName: 'Precht' },
	{ id: 2, firstName: 'Jurgen', lastName: 'Van de Moere' }
];

@Injectable()
export class ContactsService {
  
  getAll() {
    return Promise.resolve(contacts)  
  }
  
  getOneById(id: number){
    return this.getAll()
      .then(function(contacts){
        var filtered = contacts.filter(c => c.id === id);
        return filtered[0];
      })
  }
}

import {Component, OnInit} from 'angular2/angular2';
import {ContactsService} from './contacts.service';
import {Router, ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
  template: `
    <h2>Contacts</h2>
    <p>Click a contact to edit:</p>
    <ul>
      <li *ng-for="#contact of contacts">
        <a [router-link]="['ContactsDetail', {id: contact.id}]">
          {{contact.firstName}} {{contact.lastName}}
        </a>
      </li>
    </ul>
  `,
  directives: [ROUTER_DIRECTIVES]
})
export class ContactsListComponent implements OnInit {
  public contacts: any[];
  public selectedContact: any;
  
  constructor(
    private _router: Router,
    private _contactsService: ContactsService
  ){ }
  
  onInit() {
    this._contactsService.getAll().then(contacts => this.contacts = contacts)
  }
}

import {Component,  OnInit}  from 'angular2/angular2';
import {ContactsService}   from './contacts.service';
import {RouteParams, Router, ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
  template: `
  <div *ng-if="contact">
    <h2>{{contact.firstName}} {{contact.lastName}}</h2>
    <div class="form__row">
      <label>First name: </label>
      <input [(ng-model)]="contact.firstName" placeholder="First name"/>
    </div>
    <div class="form__row">
      <label>Last name: </label>
      <input [(ng-model)]="contact.lastName" placeholder="Last name"/>
    </div>
    <div class="form__actions">
      <button (click)="doSave()">Save</button>
      <button (click)="doCancel()">Cancel</button>
    </div>
  </div>
  `,
  directives: [ROUTER_DIRECTIVES]
})
export class ContactsDetailComponent implements OnInit  {
  public contact: any;
  public backup: any;
  
  constructor(
    private _router:Router,
    private _routeParams:RouteParams,
    private _contactsService:ContactsService
  ){}
    
  onInit() {
    let id = +this._routeParams.get('id');
    this._contactsService.getOneById(id).then(contact => {
      this.contact = contact;
      this.backup = Object.assign({}, contact);
    });
  }
  
  doSave() {
    this._router.navigate(['ContactsList']);
  }
  
  doCancel() {
    this.contact = Object.assign(this.contact, this.backup);
    this._router.navigate(['ContactsList']);
  }
}