docs(cookbook): Added router cookbook

public/docs/_examples/cb-router/e2e-spec.js

@@ -0,0 +1,49 @@
+describe('Router Cookbook Tests', function () {
+
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  describe('Subscribing to the router', function() {
+    // #docregion router-subscription
+    // ...
+
+    it('should listen for URL updates', function () {
+      var headers = element.all(by.className('header'));
+
+      expect(headers.first().getText()).toContain('/home');
+    });
+    // ...
+    // #enddocregion router-subscription
+  });
+
+  describe('Navigating without updating the URL', function() {
+    // #docregion silent-navigation
+    // ...
+
+    it('should update the view without updating the URL', function () {
+      var links = element.all(by.tagName('a'));
+      links.last().click();
+
+      var headers = element.all(by.className('header'));
+      expect(headers.first().getText()).toContain('/restricted');
+      expect(headers.last().getText()).toContain('/unauthorized');
+    });
+    // ...
+    // #enddocregion silent-navigation
+  });
+
+  describe('After navigation', function() {
+    // #docregion page-title
+    // ...
+
+    it('should update the browser page title', function () {
+      var pageTitle = browser.getTitle().then(function(title) {
+        expect(title).toBe('Home');
+      });
+    });
+    // ...
+    // #enddocregion page-title
+  });
+});

public/docs/_examples/cb-router/ts/.gitignore

@@ -0,0 +1 @@
+**/*.js

public/docs/_examples/cb-router/ts/app/app.component.1.ts

@@ -0,0 +1,27 @@
+// #docregion
+import {Component} from 'angular2/core';
+import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {HomeComponent} from './home.component';
+
+@Component({
+  selector: 'my-app',
+  directives: [ROUTER_DIRECTIVES],
+  template: `
+    <h3 class="header">Current URL: {{ url }}</h3>
+    <nav>
+      <a [routerLink]="['Home']">Home</a>
+    </nav>
+    <router-outlet></router-outlet>
+    `
+})
+@RouteConfig([
+  { path: '/home', component: HomeComponent, name: 'Home', useAsDefault: true }
+])
+export class AppComponent {
+  url: string;
+  constructor(router: Router) {
+    router.subscribe((url: string) => {
+      this.url = `/${url}`;
+    });
+  }
+}

public/docs/_examples/cb-router/ts/app/app.component.2.ts

@@ -0,0 +1,21 @@
+// #docregion
+import {Component} from 'angular2/core';
+import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {HomeComponent} from './home.component';
+import {NavigatingComponent} from './navigating.component';
+
+@Component({
+  selector: 'my-app',
+  directives: [ROUTER_DIRECTIVES, NavigatingComponent],
+  template: `
+    <navigating></navigating>
+    <nav>
+      <a [routerLink]="['Home']">Home</a>
+    </nav>
+    <router-outlet></router-outlet>
+    `
+})
+@RouteConfig([
+  { path: '/home', component: HomeComponent, name: 'Home', useAsDefault: true }
+])
+export class AppComponent {}

public/docs/_examples/cb-router/ts/app/app.component.3.ts

@@ -0,0 +1,16 @@
+// #docregion
+import {Component} from 'angular2/core';
+import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {HomeComponent} from './home.component';
+
+@Component({
+  selector: 'my-app',
+  directives: [ROUTER_DIRECTIVES],
+  template: `
+    <router-outlet></router-outlet>
+  `
+})
+@RouteConfig([
+  { path: '/home', component: HomeComponent, name: 'Home', useAsDefault: true }
+])
+export class AppComponent {}

public/docs/_examples/cb-router/ts/app/app.component.4.ts

@@ -0,0 +1,32 @@
+// #docregion silent-navigation
+import {Component} from 'angular2/core';
+import {Router, RouteConfig, ROUTER_DIRECTIVES, Location} from 'angular2/router';
+import {RestrictedComponent} from './restricted.component';
+import {UnauthorizedComponent} from './unauthorized.component';
+
+@Component({
+  selector: 'my-app',
+  directives: [ROUTER_DIRECTIVES],
+  template: `
+    <h3 class="header">Current Path: {{ path }}</h3>
+    <h3 class="header">Current URL: {{ url }}</h3>
+    <nav>
+      <a [routerLink]="['/Restricted']">Restricted</a>
+    </nav>
+    <router-outlet></router-outlet>
+    `
+})
+@RouteConfig([
+  { path: '/restricted', component: RestrictedComponent, name: 'Restricted' },
+  { path: '/unauthorized', component: UnauthorizedComponent, name: 'Unauthorized' }
+])
+export class AppComponent {
+  url: string;
+  path: string;
+  constructor(router: Router, location: Location) {
+    router.subscribe((url: string) => {
+      this.url = `${url}`;
+      this.path = location.path();
+    });
+  }
+}

public/docs/_examples/cb-router/ts/app/app.component.ts

@@ -0,0 +1,38 @@
+// #docregion
+import {Component} from 'angular2/core';
+import {Router, RouteConfig, ROUTER_DIRECTIVES, Location} from 'angular2/router';
+import {RestrictedComponent} from './restricted.component';
+import {UnauthorizedComponent} from './unauthorized.component';
+import {HomeComponent} from './home.component';
+import {NavigatingComponent} from './navigating.component';
+
+@Component({
+  selector: 'my-app',
+  directives: [ROUTER_DIRECTIVES, NavigatingComponent],
+  template: `
+    <h1>Router Cookbook</h1>
+    <navigating></navigating>
+    <h3 class="header">Current Path: {{ path }}</h3>
+    <h3 class="header">Current URL: {{ url }}</h3>
+    <nav>
+      <a [routerLink]="['Home']">Home</a>
+      <a [routerLink]="['Restricted']">Restricted</a>
+    </nav>
+    <router-outlet></router-outlet>
+    `
+})
+@RouteConfig([
+  { path: '/home', component: HomeComponent, name: 'Home', useAsDefault: true },
+  { path: '/restricted', component: RestrictedComponent, name: 'Restricted' },
+  { path: '/unauthorized', component: UnauthorizedComponent, name: 'Unauthorized' }
+])
+export class AppComponent {
+  url: string;
+  path: string;
+  constructor(router: Router, location: Location) {
+    router.subscribe((url: string) => {
+      this.url = `/${url}`;
+      this.path = location.path();
+    });
+  }
+}

public/docs/_examples/cb-router/ts/app/home.component.1.ts

@@ -0,0 +1,10 @@
+// #docregion
+import {Component} from 'angular2/core';
+
+@Component({
+  selector: 'home',
+  template: `
+    <h2>Welcome Home</h2>
+    `
+})
+export class HomeComponent {}

public/docs/_examples/cb-router/ts/app/home.component.2.ts

@@ -0,0 +1,21 @@
+// #docregion
+import {Component} from 'angular2/core';
+import {OnActivate, ComponentInstruction} from 'angular2/router';
+
+@Component({
+  selector: 'home',
+  template: `
+    <h2>Welcome Home</h2>
+    `
+})
+export class HomeComponent implements OnActivate {
+
+  routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
+    return new Promise((resolve) => {
+      // wait 3 seconds to simulate page load
+      setTimeout(() => {
+        resolve();
+      }, 3000);
+    });
+  }
+}

public/docs/_examples/cb-router/ts/app/home.component.ts

@@ -0,0 +1,34 @@
+// #docplaster
+// #docregion
+// #docregion page-title
+import {Component} from 'angular2/core';
+import {OnActivate, ComponentInstruction} from 'angular2/router';
+// #docregion page-title
+import {Title} from 'angular2/platform/browser';
+
+@Component({
+  selector: 'home',
+  template: `
+    <h2>Welcome Home</h2>
+    `
+})
+export class HomeComponent implements OnActivate {
+  // #docregion page-title
+  pageTitle: string = 'Home';
+
+  constructor(private _title: Title) {}
+
+  routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
+    // #docregion page-title
+    this._title.setTitle(this.pageTitle);
+    // #enddocregion page-title
+
+    return new Promise((resolve) => {
+      // wait 3 seconds to simulate page load
+      setTimeout(() => {
+        resolve();
+      }, 3000);
+    });
+    // #docregion page-title
+  }
+}

public/docs/_examples/cb-router/ts/app/main.ts

@@ -0,0 +1,9 @@
+// #docregion
+import {Title, bootstrap} from 'angular2/platform/browser';
+import {ROUTER_PROVIDERS} from 'angular2/router';
+import {AppComponent} from './app.component';
+
+bootstrap(AppComponent, [
+  Title,
+  ROUTER_PROVIDERS
+]);

public/docs/_examples/cb-router/ts/app/navigating.component.ts

@@ -0,0 +1,13 @@
+// #docregion
+import {Component} from 'angular2/core';
+import {Router} from 'angular2/router';
+
+@Component({
+  selector: 'navigating',
+  template: `
+    <h3 *ngIf="router.navigating">LOADING</h3>
+    `
+})
+export class NavigatingComponent {
+  constructor(public router: Router) {}
+}

public/docs/_examples/cb-router/ts/app/restricted.component.1.ts

@@ -0,0 +1,3 @@
+// #docregion silent-url
+this._router.navigateByUrl('/unauthorized', true);
+// #enddocregion silent-url

public/docs/_examples/cb-router/ts/app/restricted.component.ts

@@ -0,0 +1,28 @@
+// #docregion
+// #docregion silent-navigation
+import {Component, OnInit} from 'angular2/core';
+import {Router} from 'angular2/router';
+
+@Component({
+  selector: 'restricted',
+  template: `
+    <h3>Restricted Content</h3>
+
+    <div *ngIf="authorized">Here is some protected content</div>
+  `
+})
+export class RestrictedComponent implements OnInit {
+  authorized: boolean = false;
+  constructor(private _router: Router) {}
+
+  ngOnInit() {
+    if (!this.authorized) {
+      // #docregion silent-navigation
+      let unauthorizedInstruction = this._router.generate(['/Unauthorized']);
+
+      this._router.navigateByInstruction(unauthorizedInstruction, true);
+      // #enddocregion silent-navigation
+    }
+  }
+}
+// #enddocregion silent-navigation

public/docs/_examples/cb-router/ts/app/unauthorized.component.ts

@@ -0,0 +1,10 @@
+// #docregion silent-navigation
+import {Component} from 'angular2/core';
+
+@Component({
+  selector: 'unauthorized',
+  template: `
+    <h2>You don't have sufficient access to this page.</h2>
+    `
+})
+export class UnauthorizedComponent {}

public/docs/_examples/cb-router/ts/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Routing</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- #docregion style -->
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- #enddocregion style -->
+
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
+    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+    <script src="node_modules/angular2/bundles/router.dev.js"></script>
+    <script>
+      System.config({
+        packages: {
+          app: {
+            format: 'register',
+            defaultExtension: 'js'
+          }
+        }
+      });
+      System.import('app/main')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading app...</my-app>
+  </body>
+
+</html>

public/docs/_examples/cb-router/ts/plnkr.json

@@ -0,0 +1,9 @@
+{
+  "description": "Routing Cookbook",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!app/*.[1,2,3,4].*"
+  ],
+  "tags":["cookbook", "router"]
+}

public/docs/ts/latest/cookbook/_data.json

@@ -26,6 +26,11 @@
     "intro": "Render dynamic forms with NgFormModel"
   },
 
+  "router": {
+    "title": "Routing",
+    "intro": "Using the router navigation cycle"
+  },
+
   "set-document-title": {
     "title": "Set the Document Title",
     "intro": "Setting the document or window title using the Title service."