{{hero.name}} details!
-{{hero.id}}
+ {{hero.name}} details
+
+ {{hero.id}}
+
@@ -16,5 +19,5 @@ import {Hero} from './hero';
inputs: ['hero']
})
export class HeroDetailComponent {
- public hero: Hero;
+ hero: Hero;
}
diff --git a/public/docs/_examples/toh-5/e2e-spec.js b/public/docs/_examples/toh-5/e2e-spec.js
new file mode 100644
index 0000000000..f35fcd1287
--- /dev/null
+++ b/public/docs/_examples/toh-5/e2e-spec.js
@@ -0,0 +1,111 @@
+describe('Tutorial', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+
+ function getPageStruct() {
+ 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')),
+
+ heroDetail: element(by.css('my-app my-hero-detail'))
+ }
+ }
+
+ it('should be able to see the start screen', function () {
+ var 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 () {
+ var page = getPageStruct();
+ expect(page.topHeroes.count()).toBe(4, "should be 4 dashboard hero choices");
+ });
+
+ it('should be able to toggle the views', function () {
+ var 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 () {
+ var page = getPageStruct();
+ expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
+ var heroEle = page.topHeroes.get(3);
+ var heroDescrEle = heroEle.element(by.css('h4'));
+ var heroDescr;
+ 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 () {
+ var page = getPageStruct();
+ expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present');
+ 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(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, origValue, textToAdd) {
+ 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');
+ 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'));
+ 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 backButtonEle.click();
+ });
+ }
+
+});
diff --git a/public/docs/_examples/toh-5/ts-snippets/app/app.component.pt4.ts b/public/docs/_examples/toh-5/ts-snippets/app/app.component.pt4.ts
deleted file mode 100644
index aed30ab470..0000000000
--- a/public/docs/_examples/toh-5/ts-snippets/app/app.component.pt4.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-// #docregion
-import {Component} from 'angular2/angular2';
-
-@Component({selector: 'my-app'})
-export class AppComponent { }
-// #enddocregion
-
-// #docregion initialize-routes-property
-export class AppComponent {
- public title = 'Tour of Heroes';
- public routes = Routes;
-}
-// #enddocregion initialize-routes-property
-
-// #docregion oninit
-onInit() {
- this.heroes = this.getHeroes();
-}
-
-getHeroes() {
- this.heroes = [];
-
- this._heroService.getHeroes()
- .then((heroes: Hero[]) => this.heroes = heroes);
-
- return this.heroes;
-}
-// #enddocregion oninit
-
-// #docregion styles
-styles: [`
- .router-link {padding: 5px;text-decoration: none;}
- .router-link:visited, .router-link:link {color: #444;}
- .router-link:hover {color: white; background-color: #1171a3; text-decoration: none;}
- .router-link.router-link-active {color: white; background-color: #52b9e9; text-decoration: none;}
-`],
-// #enddocregion styles
-
-// #docregion import-params
-import {RouteParams} from 'angular2/router';
-// #enddocregion import-params
-// #docregion inject-routeparams
-constructor(private _routeParams: RouteParams) {}
-// #enddocregion inject-routeparams
-// #docregion access-params
-export class HeroDetailComponent implements OnInit {
-
-onInit() { }
-// #enddocregion access-params
-// #docregion import-onit
-import {Component, FORM_DIRECTIVES, OnInit} from 'angular2/angular2';
-// #enddocregion import-onit
-// #docregion onit-id-param
-onInit() { let id = +this._routeParams.get('id'); // TODO: get the hero using it’s id }
-// #enddocregion onit-id-param
-
-// #docregion onit-hero-id
-onInit() {
- if (!this.hero) {
- let id = +this._routeParams.get('id');
- // TODO: get the hero using it’s id
- }
-}
-// #docregion onit-hero-id
-
-// #docregion inject-hero-service
-constructor(
- private _heroService: HeroService,
- private _routeParams: RouteParams) {
-}
-// #docregion inject-hero-service
-
-// #docregion onit-hero-method
- onInit() {
- if (!this.hero) {
- let id = +this._routeParams.get('id');
- this._heroService.getHero(id).then((hero: Hero) => this.hero = hero);
- }
- }
-// #docregion onit-hero-method
-
-// #docregion select-hero
-import {Router} from 'angular2/router';
-import {Routes} from './route.config';
-
-constructor(private _heroService: HeroService, private _router: Router) { }
-
-gotoDetail() {
- this._router.navigate([`/${Routes.detail.as}`, { id: this.selectedHero.id }]);
-}
-// #enddocregion select-hero
-
-// #docregion reference-heroes-component
-@Component({
- selector: 'my-heroes',
- templateUrl: 'app/heroes.component.html',
- styleUrls: ['app/heroes.component.css'],
- directives: [FORM_DIRECTIVES, HeroDetailComponent]
-})
-export class HeroesComponent {
-// #docregion reference-heroes-component
-
-// #docregion reference-hero-detail-component
-@Component({
- selector: 'my-hero-detail',
- templateUrl: 'app/hero-detail.component.html',
- directives: [FORM_DIRECTIVES],
- inputs: ['hero']
-})
-export class HeroDetailComponent {
-// #enddocregion reference-hero-detail-component
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts-snippets/app/hero.service.pt4.ts b/public/docs/_examples/toh-5/ts-snippets/app/hero.service.pt4.ts
deleted file mode 100644
index a30e6632e6..0000000000
--- a/public/docs/_examples/toh-5/ts-snippets/app/hero.service.pt4.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion get-hero-method
- getHero(id: number) {
- return Promise.resolve(HEROES)
- .then((heroes: Hero[]) => { return heroes.filter((h) => {
- return h.id === id;
- })[0]});
- }
-// #docregion get-hero-method
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts-snippets/app/index.pt4.html b/public/docs/_examples/toh-5/ts-snippets/app/index.pt4.html
deleted file mode 100644
index dd397ddbc8..0000000000
--- a/public/docs/_examples/toh-5/ts-snippets/app/index.pt4.html
+++ /dev/null
@@ -1,186 +0,0 @@
-
-
- (resolve =>
+ setTimeout(()=>resolve(HEROES), 2000) // 2 seconds
+ );
+ }
+
+ //#docregion get-hero
+ getHero(id: number) {
+ return Promise.resolve(HEROES).then(
+ heroes => heroes.filter(hero => hero.id === id)[0]
+ );
+ }
+ //#enddocregion get-hero
+}
+// #enddocregion
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/hero.ts b/public/docs/_examples/toh-5/ts/app/hero.ts
new file mode 100644
index 0000000000..a61b497759
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/hero.ts
@@ -0,0 +1,4 @@
+export interface Hero {
+ id: number;
+ name: string;
+}
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.css b/public/docs/_examples/toh-5/ts/app/heroes.component.css
new file mode 100644
index 0000000000..f74c0e1642
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.css
@@ -0,0 +1,47 @@
+/* #docregion */
+.selected {
+ background-color: #CFD8DC !important;
+ color: white;
+}
+.heroes {
+ margin: 0 0 2em 0;
+ list-style-type: none;
+ padding: 0;
+ width: 10em;
+}
+.heroes li {
+ cursor: pointer;
+ position: relative;
+ left: 0;
+ background-color: #EEE;
+ margin: .5em;
+ padding: .3em 0em;
+ height: 1.6em;
+ border-radius: 4px;
+}
+.heroes li.selected:hover {
+ color: white;
+}
+.heroes li:hover {
+ color: #607D8B;
+ background-color: #EEE;
+ left: .1em;
+}
+.heroes .text {
+ position: relative;
+ top: -3px;
+}
+.heroes .badge {
+ display: inline-block;
+ font-size: small;
+ color: white;
+ padding: 0.8em 0.7em 0em 0.7em;
+ background-color: #607D8B;
+ line-height: 1em;
+ position: relative;
+ left: -1px;
+ top: -4px;
+ height: 1.8em;
+ margin-right: .8em;
+ border-radius: 4px 0px 0px 4px;
+}
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.html b/public/docs/_examples/toh-5/ts/app/heroes.component.html
new file mode 100644
index 0000000000..9bcd2ba4e8
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.html
@@ -0,0 +1,21 @@
+
+
+Angular 2 Tour of Heroes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
diff --git a/public/docs/_examples/toh-5/ts/plnkr.json b/public/docs/_examples/toh-5/ts/plnkr.json
new file mode 100644
index 0000000000..019630c28f
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+ "description": "Tour of Heroes: Part 5",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[1,2].*"
+ ],
+ "tags": ["tutorial", "tour", "heroes", "router"]
+}
diff --git a/public/docs/_examples/toh-5/ts/styles.css b/public/docs/_examples/toh-5/ts/styles.css
new file mode 100644
index 0000000000..88ec8391d3
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/styles.css
@@ -0,0 +1,7 @@
+/* #docplaster */
+/* #docregion */
+h2 { color: #444; font-weight: lighter; }
+body { margin: 2em; }
+body, input[text], button { color: #888; font-family: Cambria, Georgia; }
+button { padding: 0.2em; font-size: 14px}
+* { font-family: Arial; }
diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
index 62bf854264..ae5f048a57 100644
--- a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
@@ -18,6 +18,7 @@ export class DashboardComponent implements OnInit {
}
gotoDetail(hero: Hero) {
- this._router.navigate(['HeroDetail', { id: hero.id }]);
+ let link = ['HeroDetail', { id: hero.id }];
+ this._router.navigate(link);
}
}
diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
index 5540704913..0014918b8b 100644
--- a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
@@ -1,5 +1,6 @@
import {Component, OnInit} from 'angular2/core';
import {RouteParams} from 'angular2/router';
+
import {Hero} from './hero';
import {HeroService} from './hero.service';
@@ -17,10 +18,8 @@ export class HeroDetailComponent implements OnInit {
}
ngOnInit() {
- if (!this.hero) {
- let id = +this._routeParams.get('id');
- this._heroService.getHero(id).then(hero => this.hero = hero);
- }
+ let id = +this._routeParams.get('id');
+ this._heroService.getHero(id).then(hero => this.hero = hero);
}
goBack() {
diff --git a/public/docs/_examples/tutorial/ts/app/hero.service.ts b/public/docs/_examples/tutorial/ts/app/hero.service.ts
index 45b4e25adf..c3d6bc0cee 100644
--- a/public/docs/_examples/tutorial/ts/app/hero.service.ts
+++ b/public/docs/_examples/tutorial/ts/app/hero.service.ts
@@ -1,14 +1,15 @@
import {Injectable} from 'angular2/core';
-import {HEROES} from './mock-heroes';
+import {HEROES} from './mock-heroes';
@Injectable()
export class HeroService {
- getHeroes() {
- return Promise.resolve(HEROES);
- }
+ getHeroes() {
+ return Promise.resolve(HEROES);
+ }
getHero(id: number) {
- return Promise.resolve(HEROES)
- .then(heroes => heroes.filter(h => h.id === id)[0]);
- }
+ return Promise.resolve(HEROES).then(
+ heroes => heroes.filter(hero => hero.id === id)[0]
+ );
+ }
}
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index 40536e4050..09c8ac4ae3 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -38,7 +38,13 @@ include ../../../../_includes/_util-fns
up to a modular, multi-view design with child routes.
Try that [live final version](/resources/live-examples/router/ts/plnkr.html).
-
+.l-sub-section
+ :marked
+ In plunker, to see routing changes in the browser address bar,
+ pop out the preview window by clicking this blue button in the upper right corner:
+
+ 
+:marked
But first, an overview of router basics.
.l-main-section
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index 479f4a7d94..2eed334a1f 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -204,7 +204,8 @@ figure.image-display
We shouldn't expect `json()` to return the heroes array directly.
The server we're calling always wraps JSON results in an object with a `data`
property. We have to unwrap it to get the heroes.
- This is conventional web api behavior, driven by security concerns.
+ This is conventional web api behavior, driven by
+ [security concerns](https://www.owasp.org/index.php/OWASP_AJAX_Security_Guidelines#Always_return_JSON_with_an_Object_on_the_outside).
:marked
### Do not return the response object
Our `getHeroes()` could have returned the `Observable`.
diff --git a/public/docs/ts/latest/tutorial/_data.json b/public/docs/ts/latest/tutorial/_data.json
index d127c8f089..e70d5aaa55 100644
--- a/public/docs/ts/latest/tutorial/_data.json
+++ b/public/docs/ts/latest/tutorial/_data.json
@@ -20,5 +20,9 @@
"toh-pt4": {
"title": "Services",
"intro": "We create a reusable service to manage our hero data calls"
+ },
+ "toh-pt5": {
+ "title": "Routing",
+ "intro": "We add the Angular Component Router and learn to navigate among the views"
}
}
\ No newline at end of file
diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade
index de47528fd2..daffd1b6bc 100644
--- a/public/docs/ts/latest/tutorial/toh-pt4.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt4.jade
@@ -110,7 +110,7 @@ code-example(format="." language="bash").
We already have mock `Hero` data sitting in the `AppComponent`. It doesn't belong there. It doesn't belong *here* either.
We'll move the mock data to its own file.
- Cut the the `HEROES` array from `app.component.ts` and paste it to a new file in the `app` folder named `mock-heroes.ts`.
+ Cut the `HEROES` array from `app.component.ts` and paste it to a new file in the `app` folder named `mock-heroes.ts`.
We copy the `import {Hero} ...` statement as well because the heroes array uses the `Hero` interface.
+makeExample('toh-4/ts/app/mock-heroes.ts', null, 'mock-heroes.ts (Heroes array)')
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
new file mode 100644
index 0000000000..e0ee08e1a5
--- /dev/null
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -0,0 +1,686 @@
+include ../../../../_includes/_util-fns
+
+:marked
+ # Routing Around the App
+ We received new requirements for our Tour of Heroes application:
+ * add a *Dashboard* view.
+ * navigate between the *Heroes* and *Dashboard* views.
+ * clicking on a hero in either view navigates to a detail view of the selected hero.
+ * clicking a *deep link* in an email opens the detail view for a particular hero;
+
+ When we’re done, users will be able to navigate the app like this:
+figure.image-display
+ img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations")
+:marked
+ We'll add Angular’s *Component Router* to our app to satisfy these requirements.
+.l-sub-section
+ :marked
+ The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail
+ than we will in this tour.
+:marked
+ [Run the live example](/resources/live-examples/toh-5/ts/plnkr.html).
+.l-sub-section
+ :marked
+ In plunker, to see routing changes in the browser address bar,
+ pop out the preview window by clicking this blue button in the upper right corner:
+
+
+
+.l-main-section
+:marked
+ ## Where We Left Off
+ Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service
+ and hero detail component. If not, we’ll need to go back and follow the previous chapters.
+
+.filetree
+ .file angular2-tour-of-heroes
+ .children
+ .file node_modules
+ .file app
+ .children
+ .file app.component.ts
+ .file hero.ts
+ .file hero-detail.component.ts
+ .file hero.service.ts
+ .file main.ts
+ .file mock-heroes.ts
+ .file index.html
+ .file package.json
+ .file tsconfig.json
+:marked
+ ### Keep the app transpiling and running
+ Open a terminal/console window and enter the following command to
+ start the TypeScript compiler, start the server, and watch for changes:
+
+code-example(format="." language="bash").
+ npm start
+
+:marked
+ The application runs and updates automatically as we continue to build the Tour of Heroes.
+
+ ## Action plan
+ Here's our plan
+
+ * turn `AppComponent` into an application shell that only handles navigation.
+ * relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`
+ * add routing
+ * create a new `DashboardComponent`
+ * tie the *Dashboard* into the navigation structure.
+
+.l-sub-section
+ :marked
+ *Routing* is another name for *navigation*. The *router* is the mechanism for navigating from view to view.
+
+.l-main-section
+:marked
+ ## Splitting the *AppComponent*
+
+ Our current app loads `AppComponent` and immediately displays the list of heroes.
+
+ Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*) and then default to one of them.
+
+ The `AppComponent` should only handle navigation.
+ Let's move the display of *Heroes* out of `AppComponent` and into its own `HeroesComponent`.
+
+ ### *HeroesComponent*
+ `AppComponent` is already dedicated to *Heroes*.
+ Instead of moving anything out of `AppComponent`, we'll just rename it `HeroesComponent`
+ and create a new `AppComponent` shell separately.
+
+ The steps are:
+ * rename `app.component.ts` file to `heroes.component.ts`.
+ * rename the `AppComponent` class to `HeroesComponent`.
+ * rename the selector `my-app` to `my-heroes`.
+
+:marked
++makeExample('toh-5/ts/app/heroes.component.ts', 'heroes-component-renaming', 'app/heroes.component.ts (renaming)')(format=".")
+
+:marked
+ ## Create *AppComponent*
+ The new `AppComponent` will be the application shell.
+ It will have some navigation links at the top and a display area below for the pages we navigate to.
+
+ The initial steps are:
+
+ * create a new file named `app.component.ts`.
+ * define an `AppComponent` class.
+ * `export` it so we can reference it during bootstrapping in `main.ts`.
+ * expose an application `title` property.
+ * add the `@Component` metadata decorator above the class with a `my-app` selector.
+ * add a template with `` tags surrounding a binding to the `title` property.
+ * add the `
{{title}}
- ` -}) -export class AppComponent { - public title = 'Tour of Heroes'; -} - - - - import {Component} from 'angular2/angular2'; - import {RouteConfig} from 'angular2/router'; - - import {APP_ROUTES} from './route.config'; - - - @Component({ - selector: 'my-app', - template: ` -{{title}}
- ` - }) - @RouteConfig(APP_ROUTES) - export class AppComponent { - public title = 'Tour of Heroes'; - } - - - - template: ` -{{title}}
-Dashboard Goes Here
- ` -}) -export class DashboardComponent {} - - - -template: ` -{{title}}
- Dashboard - Heroes -Top Heroes
-
-
-`
-
-
-
-[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 10em; }
-.col-1-4 { width: 25%; }
-.module {
- padding: 20px; text-align: center;
- color: #eee; max-height: 120px; min-width: 120px;
- background-color: #1171a3;
-}
-.module:hover { background-color: #52b9e9; cursor: pointer; }
-.grid-pad { padding: 20px 0 20px 20px; }
-.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; }
-}
-
-
-
-
-
-
-
- {{hero.name}}
-Top Heroes
-
-
-
-
-
-@Component({
- selector: 'my-app',
- template: `
-
-
-
-
- {{hero.name}}
-{{title}}
- Dashboard - Heroes -Top Heroes
-
-
-
-
-
-
-
-
-
- {{hero.name}}
-
-
-
-
-
-h2 { color: #444; font-weight: lighter; }
-body { margin: 2em; }
-body, input[text], button { color: #888; font-family: Cambria, Georgia; }
-button {padding: 0.2em; font-size: 14px}
-
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts-snippets/app/main.pt4.ts b/public/docs/_examples/toh-5/ts-snippets/app/main.pt4.ts
deleted file mode 100644
index f7ba365121..0000000000
--- a/public/docs/_examples/toh-5/ts-snippets/app/main.pt4.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import {bootstrap} from 'angular2/angular2';
-import {AppComponent} from './app.component';
-// #docregion import-hero-service
-import {HeroService} from './hero.service';
-// #enddocregion import-hero-service
-bootstrap(AppComponent, [HeroService]);
-// #enddocregion
-
-// #docregion import-router
-import {Router} from 'angular2/router';
-import {Routes} from './route.config';
-// #enddocregion import-router
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts-snippets/app/route.config.pt4.ts b/public/docs/_examples/toh-5/ts-snippets/app/route.config.pt4.ts
deleted file mode 100644
index 8ba6169c5c..0000000000
--- a/public/docs/_examples/toh-5/ts-snippets/app/route.config.pt4.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// #docregion first-route
-import {HeroesComponent} from './heroes.component';
-
-export var Routes = {
- heroes: {
- path: '/,
- as: 'Heroes',
- component: HeroesComponent
- }
-};
-
-export const APP_ROUTES = Object.keys(Routes).map(r => Routes[r]);
-// #enddocregion first-route
-
-// #docregion dashboard-route
-import {HeroesComponent} from './heroes.component';
-import {DashboardComponent} from './dashboard.component';
-
-export var Routes = {
- dashboard: {
- path: '/',
- as: 'Dashboard',
- component: DashboardComponent
- },
- heroes: {
- path: '/heroes',
- as: 'Heroes',
- component: HeroesComponent
- }
-};
-
-export const APP_ROUTES = Object.keys(Routes).map(r => Routes[r]);
-// #enddocregion dashboard-route
-
-// #docregion route-parameter-import
-import {HeroDetailComponent} from './hero-detail.component';
-// #enddocregion route-parameter-import
-// #docregion route-parameter-detail
-detail: {
- path: '/detail/:id',
- as: 'Detail',
- component: HeroDetailComponent
-}
-// #docregion route-parameter-detail
-
-// #docregion router-navigate-method
-gotoDetail(hero: Hero) {
- this._router.navigate([`/${Routes.detail.as}`, { id: hero.id }]);
-}
-// #docregion router-navigate-method
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.1.js b/public/docs/_examples/toh-5/ts/app/app.component.1.js
new file mode 100644
index 0000000000..c6e443c2af
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app.component.1.js
@@ -0,0 +1,54 @@
+System.register(['angular2/core', './hero.service', './heroes.component', 'angular2/router'], function(exports_1) {
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+ };
+ var __metadata = (this && this.__metadata) || function (k, v) {
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+ };
+ var core_1, hero_service_1, heroes_component_1, router_1;
+ var AppComponent;
+ return {
+ setters:[
+ function (core_1_1) {
+ core_1 = core_1_1;
+ },
+ function (hero_service_1_1) {
+ hero_service_1 = hero_service_1_1;
+ },
+ function (heroes_component_1_1) {
+ heroes_component_1 = heroes_component_1_1;
+ },
+ function (router_1_1) {
+ router_1 = router_1_1;
+ }],
+ execute: function() {
+ // #docregion
+ AppComponent = (function () {
+ function AppComponent() {
+ this.title = 'Tour of Heroes';
+ }
+ AppComponent = __decorate([
+ core_1.Component({
+ selector: 'my-app',
+ template: "\n My Heroes
--
-
- - {{hero.id}} {{hero.name}} - -
-
-{{selectedHero.name | uppercase}} is my hero
- -{{title}}
\n{{title}}
+{{title}}
\n Heroes\n{{title}}
+ Heroes +{{title}}
\n \n{{title}}
+ +My Dashboard
' + }), + __metadata('design:paramtypes', []) + ], DashboardComponent); + return DashboardComponent; + })(); + exports_1("DashboardComponent", DashboardComponent); + } + } +}); +//# sourceMappingURL=dashboard.component.1.js.map \ No newline at end of file diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts new file mode 100644 index 0000000000..eae02d1e95 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts @@ -0,0 +1,8 @@ +// #docregion +import { Component } from 'angular2/core'; + +@Component({ + selector: 'my-dashboard', + template: 'My Dashboard
' +}) +export class DashboardComponent { } diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.js b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.js new file mode 100644 index 0000000000..01295f9c5e --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.js @@ -0,0 +1,48 @@ +System.register(['angular2/core', './hero.service'], function(exports_1) { + var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; + }; + var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); + }; + var core_1, hero_service_1; + var DashboardComponent; + return { + setters:[ + function (core_1_1) { + core_1 = core_1_1; + }, + function (hero_service_1_1) { + hero_service_1 = hero_service_1_1; + }], + execute: function() { + // #enddocregion imports + DashboardComponent = (function () { + function DashboardComponent(_heroService) { + this._heroService = _heroService; + this.heroes = []; + } + DashboardComponent.prototype.ngOnInit = function () { + var _this = this; + this._heroService.getHeroes() + .then(function (heroes) { return _this.heroes = heroes.slice(1, 5); }); + }; + DashboardComponent.prototype.gotoDetail = function () { }; + DashboardComponent = __decorate([ + core_1.Component({ + selector: 'my-dashboard', + templateUrl: 'app/dashboard.component.html' + }), + __metadata('design:paramtypes', [hero_service_1.HeroService]) + ], DashboardComponent); + return DashboardComponent; + })(); + exports_1("DashboardComponent", DashboardComponent); + } + } +}); +// #enddocregion component +//# sourceMappingURL=dashboard.component.2.js.map \ No newline at end of file diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts new file mode 100644 index 0000000000..896c7314a0 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts @@ -0,0 +1,27 @@ +// #docplaster +// #docregion imports +import { Component, OnInit } from 'angular2/core'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; +// #enddocregion imports + +@Component({ + selector: 'my-dashboard', + templateUrl: 'app/dashboard.component.html' +}) +// #docregion component +export class DashboardComponent implements OnInit { + + heroes: Hero[] = []; + + constructor(private _heroService: HeroService) { } + + ngOnInit() { + this._heroService.getHeroes() + .then(heroes => this.heroes = heroes.slice(1,5)); + } + + gotoDetail(){ /* not implemented yet */} +} +// #enddocregion component diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.css b/public/docs/_examples/toh-5/ts/app/dashboard.component.css new file mode 100644 index 0000000000..9ce340d052 --- /dev/null +++ b/public/docs/_examples/toh-5/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 0em; +} +.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/toh-5/ts/app/dashboard.component.html b/public/docs/_examples/toh-5/ts/app/dashboard.component.html new file mode 100644 index 0000000000..8cc8ce9242 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.html @@ -0,0 +1,11 @@ + +Top Heroes
+
+
+
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.js b/public/docs/_examples/toh-5/ts/app/dashboard.component.js
new file mode 100644
index 0000000000..ecdac6d788
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.js
@@ -0,0 +1,59 @@
+System.register(['angular2/core', 'angular2/router', './hero.service'], function(exports_1) {
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+ };
+ var __metadata = (this && this.__metadata) || function (k, v) {
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+ };
+ var core_1, router_1, hero_service_1;
+ var DashboardComponent;
+ return {
+ setters:[
+ function (core_1_1) {
+ core_1 = core_1_1;
+ },
+ function (router_1_1) {
+ router_1 = router_1_1;
+ },
+ function (hero_service_1_1) {
+ hero_service_1 = hero_service_1_1;
+ }],
+ execute: function() {
+ DashboardComponent = (function () {
+ // #docregion ctor
+ function DashboardComponent(_router, _heroService) {
+ this._router = _router;
+ this._heroService = _heroService;
+ this.heroes = [];
+ }
+ // #enddocregion ctor
+ DashboardComponent.prototype.ngOnInit = function () {
+ var _this = this;
+ this._heroService.getHeroes()
+ .then(function (heroes) { return _this.heroes = heroes.slice(1, 5); });
+ };
+ // #docregion goto-detail
+ DashboardComponent.prototype.gotoDetail = function (hero) {
+ var link = ['HeroDetail', { id: hero.id }];
+ this._router.navigate(link);
+ };
+ DashboardComponent = __decorate([
+ core_1.Component({
+ selector: 'my-dashboard',
+ templateUrl: 'app/dashboard.component.html',
+ // #docregion css
+ styleUrls: ['app/dashboard.component.css']
+ }),
+ __metadata('design:paramtypes', [router_1.Router, hero_service_1.HeroService])
+ ], DashboardComponent);
+ return DashboardComponent;
+ })();
+ exports_1("DashboardComponent", DashboardComponent);
+ }
+ }
+});
+// #enddocregion
+//# sourceMappingURL=dashboard.component.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
new file mode 100644
index 0000000000..ee1fe7ae57
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
@@ -0,0 +1,42 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+// #docregion import-router
+import { Router } from 'angular2/router';
+// #enddocregion import-router
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+ selector: 'my-dashboard',
+ templateUrl: 'app/dashboard.component.html',
+ // #docregion css
+ styleUrls: ['app/dashboard.component.css']
+ // #enddocregion css
+})
+// #docregion component
+export class DashboardComponent implements OnInit {
+
+ heroes: Hero[] = [];
+
+// #docregion ctor
+ constructor(
+ private _router: Router,
+ private _heroService: HeroService) {
+ }
+// #enddocregion ctor
+
+ ngOnInit() {
+ this._heroService.getHeroes()
+ .then(heroes => this.heroes = heroes.slice(1,5));
+ }
+
+ // #docregion goto-detail
+ gotoDetail(hero: Hero) {
+ let link = ['HeroDetail', { id: hero.id }];
+ this._router.navigate(link);
+ }
+ // #enddocregion goto-detail
+}
+// #enddocregion
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.css b/public/docs/_examples/toh-5/ts/app/hero-detail.component.css
new file mode 100644
index 0000000000..9b2b954d64
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.css
@@ -0,0 +1,25 @@
+/* #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;
+}
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
new file mode 100644
index 0000000000..cf96fc2169
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+ {{hero.name}}
+
+
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.js b/public/docs/_examples/toh-5/ts/app/hero-detail.component.js
new file mode 100644
index 0000000000..afb890cc46
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.js
@@ -0,0 +1,68 @@
+System.register(['angular2/core', 'angular2/router', './hero.service'], function(exports_1) {
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+ };
+ var __metadata = (this && this.__metadata) || function (k, v) {
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+ };
+ var core_1, router_1, hero_service_1;
+ var HeroDetailComponent;
+ return {
+ setters:[
+ function (core_1_1) {
+ core_1 = core_1_1;
+ },
+ function (router_1_1) {
+ router_1 = router_1_1;
+ },
+ function (hero_service_1_1) {
+ hero_service_1 = hero_service_1_1;
+ }],
+ execute: function() {
+ // #enddocregion import-hero-service
+ // #docregion extract-template
+ HeroDetailComponent = (function () {
+ // #docregion ctor
+ function HeroDetailComponent(_heroService, _routeParams) {
+ this._heroService = _heroService;
+ this._routeParams = _routeParams;
+ }
+ // #enddocregion ctor
+ // #docregion ng-oninit
+ HeroDetailComponent.prototype.ngOnInit = function () {
+ var _this = this;
+ // #docregion get-id
+ var id = +this._routeParams.get('id');
+ // #enddocregion get-id
+ this._heroService.getHero(id)
+ .then(function (hero) { return _this.hero = hero; });
+ };
+ // #enddocregion ng-oninit
+ // #docregion go-back
+ HeroDetailComponent.prototype.goBack = function () {
+ window.history.back();
+ };
+ HeroDetailComponent = __decorate([
+ core_1.Component({
+ selector: 'my-hero-detail',
+ // #docregion template-url
+ templateUrl: 'app/hero-detail.component.html',
+ // #enddocregion template-url
+ // #enddocregion v2
+ styleUrls: ['app/hero-detail.component.css'],
+ inputs: ['hero']
+ }),
+ __metadata('design:paramtypes', [hero_service_1.HeroService, router_1.RouteParams])
+ ], HeroDetailComponent);
+ return HeroDetailComponent;
+ })();
+ exports_1("HeroDetailComponent", HeroDetailComponent);
+ }
+ }
+});
+// #enddocregion v2
+// #enddocregion
+//# sourceMappingURL=hero-detail.component.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
new file mode 100644
index 0000000000..1c06a4ee46
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
@@ -0,0 +1,57 @@
+// #docplaster
+// #docregion
+// #docregion v2
+// #docregion import-oninit
+import { Component, OnInit } from 'angular2/core';
+// #enddocregion import-oninit
+// #docregion import-route-params
+import {RouteParams} from 'angular2/router';
+// #enddocregion import-route-params
+
+import { Hero } from './hero';
+// #docregion import-hero-service
+import { HeroService } from './hero.service';
+// #enddocregion import-hero-service
+
+// #docregion extract-template
+@Component({
+ selector: 'my-hero-detail',
+ // #docregion template-url
+ templateUrl: 'app/hero-detail.component.html',
+ // #enddocregion template-url
+// #enddocregion v2
+ styleUrls: ['app/hero-detail.component.css'],
+ inputs: ['hero']
+// #docregion v2
+})
+// #enddocregion extract-template
+// #docregion implement
+export class HeroDetailComponent implements OnInit {
+// #enddocregion implement
+ hero: Hero;
+
+// #docregion ctor
+ constructor(
+ private _heroService: HeroService,
+ private _routeParams: RouteParams) {
+ }
+// #enddocregion ctor
+
+// #docregion ng-oninit
+ ngOnInit() {
+ // #docregion get-id
+ let id = +this._routeParams.get('id');
+ // #enddocregion get-id
+ this._heroService.getHero(id)
+ .then(hero => this.hero = hero);
+ }
+// #enddocregion ng-oninit
+
+// #docregion go-back
+ goBack() {
+ window.history.back();
+ }
+// #enddocregion go-back
+}
+// #enddocregion v2
+// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/app/hero.js b/public/docs/_examples/toh-5/ts/app/hero.js
new file mode 100644
index 0000000000..6a4d7f1427
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/hero.js
@@ -0,0 +1,8 @@
+System.register([], function(exports_1) {
+ return {
+ setters:[],
+ execute: function() {
+ }
+ }
+});
+//# sourceMappingURL=hero.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/hero.service.js b/public/docs/_examples/toh-5/ts/app/hero.service.js
new file mode 100644
index 0000000000..0db32e5aec
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/hero.service.js
@@ -0,0 +1,51 @@
+System.register(['./mock-heroes', 'angular2/core'], function(exports_1) {
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+ };
+ var __metadata = (this && this.__metadata) || function (k, v) {
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+ };
+ var mock_heroes_1, core_1;
+ var HeroService;
+ return {
+ setters:[
+ function (mock_heroes_1_1) {
+ mock_heroes_1 = mock_heroes_1_1;
+ },
+ function (core_1_1) {
+ core_1 = core_1_1;
+ }],
+ execute: function() {
+ HeroService = (function () {
+ function HeroService() {
+ }
+ HeroService.prototype.getHeroes = function () {
+ return Promise.resolve(mock_heroes_1.HEROES);
+ };
+ // See the "Take it slow" appendix
+ HeroService.prototype.getHeroesSlowly = function () {
+ return new Promise(function (resolve) {
+ return setTimeout(function () { return resolve(mock_heroes_1.HEROES); }, 2000);
+ } // 2 seconds
+ // 2 seconds
+ );
+ };
+ //#docregion get-hero
+ HeroService.prototype.getHero = function (id) {
+ return Promise.resolve(mock_heroes_1.HEROES).then(function (heroes) { return heroes.filter(function (hero) { return hero.id === id; })[0]; });
+ };
+ HeroService = __decorate([
+ core_1.Injectable(),
+ __metadata('design:paramtypes', [])
+ ], HeroService);
+ return HeroService;
+ })();
+ exports_1("HeroService", HeroService);
+ }
+ }
+});
+// #enddocregion
+//# sourceMappingURL=hero.service.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/hero.service.ts b/public/docs/_examples/toh-5/ts/app/hero.service.ts
new file mode 100644
index 0000000000..a55f71ec95
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/hero.service.ts
@@ -0,0 +1,28 @@
+// #docplaster
+// #docregion
+import { Hero } from './hero';
+import { HEROES } from './mock-heroes';
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class HeroService {
+ getHeroes() {
+ return Promise.resolve(HEROES);
+ }
+
+ // See the "Take it slow" appendix
+ getHeroesSlowly() {
+ return new Promise{{hero.name}} details!
+
+ {{hero.id}}
+
+
+
+
+
+
+
+My Heroes
+-
+
- + {{hero.id}} {{hero.name}} + +
+
+
+
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.js b/public/docs/_examples/toh-5/ts/app/heroes.component.js
new file mode 100644
index 0000000000..9ba5693e11
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.js
@@ -0,0 +1,65 @@
+System.register(['angular2/core', 'angular2/router', './hero-detail.component', './hero.service'], function(exports_1) {
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+ };
+ var __metadata = (this && this.__metadata) || function (k, v) {
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+ };
+ var core_1, router_1, hero_detail_component_1, hero_service_1;
+ var HeroesComponent;
+ return {
+ setters:[
+ function (core_1_1) {
+ core_1 = core_1_1;
+ },
+ function (router_1_1) {
+ router_1 = router_1_1;
+ },
+ function (hero_detail_component_1_1) {
+ hero_detail_component_1 = hero_detail_component_1_1;
+ },
+ function (hero_service_1_1) {
+ hero_service_1 = hero_service_1_1;
+ }],
+ execute: function() {
+ // #docregion metadata
+ // #docregion heroes-component-renaming
+ HeroesComponent = (function () {
+ function HeroesComponent(_router, _heroService) {
+ this._router = _router;
+ this._heroService = _heroService;
+ }
+ HeroesComponent.prototype.getHeroes = function () {
+ var _this = this;
+ this._heroService.getHeroes().then(function (heroes) { return _this.heroes = heroes; });
+ };
+ HeroesComponent.prototype.ngOnInit = function () {
+ this.getHeroes();
+ };
+ HeroesComponent.prototype.onSelect = function (hero) { this.selectedHero = hero; };
+ HeroesComponent.prototype.gotoDetail = function () {
+ this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
+ };
+ HeroesComponent = __decorate([
+ core_1.Component({
+ selector: 'my-heroes',
+ // #enddocregion heroes-component-renaming
+ templateUrl: 'app/heroes.component.html',
+ styleUrls: ['app/heroes.component.css'],
+ directives: [hero_detail_component_1.HeroDetailComponent]
+ }),
+ __metadata('design:paramtypes', [router_1.Router, hero_service_1.HeroService])
+ ], HeroesComponent);
+ return HeroesComponent;
+ })();
+ exports_1("HeroesComponent", HeroesComponent);
+ }
+ }
+});
+// #enddocregion heroes-component-renaming
+// #enddocregion class
+// #enddocregion
+//# sourceMappingURL=heroes.component.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
new file mode 100644
index 0000000000..6cdb00bc83
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
@@ -0,0 +1,50 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+import { Router } from 'angular2/router';
+
+import { Hero } from './hero';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroService } from './hero.service';
+
+// #docregion metadata
+// #docregion heroes-component-renaming
+@Component({
+ selector: 'my-heroes',
+// #enddocregion heroes-component-renaming
+ templateUrl: 'app/heroes.component.html',
+ styleUrls: ['app/heroes.component.css'],
+ directives: [HeroDetailComponent]
+// #docregion heroes-component-renaming
+})
+// #enddocregion heroes-component-renaming
+// #enddocregion metadata
+// #docregion class
+// #docregion heroes-component-renaming
+export class HeroesComponent implements OnInit {
+// #enddocregion heroes-component-renaming
+ heroes: Hero[];
+ selectedHero: Hero;
+
+ constructor(
+ private _router: Router,
+ private _heroService: HeroService) { }
+
+ getHeroes() {
+ this._heroService.getHeroes().then(heroes => this.heroes = heroes);
+ }
+
+ ngOnInit() {
+ this.getHeroes();
+ }
+
+ onSelect(hero: Hero) { this.selectedHero = hero; }
+
+ gotoDetail() {
+ this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
+ }
+// #docregion heroes-component-renaming
+}
+// #enddocregion heroes-component-renaming
+// #enddocregion class
+// #enddocregion
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/main.js b/public/docs/_examples/toh-5/ts/app/main.js
new file mode 100644
index 0000000000..da70522909
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/main.js
@@ -0,0 +1,16 @@
+System.register(['angular2/platform/browser', './app.component'], function(exports_1) {
+ var browser_1, app_component_1;
+ return {
+ setters:[
+ function (browser_1_1) {
+ browser_1 = browser_1_1;
+ },
+ function (app_component_1_1) {
+ app_component_1 = app_component_1_1;
+ }],
+ execute: function() {
+ browser_1.bootstrap(app_component_1.AppComponent);
+ }
+ }
+});
+//# sourceMappingURL=main.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/main.ts b/public/docs/_examples/toh-5/ts/app/main.ts
new file mode 100644
index 0000000000..c469e18fd0
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/main.ts
@@ -0,0 +1,4 @@
+import { bootstrap } from 'angular2/platform/browser';
+import { AppComponent } from './app.component';
+
+bootstrap(AppComponent);
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/mock-heroes.js b/public/docs/_examples/toh-5/ts/app/mock-heroes.js
new file mode 100644
index 0000000000..5c4882e9a4
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/mock-heroes.js
@@ -0,0 +1,22 @@
+System.register([], function(exports_1) {
+ var HEROES;
+ return {
+ setters:[],
+ execute: function() {
+ exports_1("HEROES", 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" }
+ ]);
+ }
+ }
+});
+// #enddocregion
+//# sourceMappingURL=mock-heroes.js.map
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/app/mock-heroes.ts b/public/docs/_examples/toh-5/ts/app/mock-heroes.ts
new file mode 100644
index 0000000000..cdcba35097
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/mock-heroes.ts
@@ -0,0 +1,16 @@
+// #docregion
+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"}
+];
+// #enddocregion
\ No newline at end of file
diff --git a/public/docs/_examples/toh-5/ts/index.html b/public/docs/_examples/toh-5/ts/index.html
new file mode 100644
index 0000000000..821ef1a586
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+ + + {{selectedHero.name | uppercase}} is my hero + +
+ +
+:marked
But first, an overview of router basics.
.l-main-section
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index 479f4a7d94..2eed334a1f 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -204,7 +204,8 @@ figure.image-display
We shouldn't expect `json()` to return the heroes array directly.
The server we're calling always wraps JSON results in an object with a `data`
property. We have to unwrap it to get the heroes.
- This is conventional web api behavior, driven by security concerns.
+ This is conventional web api behavior, driven by
+ [security concerns](https://www.owasp.org/index.php/OWASP_AJAX_Security_Guidelines#Always_return_JSON_with_an_Object_on_the_outside).
:marked
### Do not return the response object
Our `getHeroes()` could have returned the `Observable
+
+.l-main-section
+:marked
+ ## Where We Left Off
+ Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service
+ and hero detail component. If not, we’ll need to go back and follow the previous chapters.
+
+.filetree
+ .file angular2-tour-of-heroes
+ .children
+ .file node_modules
+ .file app
+ .children
+ .file app.component.ts
+ .file hero.ts
+ .file hero-detail.component.ts
+ .file hero.service.ts
+ .file main.ts
+ .file mock-heroes.ts
+ .file index.html
+ .file package.json
+ .file tsconfig.json
+:marked
+ ### Keep the app transpiling and running
+ Open a terminal/console window and enter the following command to
+ start the TypeScript compiler, start the server, and watch for changes:
+
+code-example(format="." language="bash").
+ npm start
+
+:marked
+ The application runs and updates automatically as we continue to build the Tour of Heroes.
+
+ ## Action plan
+ Here's our plan
+
+ * turn `AppComponent` into an application shell that only handles navigation.
+ * relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`
+ * add routing
+ * create a new `DashboardComponent`
+ * tie the *Dashboard* into the navigation structure.
+
+.l-sub-section
+ :marked
+ *Routing* is another name for *navigation*. The *router* is the mechanism for navigating from view to view.
+
+.l-main-section
+:marked
+ ## Splitting the *AppComponent*
+
+ Our current app loads `AppComponent` and immediately displays the list of heroes.
+
+ Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*) and then default to one of them.
+
+ The `AppComponent` should only handle navigation.
+ Let's move the display of *Heroes* out of `AppComponent` and into its own `HeroesComponent`.
+
+ ### *HeroesComponent*
+ `AppComponent` is already dedicated to *Heroes*.
+ Instead of moving anything out of `AppComponent`, we'll just rename it `HeroesComponent`
+ and create a new `AppComponent` shell separately.
+
+ The steps are:
+ * rename `app.component.ts` file to `heroes.component.ts`.
+ * rename the `AppComponent` class to `HeroesComponent`.
+ * rename the selector `my-app` to `my-heroes`.
+
+:marked
++makeExample('toh-5/ts/app/heroes.component.ts', 'heroes-component-renaming', 'app/heroes.component.ts (renaming)')(format=".")
+
+:marked
+ ## Create *AppComponent*
+ The new `AppComponent` will be the application shell.
+ It will have some navigation links at the top and a display area below for the pages we navigate to.
+
+ The initial steps are:
+
+ * create a new file named `app.component.ts`.
+ * define an `AppComponent` class.
+ * `export` it so we can reference it during bootstrapping in `main.ts`.
+ * expose an application `title` property.
+ * add the `@Component` metadata decorator above the class with a `my-app` selector.
+ * add a template with `