From ce05f9b4f9cd820f2a0a3c111cfa3e706d5c5b2a Mon Sep 17 00:00:00 2001 From: Brian Olore Date: Mon, 9 May 2016 15:45:40 -0400 Subject: [PATCH 01/16] docs(style-guide): make each style clickable for easier referencing --- public/docs/ts/latest/guide/style-guide.jade | 270 ++++++++----------- 1 file changed, 108 insertions(+), 162 deletions(-) diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade index f2a8490012..de1589c7fa 100644 --- a/public/docs/ts/latest/guide/style-guide.jade +++ b/public/docs/ts/latest/guide/style-guide.jade @@ -65,9 +65,8 @@ a(id='toc') We apply the [Single Responsibility Principle](https:\/\/en.wikipedia.org/wiki/Single_responsibility_principle) to all Components, Services, and other symbols we create. This helps make our app cleaner, easier to read and maintain, and more testable. - ### Rule of One - - #### Style 01-01 + ### Rule of One + #### Style 01-01 .s-rule.do :marked **Do** define one thing (e.g. service or component) per file. @@ -118,9 +117,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Small Functions - - #### Style 01-02 + ### Small Functions + #### Style 01-02 .s-rule.do :marked **Do** define small functions @@ -159,9 +157,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### General Naming Guidelines - - #### Style 02-01 + ### General Naming Guidelines + #### Style 02-01 .s-rule.do :marked @@ -187,9 +184,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Separate File Names with Dots and Dashes - - #### Style 02-02 + ### Separate File Names with Dots and Dashes + #### Style 02-02 .s-rule.do :marked @@ -229,9 +225,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Components and Directives - - #### Style 02-03 + ### Components and Directives + #### Style 02-03 .s-rule.do :marked @@ -310,9 +305,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Service Names - - #### Style 02-04 + ### Service Names + #### Style 02-04 .s-rule.do :marked @@ -375,9 +369,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Bootstrapping - - #### Style 02-05 + ### Bootstrapping + #### Style 02-05 .s-rule.do :marked @@ -399,9 +392,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Directive Selectors - - #### Style 02-06 + ### Directive Selectors + #### Style 02-06 .s-rule.do :marked @@ -419,9 +411,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Custom Prefix for Components - - #### Style 02-07 + ### Custom Prefix for Components + #### Style 02-07 .s-rule.do :marked @@ -456,9 +447,8 @@ a(href="#toc") Back to top :marked :marked - ### Custom Prefix for Directives - - #### Style 02-08 + ### Custom Prefix for Directives + #### Style 02-08 .s-rule.do :marked @@ -482,9 +472,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Pipe Names - - #### Style 02-09 + ### Pipe Names + #### Style 02-09 .s-rule.do :marked @@ -523,9 +512,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Unit Test File Names - - #### Style 02-10 + ### Unit Test File Names + #### Style 02-10 .s-rule.do :marked @@ -588,9 +576,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### End to End Test File Names - - #### Style 02-11 + ### End to End Test File Names + #### Style 02-11 .s-rule.do :marked @@ -634,9 +621,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Classes - - #### Style 03-01 + ### Classes + #### Style 03-01 .s-rule.do :marked @@ -660,9 +646,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Constants - - #### Style 03-02 + ### Constants + #### Style 03-02 .s-rule.do :marked @@ -686,9 +671,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Interfaces - - #### Style 03-03 + ### Interfaces + #### Style 03-03 .s-rule.do :marked @@ -712,9 +696,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Properties and Methods - - #### Style 03-04 + ### Properties and Methods + #### Style 03-04 .s-rule.do :marked @@ -746,9 +729,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Import Destructuring Spacing - - #### Style 03-05 + ### Import Destructuring Spacing + #### Style 03-05 .s-rule.do :marked @@ -768,9 +750,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Import Line Spacing - - #### Style 03-06 + ### Import Line Spacing + #### Style 03-06 .s-rule.do :marked @@ -812,9 +793,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### LIFT - - #### Style 04-01 + ### LIFT + #### Style 04-01 .s-rule.do :marked @@ -832,9 +812,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Locate - - #### Style 04-02 + ### Locate + #### Style 04-02 .s-rule.do :marked @@ -848,9 +827,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Identify - - #### Style 04-03 + ### Identify + #### Style 04-03 .s-rule.do :marked @@ -876,9 +854,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Flat - - #### Style 04-04 + ### Flat + #### Style 04-04 .s-rule.do :marked @@ -896,9 +873,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### T-DRY (Try to be DRY) - - #### Style 04-05 + ### T-DRY (Try to be DRY) + #### Style 04-05 .s-rule.do :marked @@ -916,9 +892,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Overall Structural Guidelines - - #### Style 04-06 + ### Overall Structural Guidelines + #### Style 04-06 .s-rule.do :marked @@ -984,9 +959,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Shared Folder - - #### Style 04-07 + ### Shared Folder + #### Style 04-07 .s-rule.do :marked @@ -1045,9 +1019,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Folders-by-Feature Structure - - #### Style 04-08 + ### Folders-by-Feature Structure + #### Style 04-08 .s-rule.do :marked @@ -1120,9 +1093,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Layout Components - - #### Style 04-09 + ### Layout Components + #### Style 04-09 .s-rule.do :marked @@ -1171,9 +1143,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Create and Import Barrels - - #### Style 04-10 + ### Create and Import Barrels + #### Style 04-10 .s-rule.consider :marked @@ -1261,9 +1232,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Lazy Loaded Folders - - #### Style 04-11 + ### Lazy Loaded Folders + #### Style 04-11 A distinct application feature or workflow may be *lazy loaded* or *loaded on demand* rather than when the application starts. .s-rule.do @@ -1279,9 +1249,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Prefix Lazy Loaded Folders with + - - #### Style 04-12 + ### Prefix Lazy Loaded Folders with + + #### Style 04-12 .s-rule.do :marked @@ -1315,9 +1284,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Never Directly Import Lazy Loaded Folders - - #### Style 04-13 + ### Never Directly Import Lazy Loaded Folders + #### Style 04-13 .s-rule.avoid :marked @@ -1334,9 +1302,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Lazy Loaded Folders May Import From a Parent - - #### Style 04-14 + ### Lazy Loaded Folders May Import From a Parent + #### Style 04-14 .s-rule.do :marked @@ -1353,9 +1320,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Use Component Router to Lazy Load - - #### Style 04-15 + ### Use Component Router to Lazy Load + #### Style 04-15 .s-rule.do :marked @@ -1371,9 +1337,8 @@ a(href="#toc") Back to top :marked ## Components - ### Components Selector Naming - - #### Style 05-02 + ### Components Selector Naming + #### Style 05-02 .s-rule.do :marked @@ -1398,9 +1363,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Components as Elements - - #### Style 05-03 + ### Components as Elements + #### Style 05-03 .s-rule.do :marked @@ -1436,9 +1400,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Extract Template and Styles to Their Own Files - - #### Style 05-04 + ### Extract Template and Styles to Their Own Files + #### Style 05-04 .s-rule.do :marked @@ -1477,9 +1440,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Decorate Input and Output Properties Inline - - #### Style 05-12 + ### Decorate Input and Output Properties Inline + #### Style 05-12 .s-rule.do :marked @@ -1515,9 +1477,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Avoid Renaming Inputs and Outputs - - #### Style 05-13 + ### Avoid Renaming Inputs and Outputs + #### Style 05-13 .s-rule.avoid :marked @@ -1545,9 +1506,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Member Sequence - - #### Style 05-14 + ### Member Sequence + #### Style 05-14 .s-rule.do :marked @@ -1571,9 +1531,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Put Logic in Services - - #### Style 05-15 + ### Put Logic in Services + #### Style 05-15 .s-rule.do :marked @@ -1609,9 +1568,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Don't Prefix Output Properties - - #### Style 05-16 + ### Don't Prefix Output Properties + #### Style 05-16 .s-rule.do :marked @@ -1647,9 +1605,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Put Presentation Logic in the Component Class - - #### Style 05-17 + ### Put Presentation Logic in the Component Class + #### Style 05-17 .s-rule.do :marked @@ -1679,9 +1636,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Use Directives to Enhance an Existing Element - - #### Style 06-01 + ### Use Directives to Enhance an Existing Element + #### Style 06-01 .s-rule.do :marked @@ -1705,9 +1661,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Use HostListener and HostBinding Class Decorators - - #### Style 06-03 + ### Use HostListener and HostBinding Class Decorators + #### Style 06-03 .s-rule.do :marked @@ -1733,9 +1688,8 @@ a(href="#toc") Back to top :marked ## Services - ### Services are Singletons in Same Injector - - #### Style 07-01 + ### Services are Singletons in Same Injector + #### Style 07-01 .s-rule.do :marked @@ -1756,9 +1710,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Single Responsibility - - #### Style 07-02 + ### Single Responsibility + #### Style 07-02 .s-rule.do :marked @@ -1780,9 +1733,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Providing a Service - - #### Style 07-03 + ### Providing a Service + #### Style 07-03 .s-rule.do :marked @@ -1816,9 +1768,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Use the @Injectable() Class Decorator - - #### Style 07-04 + ### Use the @Injectable() Class Decorator + #### Style 07-04 .s-rule.do :marked @@ -1844,9 +1795,8 @@ a(href="#toc") Back to top :marked ## Data Services - ### Separate Data Calls - - #### Style 08-01 + ### Separate Data Calls + #### Style 08-01 .s-rule.do :marked @@ -1880,9 +1830,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Implement Lifecycle Hooks Interfaces - - #### Style 09-01 + ### Implement Lifecycle Hooks Interfaces + #### Style 09-01 .s-rule.do :marked @@ -1911,9 +1860,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Component Router - - #### Style 10-01 + ### Component Router + #### Style 10-01 .s-rule.do :marked @@ -1954,9 +1902,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### Codelyzer - - #### Style A-01 + ### Codelyzer + #### Style A-01 .s-rule.do :marked @@ -1970,9 +1917,8 @@ a(href="#toc") Back to top .l-main-section :marked - ### File Templates and Snippets - - #### Style A-02 + ### File Templates and Snippets + #### Style A-02 .s-rule.do :marked From 2fc7e5ab50c5d36fa1aa71c850170748076e0111 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Tue, 7 Jun 2016 14:06:10 -0700 Subject: [PATCH 02/16] docs(toh-1/ts): minor edits closes #1615 - Fixed HTML. - Removed unnecessary snippet since it is in the code. - Copyedit: (Hero property) -> (hero property). --- .../toh-1/ts-snippets/app.component.snippets.pt1.ts | 7 ------- public/docs/_examples/toh-1/ts/app/app.component.ts | 3 ++- public/docs/ts/latest/tutorial/toh-pt1.jade | 2 +- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts b/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts index a62447ad91..05180b0c83 100644 --- a/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts +++ b/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts @@ -37,10 +37,3 @@ export class AppComponent { hero = 'Windstorm'; } // #enddocregion app-component-1 - -// #docregion hero-property-1 -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 73ac649198..b61fac3c0b 100644 --- a/public/docs/_examples/toh-1/ts/app/app.component.ts +++ b/public/docs/_examples/toh-1/ts/app/app.component.ts @@ -22,10 +22,11 @@ export class Hero { }) export class AppComponent { title = 'Tour of Heroes'; + // #docregion hero-property-1 hero: Hero = { id: 1, name: 'Windstorm' }; + // #enddocregion hero-property-1 } - // #enddocregion pt1 diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade index 583457cfb9..3cbe3ab0f4 100644 --- a/public/docs/ts/latest/tutorial/toh-pt1.jade +++ b/public/docs/ts/latest/tutorial/toh-pt1.jade @@ -78,7 +78,7 @@ code-example(language="bash"). Now that we have a `Hero` class, 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-snippets/app.component.snippets.pt1.ts', 'hero-property-1', 'app.component.ts (Hero property)')(format=".") ++makeExample('toh-1/ts/app/app.component.ts', 'hero-property-1', 'app.component.ts (hero property)')(format=".") :marked Because we changed the hero from a string to an object, From 59408b17845109d6068e14ee13e09fc829b60e2e Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 8 Jun 2016 07:40:49 -0700 Subject: [PATCH 03/16] test(toh-1): add e2e for Dart and TS closes 1620 Contributes to #1619. --- .../_examples/toh-1/dart/example-config.json | 0 public/docs/_examples/toh-1/e2e-spec.ts | 26 +++++++++++++++++++ 2 files changed, 26 insertions(+) create mode 100644 public/docs/_examples/toh-1/dart/example-config.json create mode 100644 public/docs/_examples/toh-1/e2e-spec.ts diff --git a/public/docs/_examples/toh-1/dart/example-config.json b/public/docs/_examples/toh-1/dart/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/toh-1/e2e-spec.ts b/public/docs/_examples/toh-1/e2e-spec.ts new file mode 100644 index 0000000000..eb28e941de --- /dev/null +++ b/public/docs/_examples/toh-1/e2e-spec.ts @@ -0,0 +1,26 @@ +/// +describe('Tutorial part 1', () => { + + let expectedH1 = 'Tour of Heroes'; + let expectedTitle = `Angular 2 ${expectedH1}`; + let hero = { id: 1, name: 'Windstorm' }; + let expectedH2 = `${hero.name} details!`; + + beforeEach(() => { + return browser.get(''); + }); + + it(`should have title '${expectedTitle}'`, () => { + expect(browser.getTitle()).toEqual(expectedTitle); + }); + + it(`should have '${expectedH2}'`, () => { + var text = element(by.css('h2')).getText() + expect(text).toEqual(expectedH2); + }); + + it(`should have input name '${hero.name}'`, () => { + var name = element(by.css('input')).getAttribute('value'); + expect(name).toEqual(hero.name); + }); +}); From 16848fc82254966727b9c2e4dd42d5edb01894c6 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Mon, 13 Jun 2016 07:30:26 -0700 Subject: [PATCH 04/16] docs(toh-2/ts): copyedits closes #1622 --- .../_examples/toh-2/ts/app/app.component.ts | 16 ++++---- public/docs/_examples/toh-2/ts/app/main.ts | 2 - public/docs/ts/latest/tutorial/toh-pt2.jade | 39 +++++++++---------- 3 files changed, 26 insertions(+), 31 deletions(-) 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 8e0d3c84a4..5d10fc55a9 100644 --- a/public/docs/_examples/toh-2/ts/app/app.component.ts +++ b/public/docs/_examples/toh-2/ts/app/app.component.ts @@ -1,4 +1,4 @@ -// #docregion pt2 +// #docregion import { Component } from '@angular/core'; export class Hero { @@ -42,7 +42,7 @@ const HEROES: Hero[] = [ `, -// #docregion styles-1 + // #docregion styles styles: [` .selected { background-color: #CFD8DC !important; @@ -92,18 +92,16 @@ const HEROES: Hero[] = [ border-radius: 4px 0 0 4px; } `] -// #enddocregion styles-1 + // #enddocregion styles }) export class AppComponent { title = 'Tour of Heroes'; heroes = HEROES; -// #docregion selected-hero-1 + // #docregion selected-hero selectedHero: Hero; -// #enddocregion selected-hero-1 + // #enddocregion selected-hero -// #docregion on-select-1 + // #docregion on-select onSelect(hero: Hero) { this.selectedHero = hero; } -// #enddocregion on-select-1 + // #enddocregion on-select } - -// #enddocregion pt2 diff --git a/public/docs/_examples/toh-2/ts/app/main.ts b/public/docs/_examples/toh-2/ts/app/main.ts index dae4ddf676..42dbeb9f7d 100644 --- a/public/docs/_examples/toh-2/ts/app/main.ts +++ b/public/docs/_examples/toh-2/ts/app/main.ts @@ -1,7 +1,5 @@ -// #docregion pt1 import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; bootstrap(AppComponent); -// #enddocregion pt1 diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade index aced39f750..86a5b73dd1 100644 --- a/public/docs/ts/latest/tutorial/toh-pt2.jade +++ b/public/docs/ts/latest/tutorial/toh-pt2.jade @@ -50,7 +50,7 @@ code-example(language="bash"). ### Creating heroes Let’s create an array of ten heroes at the bottom of `app.component.ts`. -+makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (Hero array)') ++makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (hero array)') :marked The `HEROES` array is of type `Hero`, the class defined in part one, @@ -59,9 +59,9 @@ code-example(language="bash"). first and display mock heroes. ### Exposing heroes - Let’s create a property in `AppComponent` that exposes the heroes for binding. + Let’s create a public property in `AppComponent` that exposes the heroes for binding. -+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (Hero array property)') ++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (hero array property)') :marked We did not have to define the `heroes` type. TypeScript can infer it from the `HEROES` array. @@ -76,7 +76,7 @@ code-example(language="bash"). Our component has `heroes`. Let’s create an unordered list in our template to display them. We’ll insert the following chunk of HTML below the title and above the hero details. -+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (Heroes template)') ++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (heroes template)') :marked Now we have a template that we can fill with our heroes. @@ -107,7 +107,7 @@ code-example(language="bash"). “*take each hero in the `heroes` array, store it in the local `hero` variable, and make it available to the corresponding template instance*”. - The `let` keyword before "hero" identifies the `hero` as a template input variable. + The `let` keyword before "hero" identifies `hero` as a template input variable. We can reference this variable within the template to access a hero’s properties. Learn more about `ngFor` and template input variables in the @@ -130,21 +130,20 @@ code-example(language="bash"). Let’s add some styles to our component by setting the `styles` property on the `@Component` decorator to the following CSS classes: -+makeExample('toh-2/ts/app/app.component.ts', 'styles-1', 'app.component.ts (Styling)') ++makeExample('toh-2/ts/app/app.component.ts', 'styles', 'app.component.ts (styles)')(format=".") :marked Notice that we again use the back-tick notation for multi-line strings. + That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component. + We'll do this in a later chapter. For now let's keep rolling. + When we assign styles to a component they are scoped to that specific component. Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML. Our template for displaying the heroes should now look like this: -+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (Styled heroes)') - -:marked - That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component. - We'll do this in a later chapter. For now let's keep rolling. ++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (styled heroes)') .l-main-section :marked @@ -160,7 +159,7 @@ code-example(language="bash"). ### Click event We modify the `
  • ` by inserting an Angular event binding to its click event. - +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (Capturing the click event)') + +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (template excerpt)') :marked Focus on the event binding @@ -190,21 +189,21 @@ code-example(language="bash"). We no longer need the static `hero` property of the `AppComponent`. **Replace** it with this simple `selectedHero` property: - +makeExample('toh-2/ts/app/app.component.ts', 'selected-hero-1', 'app.component.ts (selectedHero)') + +makeExample('toh-2/ts/app/app.component.ts', 'selected-hero', 'app.component.ts (selectedHero)') :marked We’ve decided that none of the heroes should be selected before the user picks a hero so we won’t initialize the `selectedHero` as we were doing with `hero`. Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked. - +makeExample('toh-2/ts/app/app.component.ts', 'on-select-1', 'app.component.ts (onSelect)') + +makeExample('toh-2/ts/app/app.component.ts', 'on-select', 'app.component.ts (onSelect)') :marked We will be showing the selected hero's details in our template. At the moment, it is still referring to the old `hero` property. Let’s fix the template to bind to the new `selectedHero` property. - +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (Binding to the selectedHero\'s name)') + +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (template excerpt)') :marked ### Hide the empty detail with ngIf @@ -266,16 +265,16 @@ code-example(language="bash"). The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise. We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”. - +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (Setting the CSS class)')(format=".") + +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".") :marked Notice in the template that the `class.selected` is surrounded in square brackets (`[]`). - This is the syntax for a Property Binding, a binding in which data flows one way + This is the syntax for a **property binding**, a binding in which data flows one way from the data source (the expression `hero === selectedHero`) to a property of `class`. - +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (Styling each hero)')(format=".") + +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".") .l-sub-section :marked - Learn more about [Property Binding](../guide/template-syntax.html#property-binding) + Learn more about [property bindings](../guide/template-syntax.html#property-binding) in the Template Syntax chapter. :marked @@ -290,7 +289,7 @@ code-example(language="bash"). Here's the complete `app.component.ts` as it stands now: - +makeExample('toh-2/ts/app/app.component.ts', 'pt2', 'app.component.ts') + +makeExample('toh-2/ts/app/app.component.ts', '', 'app.component.ts') .l-main-section :marked From 070cb5a1935aca5cbf593f6ad7c3d063df880c7c Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 8 Jun 2016 17:23:46 -0700 Subject: [PATCH 05/16] docs(toh-3/ts): copyedits closes #1630 --- public/docs/ts/latest/tutorial/toh-pt3.jade | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade index e5cb933aa6..2b08697697 100644 --- a/public/docs/ts/latest/tutorial/toh-pt3.jade +++ b/public/docs/ts/latest/tutorial/toh-pt3.jade @@ -30,7 +30,7 @@ p Run the #[+liveExampleLink2('', 'toh-3')] for this part. ### 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 -code-example(format="." language="bash"). +code-example(language="bash"). npm start :marked @@ -54,7 +54,7 @@ code-example(format="." language="bash"). ### Separating the Hero Detail Component Add a new file named `hero-detail.component.ts` to the `app` folder and create `HeroDetailComponent` as follows. -+makeExample('toh-3/ts/app/hero-detail.component.ts', 'v1', 'hero-detail.component.ts (initial version)')(format=".") ++makeExample('toh-3/ts/app/hero-detail.component.ts', 'v1', 'app/hero-detail.component.ts (initial version)')(format=".") .l-sub-section :marked ### Naming conventions @@ -65,7 +65,8 @@ code-example(format="." language="bash"). All of our component names end in "Component". All of our component file names end in ".component". - We spell our file names in lower dash case (AKA "kebab-case") so we don't worry about + We spell our file names in lower **[dash case](../guide/glossary.html#!#dash-case)** + (AKA **[kebab-case](../guide/glossary.html#!#kebab-case)**) so we don't worry about case sensitivity on the server or in source control.

    Top Heroes

    - +
    - +

    {{hero.name}}

    diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts index 3d54f5ab4b..e58760caad 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts @@ -22,12 +22,12 @@ export class DashboardComponent implements OnInit { heroes: Hero[] = []; -// #docregion ctor + // #docregion ctor constructor( private router: Router, private heroService: HeroService) { } -// #enddocregion ctor + // #enddocregion ctor ngOnInit() { this.heroService.getHeroes() @@ -41,4 +41,3 @@ export class DashboardComponent implements OnInit { } // #enddocregion goto-detail } -// #enddocregion 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 index 08af69c69c..96eb8aa93f 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts @@ -1,7 +1,6 @@ // #docplaster // #docregion -// #docregion v2 -// #docregion import-oninit +// #docregion import-oninit, v2 import { Component, OnInit } from '@angular/core'; // #enddocregion import-oninit // #docregion import-route-params @@ -18,25 +17,24 @@ import { HeroService } from './hero.service'; selector: 'my-hero-detail', // #docregion template-url templateUrl: 'app/hero-detail.component.html', - // #enddocregion template-url -// #enddocregion v2 + // #enddocregion template-url, v2 styleUrls: ['app/hero-detail.component.css'] -// #docregion v2 + // #docregion v2 }) // #enddocregion extract-template // #docregion implement export class HeroDetailComponent implements OnInit { -// #enddocregion implement + // #enddocregion implement hero: Hero; -// #docregion ctor + // #docregion ctor constructor( private heroService: HeroService, private routeParams: RouteParams) { } -// #enddocregion ctor + // #enddocregion ctor -// #docregion ng-oninit + // #docregion ng-oninit ngOnInit() { // #docregion get-id let id = +this.routeParams.get('id'); @@ -44,13 +42,11 @@ export class HeroDetailComponent implements OnInit { this.heroService.getHero(id) .then(hero => this.hero = hero); } -// #enddocregion ng-oninit + // #enddocregion ng-oninit -// #docregion go-back + // #docregion go-back goBack() { window.history.back(); } // #enddocregion go-back } -// #enddocregion v2 -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/hero.service.ts b/public/docs/_examples/toh-5/ts/app/hero.service.ts index 9bae27f006..c1cb8fa3e6 100644 --- a/public/docs/_examples/toh-5/ts/app/hero.service.ts +++ b/public/docs/_examples/toh-5/ts/app/hero.service.ts @@ -24,4 +24,3 @@ export class HeroService { } // #enddocregion get-hero } -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.html b/public/docs/_examples/toh-5/ts/app/heroes.component.html index cce1853d30..db41c4692e 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.html +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.html @@ -17,5 +17,3 @@
    - - diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts index 300f3065e0..cd43e03b86 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts @@ -6,21 +6,18 @@ import { Router } from '@angular/router-deprecated'; import { Hero } from './hero'; import { HeroService } from './hero.service'; -// #docregion metadata -// #docregion heroes-component-renaming +// #docregion heroes-component-renaming, metadata @Component({ selector: 'my-heroes', -// #enddocregion heroes-component-renaming + // #enddocregion heroes-component-renaming templateUrl: 'app/heroes.component.html', styleUrls: ['app/heroes.component.css'] -// #docregion heroes-component-renaming + // #docregion heroes-component-renaming }) -// #enddocregion heroes-component-renaming -// #enddocregion metadata -// #docregion class -// #docregion heroes-component-renaming +// #enddocregion heroes-component-renaming, metadata +// #docregion class, heroes-component-renaming export class HeroesComponent implements OnInit { -// #enddocregion heroes-component-renaming + // #enddocregion heroes-component-renaming heroes: Hero[]; selectedHero: Hero; @@ -41,8 +38,5 @@ export class HeroesComponent implements OnInit { gotoDetail() { this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]); } -// #docregion heroes-component-renaming + // #docregion heroes-component-renaming } -// #enddocregion heroes-component-renaming -// #enddocregion class -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/mock-heroes.ts b/public/docs/_examples/toh-5/ts/app/mock-heroes.ts index ddd36d7868..69afde3d34 100644 --- a/public/docs/_examples/toh-5/ts/app/mock-heroes.ts +++ b/public/docs/_examples/toh-5/ts/app/mock-heroes.ts @@ -13,4 +13,3 @@ export var HEROES: Hero[] = [ {id: 19, name: 'Magma'}, {id: 20, name: 'Tornado'} ]; -// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/index.html b/public/docs/_examples/toh-5/ts/index.html index 93fa8d4889..4df64edba1 100644 --- a/public/docs/_examples/toh-5/ts/index.html +++ b/public/docs/_examples/toh-5/ts/index.html @@ -1,7 +1,7 @@ - + diff --git a/public/docs/_examples/toh-5/ts/styles.1.css b/public/docs/_examples/toh-5/ts/styles.1.css index 5b77b74d1c..dee6d5b8ca 100644 --- a/public/docs/_examples/toh-5/ts/styles.1.css +++ b/public/docs/_examples/toh-5/ts/styles.1.css @@ -1,5 +1,11 @@ -/* #docregion */ -h2 { +/* #docregion toh-excerpt */ +/* Master Styles */ +h1 { + color: #369; + font-family: Arial, Helvetica, sans-serif; + font-size: 250%; +} +h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; @@ -11,23 +17,7 @@ body, input[text], button { color: #888; font-family: Cambria, Georgia; } -button { - font-family: Arial; - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; - cursor: hand; -} -button:hover { - background-color: #cfd8dc; -} -button:disabled { - background-color: #eee; - color: #aaa; - cursor: auto; -} +/* . . . */ /* everywhere else */ * { font-family: Arial, Helvetica, sans-serif; diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 74033d91d3..76d7a579bb 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -3,10 +3,10 @@ include ../_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; + * 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 @@ -16,7 +16,7 @@ figure.image-display .l-sub-section :marked The [Routing and Navigation](../guide/router-deprecated.html) chapter covers the router in more detail - than we will in this tour. + than we will in this tutorial. p Run the #[+liveExampleLink2('', 'toh-5')] for this part. @@ -65,10 +65,10 @@ code-example(language="bash"). ## 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` + * 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 @@ -91,13 +91,13 @@ code-example(language="bash"). 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`. + The steps are: rename the + * `app.component.ts` file to `heroes.component.ts`, + * `AppComponent` class to `HeroesComponent`, + * selector `my-app` to `my-heroes`. :marked -+makeExample('toh-5/ts/app/heroes.component.ts', 'heroes-component-renaming', 'app/heroes.component.ts (renaming)')(format=".") ++makeExample('toh-5/ts/app/heroes.component.ts', 'heroes-component-renaming', 'app/heroes.component.ts (showing renamings only)')(format=".") :marked ## Create *AppComponent* @@ -154,10 +154,10 @@ code-example(language="bash"). The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`), and a configuration decorator (`RouteConfig`). We'll import them all together: -+makeExample('toh-5/ts/app/app.component.2.ts', 'import-router', 'app.component.ts (router imports)')(format=".") ++makeExample('toh-5/ts/app/app.component.2.ts', 'import-router', 'app/app.component.ts (router imports)')(format=".") :marked Next we update the `directives` and `providers` metadata arrays to *include* the router assets. -+makeExample('toh-5/ts/app/app.component.2.ts', 'directives-and-providers', 'app.component.ts (directives and providers)')(format=".") ++makeExample('toh-5/ts/app/app.component.2.ts', 'directives-and-providers', 'app/app.component.ts (directives and providers)')(format=".") :marked Notice that we also removed the `HeroesComponent` from the `directives` array. `AppComponent` no longer shows heroes; that will be the router's job. @@ -172,7 +172,7 @@ code-example(language="bash"). pastes a URL into the browser address bar. Let's define our first route, a route to the `HeroesComponent`. -+makeExample('toh-5/ts/app/app.component.2.ts', 'route-config', 'app.component.ts (RouteConfig for heroes)')(format=".") ++makeExample('toh-5/ts/app/app.component.2.ts', 'route-config', 'app/app.component.ts (RouteConfig for heroes)')(format=".") :marked `@RouteConfig` takes an array of *route definitions*. We have only one route definition at the moment but rest assured, we'll add more. @@ -203,7 +203,7 @@ code-example(language="bash"). We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`. The revised template looks like this: -+makeExample('toh-5/ts/app/app.component.2.ts', 'template', 'app.component.ts (template for Heroes)')(format=".") ++makeExample('toh-5/ts/app/app.component.2.ts', 'template', 'app/app.component.ts (template v1)')(format=".") :marked Notice the `[routerLink]` binding in the anchor tag. We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to an array @@ -250,7 +250,7 @@ code-example(language="bash"). Import the `DashboardComponent` so we can reference it in the dashboard route definition. Add the following `'Dashboard'` route definition to the `@RouteConfig` array of definitions. -+makeExample('toh-5/ts/app/app.component.ts','dashboard-route', 'app.component.ts (Dashboard Route)')(format=".") ++makeExample('toh-5/ts/app/app.component.ts','dashboard-route', 'app/app.component.ts (Dashboard route)')(format=".") .l-sub-section :marked **useAsDefault** @@ -265,7 +265,7 @@ code-example(language="bash"). :marked Finally, add a dashboard navigation link to the template, just above the *Heroes* link. -+makeExample('toh-5/ts/app/app.component.ts','template', 'app.component.ts (template)')(format=".") ++makeExample('toh-5/ts/app/app.component.ts','template', 'app/app.component.ts (template)')(format=".") .l-sub-section :marked We nestled the two links within `