diff --git a/public/docs/_examples/cb-electron/e2e-spec.ts b/public/docs/_examples/cb-electron/e2e-spec.ts
new file mode 100644
index 0000000000..96277a910a
--- /dev/null
+++ b/public/docs/_examples/cb-electron/e2e-spec.ts
@@ -0,0 +1,225 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+describe('TOH Http Chapter', function () {
+
+ beforeEach(function () {
+ browser.get('');
+ });
+
+ function getPageStruct() {
+ let hrefEles = element.all(by.css('my-app a'));
+
+ return {
+ hrefs: hrefEles,
+ myDashboardHref: hrefEles.get(0),
+ myDashboardParent: element(by.css('my-app my-dashboard')),
+ topHeroes: element.all(by.css('my-app my-dashboard .module.hero')),
+
+ myHeroesHref: hrefEles.get(1),
+ myHeroesParent: element(by.css('my-app my-heroes')),
+ allHeroes: element.all(by.css('my-app my-heroes li .hero-element')),
+
+ firstDeleteButton: element.all(by.buttonText('Delete')).get(0),
+
+ addButton: element.all(by.buttonText('Add New Hero')).get(0),
+
+ heroDetail: element(by.css('my-app my-hero-detail'))
+ };
+ }
+
+ it('should be able to add a hero from the "Heroes" view', function(){
+ let page = getPageStruct();
+ let heroCount: webdriver.promise.Promise<number>;
+
+ page.myHeroesHref.click().then(function() {
+ browser.waitForAngular();
+ heroCount = page.allHeroes.count();
+ expect(heroCount).toBe(10, 'should show 10');
+ }).then(function() {
+ return page.addButton.click();
+ }).then(function(){
+ return save(page, '', 'The New Hero');
+ }).then(function(){
+ browser.waitForAngular();
+
+ heroCount = page.allHeroes.count();
+ expect(heroCount).toBe(11, 'should show 11');
+
+ let newHero = element(by.xpath('//span[@class="hero-element" and contains(text(),"The New Hero")]'));
+ expect(newHero).toBeDefined();
+ });
+ });
+
+ it('should be able to delete hero from "Heroes" view', function(){
+ let page = getPageStruct();
+ let heroCount: webdriver.promise.Promise<number>;
+
+ page.myHeroesHref.click().then(function() {
+ browser.waitForAngular();
+ heroCount = page.allHeroes.count();
+ expect(heroCount).toBe(10, 'should show 10');
+ }).then(function() {
+ return page.firstDeleteButton.click();
+ }).then(function(){
+ browser.waitForAngular();
+ heroCount = page.allHeroes.count();
+ expect(heroCount).toBe(9, 'should show 9');
+ });
+ });
+
+ it('should be able to save details from "Dashboard" view', function () {
+ let page = getPageStruct();
+ expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
+ let heroEle = page.topHeroes.get(2);
+ let heroDescrEle = heroEle.element(by.css('h4'));
+ let heroDescr: string;
+
+ return heroDescrEle.getText().then(function(text) {
+ heroDescr = text;
+ return heroEle.click();
+ }).then(function() {
+ return save(page, heroDescr, '-foo');
+ })
+ .then(function(){
+ return page.myDashboardHref.click();
+ })
+ .then(function() {
+ expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back');
+ expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo');
+ });
+ });
+
+ it('should be able to save details from "Heroes" view', function () {
+ let page = getPageStruct();
+
+ let viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
+ let heroEle: protractor.ElementFinder, heroDescr: string;
+
+ page.myHeroesHref.click().then(function() {
+ expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
+ expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present');
+ expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should not yet be present');
+ heroEle = page.allHeroes.get(0);
+ return heroEle.getText();
+ }).then(function(text) {
+ // remove leading 'id' from the element
+ heroDescr = text.substr(text.indexOf(' ') + 1);
+ return heroEle.click();
+ }).then(function() {
+ expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible');
+ return viewDetailsButtonEle.click();
+ }).then(function() {
+ return save(page, heroDescr, '-bar');
+ })
+ .then(function(){
+ return page.myHeroesHref.click();
+ })
+ .then(function() {
+ expect(heroEle.getText()).toContain(heroDescr + '-bar');
+ });
+ });
+
+ function save(page: any, origValue: string, textToAdd: string) {
+ let inputEle = page.heroDetail.element(by.css('input'));
+ expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
+ let saveButtonEle = page.heroDetail.element(by.buttonText('Save'));
+ let backButtonEle = page.heroDetail.element(by.buttonText('Back'));
+ expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
+ let detailTextEle = page.heroDetail.element(by.css('div h2'));
+ expect(detailTextEle.getText()).toContain(origValue);
+ return sendKeys(inputEle, textToAdd).then(function () {
+ expect(detailTextEle.getText()).toContain(origValue + textToAdd);
+ return saveButtonEle.click();
+ });
+ }
+
+ it('should be able to see the start screen', function () {
+ let page = getPageStruct();
+ expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
+ expect(page.myDashboardHref.getText()).toEqual('Dashboard');
+ expect(page.myHeroesHref.getText()).toEqual('Heroes');
+ });
+
+ it('should be able to see dashboard choices', function () {
+ let page = getPageStruct();
+ expect(page.topHeroes.count()).toBe(4, 'should be 4 dashboard hero choices');
+ });
+
+ it('should be able to toggle the views', function () {
+ let page = getPageStruct();
+
+ expect(page.myDashboardParent.element(by.css('h3')).getText()).toEqual('Top Heroes');
+ page.myHeroesHref.click().then(function() {
+ expect(page.myDashboardParent.isPresent()).toBe(false, 'should no longer see dashboard element');
+ expect(page.allHeroes.count()).toBeGreaterThan(4, 'should be more than 4 heroes shown');
+ return page.myDashboardHref.click();
+ }).then(function() {
+ expect(page.myDashboardParent.isPresent()).toBe(true, 'should once again see the dashboard element');
+ });
+
+ });
+
+ it('should be able to edit details from "Dashboard" view', function () {
+ let page = getPageStruct();
+ expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
+ let heroEle = page.topHeroes.get(3);
+ let heroDescrEle = heroEle.element(by.css('h4'));
+ let heroDescr: string;
+ return heroDescrEle.getText().then(function(text) {
+ heroDescr = text;
+ return heroEle.click();
+ }).then(function() {
+ return editDetails(page, heroDescr, '-foo');
+ }).then(function() {
+ expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back');
+ expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo');
+ });
+ });
+
+ it('should be able to edit details from "Heroes" view', function () {
+ let page = getPageStruct();
+ expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present');
+ let viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
+ let heroEle: protractor.ElementFinder, heroDescr: string;
+ page.myHeroesHref.click().then(function() {
+ expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
+ expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present');
+ expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should not yet be present');
+ heroEle = page.allHeroes.get(2);
+ return heroEle.getText();
+ }).then(function(text) {
+ // remove leading 'id' from the element
+ heroDescr = text.substr(text.indexOf(' ') + 1);
+ return heroEle.click();
+ }).then(function() {
+ expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible');
+ return viewDetailsButtonEle.click();
+ }).then(function() {
+ return editDetails(page, heroDescr, '-bar');
+ }).then(function() {
+ expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be back');
+ expect(heroEle.getText()).toContain(heroDescr + '-bar');
+ expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should again NOT be present');
+ });
+ });
+
+ function editDetails(page: any, origValue: string, textToAdd: string) {
+ expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
+ expect(page.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present');
+ expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details');
+ let inputEle = page.heroDetail.element(by.css('input'));
+ expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
+ let buttons = page.heroDetail.all(by.css('button'));
+ let backButtonEle = buttons.get(0);
+ let saveButtonEle = buttons.get(1);
+ expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
+ expect(saveButtonEle.isDisplayed()).toBe(true, 'should be able to see the save button');
+ let detailTextEle = page.heroDetail.element(by.css('div h2'));
+ expect(detailTextEle.getText()).toContain(origValue);
+ return sendKeys(inputEle, textToAdd).then(function () {
+ expect(detailTextEle.getText()).toContain(origValue + textToAdd);
+ return saveButtonEle.click();
+ });
+ }
+
+});
diff --git a/public/docs/_examples/cb-electron/ts/.gitignore b/public/docs/_examples/cb-electron/ts/.gitignore
new file mode 100644
index 0000000000..9e76e3f401
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/.gitignore
@@ -0,0 +1,3 @@
+**/*.js
+
+!index.js
\ No newline at end of file
diff --git a/public/docs/_examples/cb-electron/ts/app/app.component.css b/public/docs/_examples/cb-electron/ts/app/app.component.css
new file mode 100644
index 0000000000..137e9be7be
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/app.component.css
@@ -0,0 +1,31 @@
+/* #docplaster */
+/* #docregion css */
+h1 {
+ font-size: 1.2em;
+ color: #999;
+ margin-bottom: 0;
+}
+h2 {
+ font-size: 2em;
+ margin-top: 0;
+ padding-top: 0;
+}
+nav a {
+ padding: 5px 10px;
+ text-decoration: none;
+ margin-top: 10px;
+ display: inline-block;
+ background-color: #eee;
+ border-radius: 4px;
+}
+nav a:visited, a:link {
+ color: #607D8B;
+}
+nav a:hover {
+ color: #039be5;
+ background-color: #CFD8DC;
+}
+nav a.router-link-active {
+ color: #039be5;
+}
+/* #enddocregion css */
diff --git a/public/docs/_examples/cb-electron/ts/app/app.component.ts b/public/docs/_examples/cb-electron/ts/app/app.component.ts
new file mode 100644
index 0000000000..22317d4403
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/app.component.ts
@@ -0,0 +1,36 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
+
+import { DashboardComponent } from './dashboard.component';
+import { HeroesComponent } from './heroes.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroService } from './hero.service';
+
+@Component({
+ selector: 'my-app',
+
+ template: `
+ <h1>{{title}}</h1>
+ <nav>
+ <a [routerLink]="['Dashboard']">Dashboard</a>
+ <a [routerLink]="['Heroes']">Heroes</a>
+ </nav>
+ <router-outlet></router-outlet>
+ `,
+ styleUrls: ['app/app.component.css'],
+ directives: [ROUTER_DIRECTIVES],
+ providers: [
+ ROUTER_PROVIDERS,
+ HeroService,
+ ]
+})
+@RouteConfig([
+ { path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
+ { path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent },
+ { path: '/heroes', name: 'Heroes', component: HeroesComponent }
+])
+export class AppComponent {
+ title = 'Tour of Heroes';
+}
diff --git a/public/docs/_examples/cb-electron/ts/app/dashboard.component.css b/public/docs/_examples/cb-electron/ts/app/dashboard.component.css
new file mode 100644
index 0000000000..ce6e963a5f
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/dashboard.component.css
@@ -0,0 +1,63 @@
+/* #docplaster */
+/* #docregion */
+[class*='col-'] {
+ float: left;
+}
+*, *:after, *:before {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+h3 {
+ text-align: center; margin-bottom: 0;
+}
+[class*='col-'] {
+ padding-right: 20px;
+ padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+ padding-right: 0;
+}
+.grid {
+ margin: 0;
+}
+.col-1-4 {
+ width: 25%;
+}
+.module {
+ padding: 20px;
+ text-align: center;
+ color: #eee;
+ max-height: 120px;
+ min-width: 120px;
+ background-color: #607D8B;
+ border-radius: 2px;
+}
+h4 {
+ position: relative;
+}
+.module:hover {
+ background-color: #EEE;
+ cursor: pointer;
+ color: #607d8b;
+}
+.grid-pad {
+ padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+ padding-right: 20px;
+}
+@media (max-width: 600px) {
+ .module {
+ font-size: 10px;
+ max-height: 75px; }
+}
+@media (max-width: 1024px) {
+ .grid {
+ margin: 0;
+ }
+ .module {
+ min-width: 60px;
+ }
+}
+/* #enddocregion */
diff --git a/public/docs/_examples/cb-electron/ts/app/dashboard.component.html b/public/docs/_examples/cb-electron/ts/app/dashboard.component.html
new file mode 100644
index 0000000000..028eab6eb3
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/dashboard.component.html
@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+<!-- #docregion click -->
+ <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
+<!-- #enddocregion click -->
+ <div class="module hero">
+ <h4>{{hero.name}}</h4>
+ </div>
+ </div>
+</div>
diff --git a/public/docs/_examples/cb-electron/ts/app/dashboard.component.ts b/public/docs/_examples/cb-electron/ts/app/dashboard.component.ts
new file mode 100644
index 0000000000..8ca1e3a2e2
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/dashboard.component.ts
@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router-deprecated';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+ selector: 'my-dashboard',
+ templateUrl: 'app/dashboard.component.html',
+ styleUrls: ['app/dashboard.component.css']
+})
+export class DashboardComponent implements OnInit {
+
+ heroes: Hero[] = [];
+
+ constructor(
+ private router: Router,
+ private heroService: HeroService) {
+ }
+
+ ngOnInit() {
+ this.heroService.getHeroes()
+ .then(heroes => this.heroes = heroes.slice(1, 5));
+ }
+
+ gotoDetail(hero: Hero) {
+ let link = ['HeroDetail', { id: hero.id }];
+ this.router.navigate(link);
+ }
+}
diff --git a/public/docs/_examples/cb-electron/ts/app/hero-detail.component.css b/public/docs/_examples/cb-electron/ts/app/hero-detail.component.css
new file mode 100644
index 0000000000..ab2437efd8
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/hero-detail.component.css
@@ -0,0 +1,30 @@
+/* #docregion */
+label {
+ display: inline-block;
+ width: 3em;
+ margin: .5em 0;
+ color: #607D8B;
+ font-weight: bold;
+}
+input {
+ height: 2em;
+ font-size: 1em;
+ padding-left: .4em;
+}
+button {
+ margin-top: 20px;
+ font-family: Arial;
+ background-color: #eee;
+ border: none;
+ padding: 5px 10px;
+ border-radius: 4px;
+ cursor: pointer; cursor: hand;
+}
+button:hover {
+ background-color: #cfd8dc;
+}
+button:disabled {
+ background-color: #eee;
+ color: #ccc;
+ cursor: auto;
+}
diff --git a/public/docs/_examples/cb-electron/ts/app/hero-detail.component.html b/public/docs/_examples/cb-electron/ts/app/hero-detail.component.html
new file mode 100644
index 0000000000..f532eb0109
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/hero-detail.component.html
@@ -0,0 +1,13 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<div *ngIf="hero">
+ <h2>{{hero.name}} details!</h2>
+ <div>
+ <label>id: </label>{{hero.id}}</div>
+ <div>
+ <label>name: </label>
+ <input [(ngModel)]="hero.name" placeholder="name" />
+ </div>
+ <button (click)="goBack()">Back</button>
+ <button (click)="save()">Save</button>
+</div>
\ No newline at end of file
diff --git a/public/docs/_examples/cb-electron/ts/app/hero-detail.component.ts b/public/docs/_examples/cb-electron/ts/app/hero-detail.component.ts
new file mode 100644
index 0000000000..bce249dcc1
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/hero-detail.component.ts
@@ -0,0 +1,60 @@
+// #docplaster
+// #docregion, variables-imports
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+// #enddocregion variables-imports
+import { RouteParams } from '@angular/router-deprecated';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+ selector: 'my-hero-detail',
+ templateUrl: 'app/hero-detail.component.html',
+ styleUrls: ['app/hero-detail.component.css']
+})
+// #docregion variables-imports
+export class HeroDetailComponent implements OnInit {
+ @Input() hero: Hero;
+ @Output() close = new EventEmitter();
+ error: any;
+ navigated = false; // true if navigated here
+ // #enddocregion variables-imports
+
+ constructor(
+ private heroService: HeroService,
+ private routeParams: RouteParams) {
+ }
+
+ // #docregion ngOnInit
+ ngOnInit() {
+ if (this.routeParams.get('id') !== null) {
+ let id = +this.routeParams.get('id');
+ this.navigated = true;
+ this.heroService.getHero(id)
+ .then(hero => this.hero = hero);
+ } else {
+ this.navigated = false;
+ this.hero = new Hero();
+ }
+ }
+ // #enddocregion ngOnInit
+ // #docregion save
+ save() {
+ this.heroService
+ .save(this.hero)
+ .then(hero => {
+ this.hero = hero; // saved hero, w/ id if new
+ this.goBack(hero);
+ })
+ .catch(error => this.error = error); // TODO: Display error message
+ }
+ // #enddocregion save
+ // #docregion goback
+ goBack(savedHero: Hero = null) {
+ this.close.emit(savedHero);
+ if (this.navigated) { window.history.back(); }
+ }
+ // #enddocregion goback
+}
+
diff --git a/public/docs/_examples/cb-electron/ts/app/hero.service.ts b/public/docs/_examples/cb-electron/ts/app/hero.service.ts
new file mode 100644
index 0000000000..fa1e1ac4e4
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/hero.service.ts
@@ -0,0 +1,99 @@
+// #docplaster
+// #docregion
+import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http';
+
+// #docregion rxjs
+import 'rxjs/add/operator/toPromise';
+// #enddocregion rxjs
+
+import { Hero } from './hero';
+
+@Injectable()
+export class HeroService {
+
+ private heroesUrl = 'app/heroes'; // URL to web api
+
+ constructor(private http: Http) { }
+
+ // #docregion get-heroes
+ getHeroes(): Promise<Hero[]> {
+ return this.http.get(this.heroesUrl)
+ // #docregion to-promise
+ .toPromise()
+ // #enddocregion to-promise
+ // #docregion to-data
+ .then(response => response.json().data)
+ // #enddocregion to-data
+ // #docregion catch
+ .catch(this.handleError);
+ // #enddocregion catch
+ }
+ // #enddocregion get-heroes
+
+ getHero(id: number) {
+ return this.getHeroes()
+ .then(heroes => heroes.filter(hero => hero.id === id)[0]);
+ }
+
+ // #docregion save
+ save(hero: Hero): Promise<Hero> {
+ if (hero.id) {
+ return this.put(hero);
+ }
+ return this.post(hero);
+ }
+ // #enddocregion save
+
+ // #docregion delete-hero
+ delete(hero: Hero) {
+ let headers = new Headers();
+ headers.append('Content-Type', 'application/json');
+
+ let url = `${this.heroesUrl}/${hero.id}`;
+
+ return this.http
+ .delete(url, headers)
+ .toPromise()
+ .catch(this.handleError);
+ }
+ // #enddocregion delete-hero
+
+ // #docregion post-hero
+ // Add new Hero
+ private post(hero: Hero): Promise<Hero> {
+ let headers = new Headers({
+ 'Content-Type': 'application/json'});
+
+ return this.http
+ .post(this.heroesUrl, JSON.stringify(hero), {headers: headers})
+ .toPromise()
+ .then(res => res.json().data)
+ .catch(this.handleError);
+ }
+ // #enddocregion post-hero
+
+ // #docregion put-hero
+ // Update existing Hero
+ private put(hero: Hero) {
+ let headers = new Headers();
+ headers.append('Content-Type', 'application/json');
+
+ let url = `${this.heroesUrl}/${hero.id}`;
+
+ return this.http
+ .put(url, JSON.stringify(hero), {headers: headers})
+ .toPromise()
+ .then(() => hero)
+ .catch(this.handleError);
+ }
+ // #enddocregion put-hero
+
+ // #docregion error-handler
+ private handleError(error: any) {
+ console.error('An error occurred', error);
+ return Promise.reject(error.message || error);
+ }
+ // #enddocregion error-handler
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-electron/ts/app/hero.ts b/public/docs/_examples/cb-electron/ts/app/hero.ts
new file mode 100644
index 0000000000..e3eac516da
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+ id: number;
+ name: string;
+}
diff --git a/public/docs/_examples/cb-electron/ts/app/heroes.component.css b/public/docs/_examples/cb-electron/ts/app/heroes.component.css
new file mode 100644
index 0000000000..35e45af98d
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/heroes.component.css
@@ -0,0 +1,59 @@
+.selected {
+ background-color: #CFD8DC !important;
+ color: white;
+}
+.heroes {
+ margin: 0 0 2em 0;
+ list-style-type: none;
+ padding: 0;
+ width: 15em;
+}
+.heroes li {
+ cursor: pointer;
+ position: relative;
+ left: 0;
+ background-color: #EEE;
+ margin: .5em;
+ padding: .3em 0;
+ height: 1.6em;
+ border-radius: 4px;
+}
+.heroes li:hover {
+ color: #607D8B;
+ background-color: #DDD;
+ left: .1em;
+}
+.heroes li.selected:hover {
+ background-color: #BBD8DC !important;
+ color: white;
+}
+.heroes .text {
+ position: relative;
+ top: -3px;
+}
+.heroes .badge {
+ display: inline-block;
+ font-size: small;
+ color: white;
+ padding: 0.8em 0.7em 0 0.7em;
+ background-color: #607D8B;
+ line-height: 1em;
+ position: relative;
+ left: -1px;
+ top: -4px;
+ height: 1.8em;
+ margin-right: .8em;
+ border-radius: 4px 0 0 4px;
+}
+button {
+ font-family: Arial;
+ background-color: #eee;
+ border: none;
+ padding: 5px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ cursor: hand;
+}
+button:hover {
+ background-color: #cfd8dc;
+}
diff --git a/public/docs/_examples/cb-electron/ts/app/heroes.component.html b/public/docs/_examples/cb-electron/ts/app/heroes.component.html
new file mode 100644
index 0000000000..705c67677f
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/heroes.component.html
@@ -0,0 +1,26 @@
+<!-- #docregion -->
+<h2>My Heroes</h2>
+<ul class="heroes">
+ <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
+ <span class="hero-element">
+ <span class="badge">{{hero.id}}</span> {{hero.name}}
+ </span>
+<!-- #docregion delete-hero -->
+ <button class="delete-button" (click)="delete(hero, $event)">Delete</button>
+<!-- #enddocregion delete-hero -->
+ </li>
+</ul>
+
+<!-- #docregion add-hero -->
+<button (click)="addHero()">Add New Hero</button>
+<div *ngIf="addingHero">
+ <my-hero-detail (close)="close($event)"></my-hero-detail>
+</div>
+<!-- #enddocregion add-hero -->
+
+<div *ngIf="selectedHero">
+ <h2>
+ {{selectedHero.name | uppercase}} is my hero
+ </h2>
+ <button (click)="gotoDetail()">View Details</button>
+</div>
diff --git a/public/docs/_examples/cb-electron/ts/app/heroes.component.ts b/public/docs/_examples/cb-electron/ts/app/heroes.component.ts
new file mode 100644
index 0000000000..df3f26c69b
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/heroes.component.ts
@@ -0,0 +1,71 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router-deprecated';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+// #docregion hero-detail-component
+import { HeroDetailComponent } from './hero-detail.component';
+
+@Component({
+ selector: 'my-heroes',
+ templateUrl: 'app/heroes.component.html',
+ styleUrls: ['app/heroes.component.css'],
+ directives: [HeroDetailComponent]
+})
+// #enddocregion hero-detail-component
+export class HeroesComponent implements OnInit {
+ heroes: Hero[];
+ selectedHero: Hero;
+ addingHero = false;
+ error: any;
+
+ constructor(
+ private router: Router,
+ private heroService: HeroService) { }
+
+ getHeroes() {
+ this.heroService
+ .getHeroes()
+ .then(heroes => this.heroes = heroes)
+ .catch(error => this.error = error); // TODO: Display error message
+ }
+
+ // #docregion add
+ addHero() {
+ this.addingHero = true;
+ this.selectedHero = null;
+ }
+
+ close(savedHero: Hero) {
+ this.addingHero = false;
+ if (savedHero) { this.getHeroes(); }
+ }
+ // #enddocregion add
+
+ // #docregion delete
+ delete(hero: Hero, event: any) {
+ event.stopPropagation();
+ this.heroService
+ .delete(hero)
+ .then(res => {
+ this.heroes = this.heroes.filter(h => h !== hero);
+ if (this.selectedHero === hero) { this.selectedHero = null; }
+ })
+ .catch(error => this.error = error); // TODO: Display error message
+ }
+ // #enddocregion delete
+
+ ngOnInit() {
+ this.getHeroes();
+ }
+
+ onSelect(hero: Hero) {
+ this.selectedHero = hero;
+ this.addingHero = false;
+ }
+
+ gotoDetail() {
+ this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
+ }
+}
diff --git a/public/docs/_examples/cb-electron/ts/app/in-memory-data.service.ts b/public/docs/_examples/cb-electron/ts/app/in-memory-data.service.ts
new file mode 100644
index 0000000000..791b6ae2c5
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/in-memory-data.service.ts
@@ -0,0 +1,18 @@
+// #docregion
+export class InMemoryDataService {
+ createDb() {
+ let heroes = [
+ {id: 11, name: 'Mr. Nice'},
+ {id: 12, name: 'Narco'},
+ {id: 13, name: 'Bombasto'},
+ {id: 14, name: 'Celeritas'},
+ {id: 15, name: 'Magneta'},
+ {id: 16, name: 'RubberMan'},
+ {id: 17, name: 'Dynama'},
+ {id: 18, name: 'Dr IQ'},
+ {id: 19, name: 'Magma'},
+ {id: 20, name: 'Tornado'}
+ ];
+ return {heroes};
+ }
+}
diff --git a/public/docs/_examples/cb-electron/ts/app/main.ts b/public/docs/_examples/cb-electron/ts/app/main.ts
new file mode 100644
index 0000000000..958b9a8c69
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/app/main.ts
@@ -0,0 +1,28 @@
+// #docplaster
+// #docregion final
+// Imports for loading & configuring the in-memory web api
+import { XHRBackend } from '@angular/http';
+
+import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
+import { InMemoryDataService } from './in-memory-data.service';
+
+// The usual bootstrapping imports
+// #docregion v1
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { HTTP_PROVIDERS } from '@angular/http';
+
+import { AppComponent } from './app.component';
+
+// #enddocregion v1, final
+/*
+// #docregion v1
+bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
+// #enddocregion v1
+ */
+// #docregion final
+bootstrap(AppComponent, [
+ HTTP_PROVIDERS,
+ { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
+ { provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data
+]);
+// #enddocregion final
diff --git a/public/docs/_examples/cb-electron/ts/example-config.json b/public/docs/_examples/cb-electron/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-electron/ts/index.html b/public/docs/_examples/cb-electron/ts/index.html
new file mode 100644
index 0000000000..082f913c47
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <base href=".">
+ <title>Angular 2 Tour of Heroes - Electron</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <link rel="stylesheet" href="styles.css">
+ <link rel="stylesheet" href="sample.css">
+
+ <!-- Polyfill(s) for older browsers -->
+ <script src="node_modules/core-js/client/shim.min.js"></script>
+
+ <script src="node_modules/zone.js/dist/zone.js"></script>
+ <script src="node_modules/reflect-metadata/Reflect.js"></script>
+ <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+ <script src="systemjs.config.js"></script>
+ <script>
+ System.import('app').catch(function(err){ console.error(err); });
+ </script>
+ </head>
+
+ <body>
+ <my-app>Loading...</my-app>
+ </body>
+</html>
diff --git a/public/docs/_examples/cb-electron/ts/index.js b/public/docs/_examples/cb-electron/ts/index.js
new file mode 100644
index 0000000000..7de00a7e19
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/index.js
@@ -0,0 +1,53 @@
+// #docregion
+//This configuration is a sample from the Electron Quick Start http://electron.atom.io/docs/tutorial/quick-start/
+
+const electron = require('electron');
+// Module to control application life.
+const {app} = electron;
+// Module to create native browser window.
+const {BrowserWindow} = electron;
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let win;
+
+function createWindow() {
+ // Create the browser window.
+ win = new BrowserWindow({width: 800, height: 600});
+
+ // and load the index.html of the app.
+ win.loadURL(`file://${__dirname}/index.html`);
+
+ // Open the DevTools.
+ win.webContents.openDevTools();
+
+ // Emitted when the window is closed.
+ win.on('closed', () => {
+ // Dereference the window object, usually you would store windows
+ // in an array if your app supports multi windows, this is the time
+ // when you should delete the corresponding element.
+ win = null;
+ });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+ // On macOS it is common for applications and their menu bar
+ // to stay active until the user quits explicitly with Cmd + Q
+ if (process.platform !== 'darwin') {
+ app.quit();
+ }
+});
+
+app.on('activate', () => {
+ // On macOS it's common to re-create a window in the app when the
+ // dock icon is clicked and there are no other windows open.
+ if (win === null) {
+ createWindow();
+ }
+});
diff --git a/public/docs/_examples/cb-electron/ts/sample.css b/public/docs/_examples/cb-electron/ts/sample.css
new file mode 100644
index 0000000000..042f0494f6
--- /dev/null
+++ b/public/docs/_examples/cb-electron/ts/sample.css
@@ -0,0 +1,8 @@
+button.delete-button{
+ float:right;
+ background-color: gray !important;
+ color:white;
+}
+
+
+
diff --git a/public/docs/ts/latest/cookbook/toh-electron.jade b/public/docs/ts/latest/cookbook/toh-electron.jade
new file mode 100644
index 0000000000..f8a16603c3
--- /dev/null
+++ b/public/docs/ts/latest/cookbook/toh-electron.jade
@@ -0,0 +1,97 @@
+include ../_util-fns
+
+:marked
+ JavaScript has traditionally been a website scripting language, but has become a popular language for desktop and server side development as well.
+
+ In this cookbook we show how to create cross platform dektop applications using Angular and Electron.
+
+<a id="toc"></a>
+:marked
+ ## Table of contents
+
+ [Electron](#electron)
+
+ [Adding Tour of Heroes](#toh)
+
+ [Running the Application](#running-application)
+
+.l-main-section
+<a id="electron"></a>
+:marked
+ ## Electron
+
+ Electron provides a runtime envrionment for executing JavaScript in dektop applications.
+
+ We will take our existing <a href="/docs/ts/latest/tutorial/toh-pt6.html">Tour of Heroes application</a> and turn it into an Electron dekstop application instead of a traditional web application.
+
+ Before we can get started we have to install the Electron runtime.
+
+ The latest build of Electron can be installed by running `npm install -g electron-prebuilt`.
+
+ Installing `electron-prebuilt` with `-g` makes the installation global, but this is not a requirement.
+
+.l-main-section
+<a id="electron"></a>
+:marked
+ ## Adding Tour of Heroes
+
+ It may seem like an ambitious goal to convert an application like Tour of Heroes to a dektop application. The question is, can it be done without making major changes to the existing code?
+
+ Luckily the answer is yes. In fact the code can be ported to Electron nearly without any code changes at all.
+
+ We pick up where Tour of Heroes left of with the following files:
+
+.filetree
+ .file angular2-tour-of-heroes
+ .children
+ .file app
+ .children
+ .file app.component.ts
+ .file app.component.css
+ .file dashboard.component.css
+ .file dashboard.component.html
+ .file dashboard.component.ts
+ .file hero.ts
+ .file hero-detail.component.css
+ .file hero-detail.component.html
+ .file hero-detail.component.ts
+ .file hero.service.ts
+ .file heroes.component.css
+ .file heroes.component.html
+ .file heroes.component.ts
+ .file main.ts
+ .file hero-data.service.ts
+ .file node_modules ...
+ .file typings ...
+ .file index.html
+ .file package.json
+ .file styles.css
+ .file sample.css
+ .file systemjs.config.json
+ .file tsconfig.json
+ .file typings.json
+
+:marked
+ The only modification we have to make is change the `href` of the base tag to `href="."` from `href="/"`
++makeExample('cb-electron/ts/index.html', 'base', 'ts/index.html')(format=".")
+
+:marked
+ The `href` change is necessary since Electron will reference files as physical file paths instead of relative web urls.
+
+.l-main-section
+<a id="running-application"></a>
+:marked
+ ## Running the Application
+
+ In order to run our Tour of Heroes application we have to create a simple Electron application to host our Angular code.
+
+ We have defined the Electron application in index.js and put it in the same folder as index.html.
+
++makeExample('cb-electron/ts/index.js', null, 'index.js')(format=".")
+
+:marked
+ We can now launch the Electron application by running `electron` from the command line, and pass it the path to the application as a command line argument.
+
+ If we are starting the application from the same folder as index.html we can simple start it as `electron .`
+
+
\ No newline at end of file