From 82383bc673723757e4a666dfeec018d245de9dc4 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Mon, 14 Dec 2015 20:05:13 -0800 Subject: [PATCH] docs(tutorial): part 3 + revisions to intro, 1 & 2 closes #573 --- .../app.component.snippets.pt1.ts | 23 +- .../_examples/toh-1/ts/app/app.component.ts | 2 + public/docs/_examples/toh-1/ts/index.html | 19 + public/docs/_examples/toh-1/ts/plnkr.json | 8 + .../app.component.snippets.pt2.ts | 30 - .../_examples/toh-2/ts/app/app.component.ts | 13 +- public/docs/_examples/toh-2/ts/index.html | 19 + public/docs/_examples/toh-2/ts/plnkr.json | 8 + .../toh-3/ts-snippets/app.component.pt3.html | 8 + .../ts-snippets/hero-detail.component.pt3.ts | 41 ++ .../_examples/toh-3/ts/app/app.component.ts | 64 ++ public/docs/_examples/toh-3/ts/app/boot.ts | 6 + .../ts/app/hero-detail.component.pt3.html | 14 - .../toh-3/ts/app/hero-detail.component.ts | 23 + .../toh-3/ts/app/hero-detail.snippets.pt3.ts | 34 - public/docs/_examples/toh-3/ts/app/hero.ts | 6 + public/docs/_examples/toh-3/ts/index.html | 19 + public/docs/_examples/toh-3/ts/plnkr.json | 8 + .../app => toh-4/ts-snippets}/mock-heroes.ts | 0 .../ts-snippets}/app/app.component.pt4.ts | 0 .../ts-snippets}/app/bootstrap.pt4.ts | 0 .../ts-snippets}/app/hero.service.pt4.ts | 0 .../ts-snippets}/app/index.pt4.html | 0 .../ts-snippets}/app/route.config.pt4.ts | 0 .../tutorial/ts/app/dashboard.component.html | 2 +- .../tutorial/ts/app/dashboard.component.ts | 2 +- public/docs/_examples/tutorial/ts/index.html | 11 +- public/docs/ts/latest/guide/forms.jade | 1 + public/docs/ts/latest/tutorial/_data.json | 6 +- public/docs/ts/latest/tutorial/toh-pt1.jade | 175 ++--- public/docs/ts/latest/tutorial/toh-pt2.jade | 100 +-- public/docs/ts/latest/tutorial/toh-pt3.jade | 508 ++++--------- public/docs/ts/latest/tutorial/toh-pt4.jade | 683 ++++++------------ public/docs/ts/latest/tutorial/toh-pt5.jade | 479 ++++++++++++ 34 files changed, 1279 insertions(+), 1033 deletions(-) rename public/docs/_examples/toh-1/{ts/app => ts-snippets}/app.component.snippets.pt1.ts (79%) create mode 100644 public/docs/_examples/toh-1/ts/index.html create mode 100644 public/docs/_examples/toh-1/ts/plnkr.json rename public/docs/_examples/toh-2/{ts/app => ts-snippets}/app.component.snippets.pt2.ts (69%) create mode 100644 public/docs/_examples/toh-2/ts/index.html create mode 100644 public/docs/_examples/toh-2/ts/plnkr.json create mode 100644 public/docs/_examples/toh-3/ts-snippets/app.component.pt3.html create mode 100644 public/docs/_examples/toh-3/ts-snippets/hero-detail.component.pt3.ts create mode 100644 public/docs/_examples/toh-3/ts/app/app.component.ts create mode 100644 public/docs/_examples/toh-3/ts/app/boot.ts delete mode 100644 public/docs/_examples/toh-3/ts/app/hero-detail.component.pt3.html create mode 100644 public/docs/_examples/toh-3/ts/app/hero-detail.component.ts delete mode 100644 public/docs/_examples/toh-3/ts/app/hero-detail.snippets.pt3.ts create mode 100644 public/docs/_examples/toh-3/ts/app/hero.ts create mode 100644 public/docs/_examples/toh-3/ts/index.html create mode 100644 public/docs/_examples/toh-3/ts/plnkr.json rename public/docs/_examples/{toh-3/ts/app => toh-4/ts-snippets}/mock-heroes.ts (100%) rename public/docs/_examples/{toh-4/ts => toh-5/ts-snippets}/app/app.component.pt4.ts (100%) rename public/docs/_examples/{toh-4/ts => toh-5/ts-snippets}/app/bootstrap.pt4.ts (100%) rename public/docs/_examples/{toh-4/ts => toh-5/ts-snippets}/app/hero.service.pt4.ts (100%) rename public/docs/_examples/{toh-4/ts => toh-5/ts-snippets}/app/index.pt4.html (100%) rename public/docs/_examples/{toh-4/ts => toh-5/ts-snippets}/app/route.config.pt4.ts (100%) create mode 100644 public/docs/ts/latest/tutorial/toh-pt5.jade diff --git a/public/docs/_examples/toh-1/ts/app/app.component.snippets.pt1.ts b/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts similarity index 79% rename from public/docs/_examples/toh-1/ts/app/app.component.snippets.pt1.ts rename to public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts index 9d7d15f08e..e4a9796bc8 100644 --- a/public/docs/_examples/toh-1/ts/app/app.component.snippets.pt1.ts +++ b/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts @@ -32,22 +32,15 @@ template:` // #enddocregion editing-Hero // #docregion app-component-1 - export class AppComponent { - public title = 'Tour of Heroes'; - public hero = 'Windstorm'; - } +export class AppComponent { + public title = 'Tour of Heroes'; + public hero = 'Windstorm'; +} // #enddocregion app-component-1 -// #docregion hero-interface-1 - interface Hero { - id: number; - name: string; - } -// #enddocregion hero-interface-1 - // #docregion hero-property-1 - public hero: Hero = { - id: 1, - name: 'Windstorm' - }; +public hero: Hero = { + id: 1, + name: 'Windstorm' +}; // #enddocregion hero-property-1 diff --git a/public/docs/_examples/toh-1/ts/app/app.component.ts b/public/docs/_examples/toh-1/ts/app/app.component.ts index bd98c90b1e..47d34e87a4 100644 --- a/public/docs/_examples/toh-1/ts/app/app.component.ts +++ b/public/docs/_examples/toh-1/ts/app/app.component.ts @@ -1,10 +1,12 @@ // #docregion pt1 import {Component} from 'angular2/core'; +// #docregion hero-interface-1 interface Hero { id: number; name: string; } +// #enddocregion hero-interface-1 @Component({ selector: 'my-app', diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html new file mode 100644 index 0000000000..a90a31489d --- /dev/null +++ b/public/docs/_examples/toh-1/ts/index.html @@ -0,0 +1,19 @@ + + + + Angular 2 QuickStart + + + + + + + + + Loading... + + diff --git a/public/docs/_examples/toh-1/ts/plnkr.json b/public/docs/_examples/toh-1/ts/plnkr.json new file mode 100644 index 0000000000..70479d87e5 --- /dev/null +++ b/public/docs/_examples/toh-1/ts/plnkr.json @@ -0,0 +1,8 @@ +{ + "description": "Tour of Heroes: Part 1", + "files":[ + "!**/*.d.ts", + "!**/*.js" + ], + "tags": ["tutorial", "tour", "heroes"] +} diff --git a/public/docs/_examples/toh-2/ts/app/app.component.snippets.pt2.ts b/public/docs/_examples/toh-2/ts-snippets/app.component.snippets.pt2.ts similarity index 69% rename from public/docs/_examples/toh-2/ts/app/app.component.snippets.pt2.ts rename to public/docs/_examples/toh-2/ts-snippets/app.component.snippets.pt2.ts index cb4c3335a1..9dc0277fc4 100644 --- a/public/docs/_examples/toh-2/ts/app/app.component.snippets.pt2.ts +++ b/public/docs/_examples/toh-2/ts-snippets/app.component.snippets.pt2.ts @@ -56,36 +56,6 @@ public heroes = HEROES;
  • // #enddocregion heroes-ngfor-1 -// #docregion styles-1 -styles:[` - .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;} - - .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; } - - .heroes li:hover {color: #369; background-color: #EEE; left: .2em;} - - .heroes .badge { - font-size: small; - color: white; - padding: 0.1em 0.7em; - background-color: #369; - line-height: 1em; - position: relative; - left: -1px; - top: -1px; - } - .selected { background-color: #EEE; color: #369; } -`] -// #enddocregion styles-1 - -// #docregion selected-hero-1 -public selectedHero: Hero; -// #enddocregion selected-hero-1 - -// #docregion on-select-1 -onSelect(hero: Hero) { this.selectedHero = hero; } -// #enddocregion on-select-1 - // #docregion class-selected-1 [class.selected]="hero === selectedHero" // #enddocregion class-selected-1 diff --git a/public/docs/_examples/toh-2/ts/app/app.component.ts b/public/docs/_examples/toh-2/ts/app/app.component.ts index 7c3daf0b2b..77c728aef5 100644 --- a/public/docs/_examples/toh-2/ts/app/app.component.ts +++ b/public/docs/_examples/toh-2/ts/app/app.component.ts @@ -27,13 +27,11 @@ interface Hero { `, +// #docregion styles-1 styles:[` .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;} - .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; } - .heroes li:hover {color: #369; background-color: #EEE; left: .2em;} - .heroes .badge { font-size: small; color: white; @@ -45,14 +43,19 @@ interface Hero { top: -1px; } .selected { background-color: #EEE; color: #369; } - `] + `] +// #enddocregion styles-1 }) export class AppComponent { public title = 'Tour of Heroes'; public heroes = HEROES; +// #docregion selected-hero-1 public selectedHero: Hero; - +// #enddocregion selected-hero-1 + +// #docregion on-select-1 onSelect(hero: Hero) { this.selectedHero = hero; } +// #enddocregion on-select-1 } // #enddocregion pt2 diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html new file mode 100644 index 0000000000..a90a31489d --- /dev/null +++ b/public/docs/_examples/toh-2/ts/index.html @@ -0,0 +1,19 @@ + + + + Angular 2 QuickStart + + + + + + + + + Loading... + + diff --git a/public/docs/_examples/toh-2/ts/plnkr.json b/public/docs/_examples/toh-2/ts/plnkr.json new file mode 100644 index 0000000000..61add17a65 --- /dev/null +++ b/public/docs/_examples/toh-2/ts/plnkr.json @@ -0,0 +1,8 @@ +{ + "description": "Tour of Heroes: Part 2", + "files":[ + "!**/*.d.ts", + "!**/*.js" + ], + "tags": ["tutorial", "tour", "heroes"] +} diff --git a/public/docs/_examples/toh-3/ts-snippets/app.component.pt3.html b/public/docs/_examples/toh-3/ts-snippets/app.component.pt3.html new file mode 100644 index 0000000000..18f51b041c --- /dev/null +++ b/public/docs/_examples/toh-3/ts-snippets/app.component.pt3.html @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/docs/_examples/toh-3/ts-snippets/hero-detail.component.pt3.ts b/public/docs/_examples/toh-3/ts-snippets/hero-detail.component.pt3.ts new file mode 100644 index 0000000000..1fed618be3 --- /dev/null +++ b/public/docs/_examples/toh-3/ts-snippets/hero-detail.component.pt3.ts @@ -0,0 +1,41 @@ +// #docregion hero-detail-component-1 +@Component({ + selector: 'my-hero-detail' +}) +export class HeroDetailComponent { } +// #enddocregion hero-detail-component-1 + +// #docregion hero-detail-component-2 +@Component({ + selector: 'my-hero-detail', + template: `` +}) +export class HeroDetailComponent { } +// #enddocregion hero-detail-component-2 + +// #docregion hero-detail-component-3 +@Component({ + selector: 'my-hero-detail', + template: ` +
    +

    {{selected.name}} details!

    +
    {{hero.id}}
    +
    + + +
    +
    + ` +}) +export class HeroDetailComponent { } +// #enddocregion hero-detail-component-3 + +// #docregion imports-1 +import {Component} from 'angular2/core'; +// #enddocregion imports-1 + +// #docregion hero-property +export class HeroDetailComponent { + public hero: Hero; +} +// #enddocregion hero-property diff --git a/public/docs/_examples/toh-3/ts/app/app.component.ts b/public/docs/_examples/toh-3/ts/app/app.component.ts new file mode 100644 index 0000000000..be9fc5d829 --- /dev/null +++ b/public/docs/_examples/toh-3/ts/app/app.component.ts @@ -0,0 +1,64 @@ +import {Component} from 'angular2/core'; +// #docregion hero-import +import {Hero} from './hero'; +// #enddocregion hero-import +// #docregion hero-detail-import +import {HeroDetailComponent} from './hero-detail.component'; +// #enddocregion hero-detail-import + +@Component({ + selector: 'my-app', +// #docregion hero-detail-template + template:` +

    {{title}}

    +

    My Heroes

    + + + `, +// #enddocregion hero-detail-template + styles:[` + .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;} + .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; } + .heroes li:hover {color: #369; background-color: #EEE; left: .2em;} + .heroes .badge { + font-size: small; + color: white; + padding: 0.1em 0.7em; + background-color: #369; + line-height: 1em; + position: relative; + left: -1px; + top: -1px; + } + .selected { background-color: #EEE; color: #369; } + `], +// #docregion declaring + directives: [HeroDetailComponent] +// #enddocregion declaring +}) +export class AppComponent { + public title = 'Tour of Heroes'; + public heroes = HEROES; + public selectedHero: Hero; + + onSelect(hero: Hero) { this.selectedHero = hero; } +} + +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" } +]; diff --git a/public/docs/_examples/toh-3/ts/app/boot.ts b/public/docs/_examples/toh-3/ts/app/boot.ts new file mode 100644 index 0000000000..a5cf62c0fd --- /dev/null +++ b/public/docs/_examples/toh-3/ts/app/boot.ts @@ -0,0 +1,6 @@ +// #docregion pt1 +import {bootstrap} from 'angular2/platform/browser'; +import {AppComponent} from './app.component'; + +bootstrap(AppComponent); +// #enddocregion pt1 \ No newline at end of file diff --git a/public/docs/_examples/toh-3/ts/app/hero-detail.component.pt3.html b/public/docs/_examples/toh-3/ts/app/hero-detail.component.pt3.html deleted file mode 100644 index 0c8cf753b5..0000000000 --- a/public/docs/_examples/toh-3/ts/app/hero-detail.component.pt3.html +++ /dev/null @@ -1,14 +0,0 @@ - - template: ` -

    {{title}}

    - -

    My Heroes

    - - - `, diff --git a/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts new file mode 100644 index 0000000000..80f8437630 --- /dev/null +++ b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts @@ -0,0 +1,23 @@ +// #docregion hero-detail-component +import {Component} from 'angular2/core'; + +// #docregion inputs +@Component({ + selector: 'my-hero-detail', + template: ` +
    +

    {{hero.name}} details!

    +
    {{hero.id}}
    +
    + + +
    +
    + `, + inputs: ['hero'] +}) +// #enddocregion inputs +export class HeroDetailComponent { + public hero: Hero; +} +// #enddocregion hero-detail-component diff --git a/public/docs/_examples/toh-3/ts/app/hero-detail.snippets.pt3.ts b/public/docs/_examples/toh-3/ts/app/hero-detail.snippets.pt3.ts deleted file mode 100644 index 0b6c6601cc..0000000000 --- a/public/docs/_examples/toh-3/ts/app/hero-detail.snippets.pt3.ts +++ /dev/null @@ -1,34 +0,0 @@ -// #docregion template -@Component({ - selector: 'my-hero-detail', - template: ` -
    -

    {{selected.name}} details!

    -
    {{hero.id}}
    -
    - - -
    -
    - `, - directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] - }) -// #enddocregion template - -// #docregion inputs -@Component({ - selector: 'my-hero-detail', - template: ` -
    -

    {{hero.name}} details!

    -
    {{hero.id}}
    -
    - - -
    -
    - `, - directives: [CORE_DIRECTIVES, FORM_DIRECTIVES], - inputs: ['hero'] - }) - // #enddocregion inputs \ No newline at end of file diff --git a/public/docs/_examples/toh-3/ts/app/hero.ts b/public/docs/_examples/toh-3/ts/app/hero.ts new file mode 100644 index 0000000000..8125dec128 --- /dev/null +++ b/public/docs/_examples/toh-3/ts/app/hero.ts @@ -0,0 +1,6 @@ +// #docregion hero-interface +export interface Hero { + id: number; + name: string; +} +// #enddocregion hero-interface diff --git a/public/docs/_examples/toh-3/ts/index.html b/public/docs/_examples/toh-3/ts/index.html new file mode 100644 index 0000000000..a90a31489d --- /dev/null +++ b/public/docs/_examples/toh-3/ts/index.html @@ -0,0 +1,19 @@ + + + + Angular 2 QuickStart + + + + + + + + + Loading... + + diff --git a/public/docs/_examples/toh-3/ts/plnkr.json b/public/docs/_examples/toh-3/ts/plnkr.json new file mode 100644 index 0000000000..b6e424dda7 --- /dev/null +++ b/public/docs/_examples/toh-3/ts/plnkr.json @@ -0,0 +1,8 @@ +{ + "description": "Tour of Heroes: Part 3", + "files":[ + "!**/*.d.ts", + "!**/*.js" + ], + "tags": ["tutorial", "tour", "heroes"] +} diff --git a/public/docs/_examples/toh-3/ts/app/mock-heroes.ts b/public/docs/_examples/toh-4/ts-snippets/mock-heroes.ts similarity index 100% rename from public/docs/_examples/toh-3/ts/app/mock-heroes.ts rename to public/docs/_examples/toh-4/ts-snippets/mock-heroes.ts diff --git a/public/docs/_examples/toh-4/ts/app/app.component.pt4.ts b/public/docs/_examples/toh-5/ts-snippets/app/app.component.pt4.ts similarity index 100% rename from public/docs/_examples/toh-4/ts/app/app.component.pt4.ts rename to public/docs/_examples/toh-5/ts-snippets/app/app.component.pt4.ts diff --git a/public/docs/_examples/toh-4/ts/app/bootstrap.pt4.ts b/public/docs/_examples/toh-5/ts-snippets/app/bootstrap.pt4.ts similarity index 100% rename from public/docs/_examples/toh-4/ts/app/bootstrap.pt4.ts rename to public/docs/_examples/toh-5/ts-snippets/app/bootstrap.pt4.ts diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.pt4.ts b/public/docs/_examples/toh-5/ts-snippets/app/hero.service.pt4.ts similarity index 100% rename from public/docs/_examples/toh-4/ts/app/hero.service.pt4.ts rename to public/docs/_examples/toh-5/ts-snippets/app/hero.service.pt4.ts diff --git a/public/docs/_examples/toh-4/ts/app/index.pt4.html b/public/docs/_examples/toh-5/ts-snippets/app/index.pt4.html similarity index 100% rename from public/docs/_examples/toh-4/ts/app/index.pt4.html rename to public/docs/_examples/toh-5/ts-snippets/app/index.pt4.html diff --git a/public/docs/_examples/toh-4/ts/app/route.config.pt4.ts b/public/docs/_examples/toh-5/ts-snippets/app/route.config.pt4.ts similarity index 100% rename from public/docs/_examples/toh-4/ts/app/route.config.pt4.ts rename to public/docs/_examples/toh-5/ts-snippets/app/route.config.pt4.ts diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.html b/public/docs/_examples/tutorial/ts/app/dashboard.component.html index 226b5c5445..f9b9b2f3bb 100644 --- a/public/docs/_examples/tutorial/ts/app/dashboard.component.html +++ b/public/docs/_examples/tutorial/ts/app/dashboard.component.html @@ -1,6 +1,6 @@

    Top Heroes

    -
    +

    {{hero.name}}

    diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts index 2710a655cd..62bf854264 100644 --- a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts +++ b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts @@ -14,7 +14,7 @@ export class DashboardComponent implements OnInit { constructor(private _heroService: HeroService, private _router: Router) { } ngOnInit() { - this._heroService.getHeroes().then(heroes => this.heroes = heroes); + this._heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5)); } gotoDetail(hero: Hero) { diff --git a/public/docs/_examples/tutorial/ts/index.html b/public/docs/_examples/tutorial/ts/index.html index 2f7e00b2f3..53c8f62c99 100644 --- a/public/docs/_examples/tutorial/ts/index.html +++ b/public/docs/_examples/tutorial/ts/index.html @@ -2,16 +2,17 @@ - + + + diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade index 7b8345d20a..6def8ca24c 100644 --- a/public/docs/ts/latest/guide/forms.jade +++ b/public/docs/ts/latest/guide/forms.jade @@ -237,6 +237,7 @@ ol The `#p` local template variable is a different power in each iteration; we display its name using the interpolation syntax with the double-curly-braces. + .l-main-section :marked ## Two-way data binding with ***ngModel** diff --git a/public/docs/ts/latest/tutorial/_data.json b/public/docs/ts/latest/tutorial/_data.json index a897a3cb68..859869e152 100644 --- a/public/docs/ts/latest/tutorial/_data.json +++ b/public/docs/ts/latest/tutorial/_data.json @@ -11,6 +11,10 @@ }, "toh-pt2": { "title": "Master/Detail", - "intro": "We build a master/detail page with a list of heroes " + "intro": "We build a master/detail page with a list of heroes" + }, + "toh-pt3": { + "title": "Multiple Components", + "intro": "We refactor the master/detail view into separate components" } } \ No newline at end of file diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade index 4de12c6a7f..4484c31667 100644 --- a/public/docs/ts/latest/tutorial/toh-pt1.jade +++ b/public/docs/ts/latest/tutorial/toh-pt1.jade @@ -5,22 +5,25 @@ include ../../../../_includes/_util-fns Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends. + [Run the live example for part 1](/resources/live-examples/toh-1/ts/plnkr.html) + Follow the "QuickStart" steps. They provide the prerequisites, the folder structure, and the core files for our Tour of Heroes. Copy the "QuickStart" code to a new folder and rename the folder `angular2-tour-of-heroes`. We should have the following structure: -code-example(format=""). - angular2-tour-of-heroes - ├── node_modules - ├── app - | ├── app.component.ts - | └── boot.ts - ├── index.html - ├── tsconfig.json - └── package.json - +.filetree + .file angular2-tour-of-heroes + .children + .file node_modules + .file app + .children + .file app.component.ts + .file boot.ts + .file index.html + .file package.json + .file tsconfig.json :marked ## Keep the app transpiling and running We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing @@ -29,15 +32,9 @@ code-example(format="" language="bash"). npm start :marked - This command starts the server, launches the app in a browser, + This command runs the compiler in watch mode, starts the server, launches the app in a browser, and keeps the app running while we continue to build the Tour of Heroes. -.l-sub-section - :marked - These two steps watch all project files. They recompile TypeScript files and re-run - the app when any file changes. - If the watchers fail to detect renamed or new files, - stop these commands in each terminal by typing `CTRL+C` and then re-run them. .l-main-section :marked ## Show our Hero @@ -46,13 +43,13 @@ code-example(format="" language="bash"). Let's add two properties to our `AppComponent`, a `title` property for the application name and a `hero` property for a hero named "Windstorm". - +makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'app-component-1', 'app.component.ts (AppComponent class)')(format=".") + +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'app-component-1', 'app.component.ts (AppComponent class)')(format=".") :marked Now we update the template in the `@Component` decoration with data bindings to these new properties. - +makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'show-hero') - + +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero') + :marked The browser should refresh and display our title and hero. @@ -70,23 +67,35 @@ code-example(format="" language="bash"). Create a `Hero` interface with `id` and `name` properties. Keep this near the top of the `app.component.ts` file for now. -+makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'hero-interface-1', 'app.component.ts (Hero interface)')(format=".") ++makeExample('toh-1/ts/app/app.component.ts', 'hero-interface-1', 'app.component.ts (Hero interface)')(format=".") .l-sub-section :marked - Why an interface and not a class? The net result is that either option will allow us to check the types. The answer here lies in how we intend to use the Hero. We want something to check the types, so either option will suffice. If we wanted to create an instance of a Hero, a class may be more appropriate since we could add logic to a Hero constructor. But our scenario is for type checking, so the interface is adequate. The driving reason however, that leads us to a Hero interface is that the interface when transpiled from TypeScript to JavaScript produces no ES5 code. None at all. While a TypeScript class does generate ES5 code. For these reasons we choose an interface here. + #### Interface or Class? + Why a `Hero` interface and not a `Hero` class? + We want a strongly typed `Hero`. We get strong typing with either option. + Our choice depends on how we intend to use the `Hero`. + + If we need a `Hero` that goes beyond simple properties, a `Hero` with logic and behavior, + we must define a class. + If we only need type checking, the interface is sufficient and lighter weight. + + Lighter weight? Transpiling a class to JavaScript produces code. + Transpiling an interface produces — nothing. + If the class does nothing (and there is nothing for a `Hero` class to do right now), + we prefer an interface. :marked Now that we have a `Hero` interface, let’s refactor our component’s `hero` property to be of type `Hero`. Then initialize it with an id of `1` and the name, "Windstorm". -+makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'hero-property-1', 'app.component.ts (Hero property)')(format=".") ++makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'hero-property-1', 'app.component.ts (Hero property)')(format=".") :marked Because we changed the hero from a string to an object, we update the binding in the template to refer to the hero’s `name` property. -+makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'show-hero-2') ++makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero-2') :marked The browser refreshes and continues to display our hero’s name. @@ -94,7 +103,7 @@ code-example(format="" language="bash"). Displaying a name is good, but we want to see all of our hero’s properties. We’ll add a `
    ` for our hero’s `id` property and another `
    ` for our hero’s `name`. -+makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'show-hero-properties') ++makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero-properties') :marked Uh oh, our template string is getting long. We better take care of that to avoid the risk of making a typo in the template. @@ -109,7 +118,7 @@ code-example(format="" language="bash"). Change the quotes around the template to back-ticks and put the `

    `, `

    ` and `
    ` elements on their own lines. -+makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'multi-line-strings', 'app.component.ts (AppComponent\'s template)') ++makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'multi-line-strings', 'app.component.ts (AppComponent\'s template)') .callout.is-important header A back-tick is not a single quote @@ -122,63 +131,67 @@ code-example(format="" language="bash"). is part of a single template string. .l-main-section +:marked + ## Editing Our Hero + + We want to be able to edit the hero name in a textbox. + + Refactor the hero name `