docs:(Tour of Hero Chapter - Http)

public/docs/_examples/toh-4/ts/app/app.component.ts

@@ -23,8 +23,8 @@ import { HeroService } from './hero.service';
     </ul>
     <my-hero-detail [hero]="selectedHero"></my-hero-detail>
   `,
-  // #enddocregion template  
-  styles:[`
+  // #enddocregion template
+  styles: [`
     .selected {
       background-color: #CFD8DC !important;
       color: white;

public/docs/_examples/toh-4/ts/app/mock-heroes.ts

@@ -2,15 +2,15 @@
 import { Hero } from './hero';
 
 export var HEROES: Hero[] = [
-	{"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"}
+  {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'}
 ];
 // #enddocregion

public/docs/_examples/toh-5/ts/app/app.component.ts

@@ -3,12 +3,12 @@
 import { Component } from '@angular/core';
 import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
-import { HeroService } from './hero.service';
 import { DashboardComponent } from './dashboard.component';
 import { HeroesComponent } from './heroes.component';
 // #docregion hero-detail-import
 import { HeroDetailComponent } from './hero-detail.component';
 // #enddocregion hero-detail-import
+import { HeroService } from './hero.service';
 
 @Component({
   selector: 'my-app',

public/docs/_examples/toh-5/ts/app/heroes.component.ts

@@ -4,7 +4,6 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router-deprecated';
 
 import { Hero } from './hero';
-import { HeroDetailComponent } from './hero-detail.component';
 import { HeroService } from './hero.service';
 
 // #docregion metadata
@@ -13,8 +12,7 @@ import { HeroService } from './hero.service';
   selector: 'my-heroes',
 // #enddocregion heroes-component-renaming
   templateUrl: 'app/heroes.component.html',
-  styleUrls:  ['app/heroes.component.css'],
-  directives: [HeroDetailComponent]
+  styleUrls:  ['app/heroes.component.css']
 // #docregion heroes-component-renaming
 })
 // #enddocregion heroes-component-renaming

public/docs/_examples/toh-5/ts/app/mock-heroes.ts

@@ -2,15 +2,15 @@
 import { Hero } from './hero';
 
 export var HEROES: Hero[] = [
-	{"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"}
+  {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'}
 ];
-// #enddocregion
+// #enddocregion

public/docs/_examples/tutorial/e2e-spec.js → public/docs/_examples/toh-6/e2e-spec.js

@@ -1,10 +1,9 @@
-describe('Tutorial', function () {
+describe('TOH Http Chapter', function () {
 
-  beforeAll(function () {
+  beforeEach(function () {
     browser.get('');
   });
 
-
   function getPageStruct() {
     hrefEles = element.all(by.css('my-app a'));
 
@@ -16,12 +15,122 @@ describe('Tutorial', function () {
 
       myHeroesHref: hrefEles.get(1),
       myHeroesParent: element(by.css('my-app my-heroes')),
-      allHeroes: element.all(by.css('my-app my-heroes li')),
+      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(){
+    var page = getPageStruct();
+    var heroCount;
+
+    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');
+
+      var 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(){
+    var page = getPageStruct();
+    var heroCount;
+
+    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 () {
+    var page = getPageStruct();
+    expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
+    var heroEle = page.topHeroes.get(2);
+    var heroDescrEle = heroEle.element(by.css('h4'));
+    var heroDescr;
+
+    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 () {
+    var page = getPageStruct();
+
+    var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
+    var heroEle, heroDescr;
+
+    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, origValue, textToAdd) {
+    var inputEle = page.heroDetail.element(by.css('input'));
+    expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
+    var saveButtonEle = page.heroDetail.element(by.buttonText('Save'));
+    var backButtonEle = page.heroDetail.element(by.buttonText('Back'));
+    expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
+    var 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 () {
     var page = getPageStruct();
     expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
@@ -98,13 +207,16 @@ describe('Tutorial', function () {
     expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details');
     var inputEle = page.heroDetail.element(by.css('input'));
     expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
-    var backButtonEle = page.heroDetail.element(by.css('button'));
+    var buttons = page.heroDetail.all(by.css('button'));
+    var backButtonEle = buttons.get(0);
+    var 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');
     var 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 backButtonEle.click();
+      return saveButtonEle.click();
     });
   }
 

public/docs/_examples/toh-6/ts/.gitignore

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

public/docs/_examples/tutorial/ts/app/app.component.css → public/docs/_examples/toh-6/ts/app/app.component.css

@@ -1,3 +1,15 @@
+/* #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;
@@ -16,13 +28,4 @@ nav a:hover {
 nav a.router-link-active {
   color: #039be5;
 }
-h1 {
-  font-size: 1.2em;
-  color: #999;
-  margin-bottom: 0;
-}
-h2 {
-  font-size: 2em;
-  margin-top: 0;
-  padding-top: 0;
-}
+/* #enddocregion css */

public/docs/_examples/toh-6/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';
+}

public/docs/_examples/tutorial/ts/app/dashboard.component.css → public/docs/_examples/toh-6/ts/app/dashboard.component.css

@@ -1,3 +1,5 @@
+/* #docplaster */
+/* #docregion */
 [class*='col-'] {
   float: left;
 }
@@ -58,3 +60,4 @@ h4 {
 	  min-width: 60px;
 	}
 }
+/* #enddocregion */

public/docs/_examples/toh-6/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>

public/docs/_examples/tutorial/ts/app/dashboard.component.ts → public/docs/_examples/toh-6/ts/app/dashboard.component.ts

@@ -1,7 +1,9 @@
+// #docplaster
+// #docregion
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router-deprecated';
+import { Router }           from '@angular/router-deprecated';
 
-import { Hero } from './hero';
+import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
@@ -10,12 +12,17 @@ import { HeroService } from './hero.service';
   styleUrls: ['app/dashboard.component.css']
 })
 export class DashboardComponent implements OnInit {
+
   heroes: Hero[] = [];
 
-  constructor(private heroService: HeroService, private _router: Router) { }
+  constructor(
+    private _router: Router,
+    private _heroService: HeroService) {
+  }
 
   ngOnInit() {
-    this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5));
+    this._heroService.getHeroes()
+      .then(heroes => this.heroes = heroes.slice(1,5));
   }
 
   gotoDetail(hero: Hero) {

public/docs/_examples/tutorial/ts/app/hero-detail.component.css → public/docs/_examples/toh-6/ts/app/hero-detail.component.css

@@ -1,3 +1,4 @@
+/* #docregion */
 label {
   display: inline-block;
   width: 3em;

public/docs/_examples/toh-6/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>