diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade index dfc137c3b8..c3e95ce6d0 100644 --- a/public/docs/ts/latest/tutorial/toh-pt1.jade +++ b/public/docs/ts/latest/tutorial/toh-pt1.jade @@ -2,17 +2,18 @@ include ../_util-fns :marked # Once Upon a Time + + Every story starts somewhere. + Our story starts where the [QuickStart](../quickstart.html) ends. - Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends. + **Try it out**. Here's a link to a . - Run the for this part. - - Create a folder called `angular-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps - which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes. + Create a folder called `angular-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps, + which provide the prerequisites, folder structure, and core files for the Tour of Heroes. include ../_quickstart_repo :marked - We should have the following structure: + You should have the following structure: .filetree .file angular-tour-of-heroes @@ -32,120 +33,101 @@ include ../_quickstart_repo .file typings.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 + To start the TypeScript compiler in watch mode and start the server, type the following: + code-example(language="bash"). npm start :marked - 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. + This command launches the app in a browser + and keeps the app running while you build the Tour of Heroes. .l-main-section :marked - ## Show our Hero - We want to display Hero data in our app - - Let's add two properties to our `AppComponent`, a `title` property for the application name and a `hero` property - for a hero named "Windstorm". + ## Show your hero + To display hero data in the app, + add two properties to the `AppComponent`: a `title` property for the app name and a `hero` property + for a hero named "Windstorm." +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. + Now update the template in the `@Component` decoration with data bindings to these new properties. +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero') :marked - The browser should refresh and display our title and hero. + The browser refreshes and display the title and hero name. - The double curly braces tell our app to read the `title` and `hero` properties from the component and render them. + The double curly braces instruct the app to read the `title` and `hero` properties from the component and render them. This is the "interpolation" form of one-way data binding. .l-sub-section :marked - Learn more about interpolation in the [Displaying Data chapter](../guide/displaying-data.html). + Learn more about interpolation in the [Displaying Data page](../guide/displaying-data.html). :marked ### Hero object - At the moment, our hero is just a name. Our hero needs more properties. + Our hero needs more properties. Let's convert the `hero` from a literal string to a class. Create a `Hero` class with `id` and `name` properties. - For now put this near the top of the `app.component.ts` file, just below the import statement. + Add these properties near the top of the `app.component.ts` file, just below the import statement. +makeExample('toh-1/ts/app/app.component.ts', 'hero-class-1', 'app.component.ts (Hero class)')(format=".") :marked - 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". + Now in your `Hero` class, refactor the 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.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. + Because you changed the hero from a string to an object, + update the binding in the template to refer to the hero's `name` property. +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. - - ### Adding more HTML - 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-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. + The browser refreshes and continues to display the hero's name. - ### Multi-line template strings + ### Adding HTML with multi-line template strings - We could make a more readable template with string concatenation - but that gets ugly fast, it is harder to read, and - it is easy to make a spelling error. Instead, - let’s take advantage of the template strings feature - in ES2015 and TypeScript to maintain our sanity. - - Change the quotes around the template to back-ticks and - put the `

`, `

` and `
` elements on their own lines. + Displaying a name is good, but we want to see all of the hero's properties. + For this update, you'll add a `
` for the hero's `id` property and another `
` for the hero's `name`. + To keep the template readable, you'll make some additional changes using the template strings feature + in ES2015 and TypeScript: + change the quotes around the template to backticks + and put the `

`, `

`, and `
` elements on their own lines. +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 - :marked - **Be careful!** A back-tick (`) looks a lot like a single quote ('). - It's actually a completely different character. - Back-ticks can do more than demarcate a string. - Here we use them in a limited way to spread the template over multiple lines. - Everything between the back-ticks at the beginning and end of the template - is part of a single template string. +// CF: I removed the note about backticks. It wasn't appearing in the browser and Naomi didn't think it was necessary. .l-main-section :marked - ## Editing Our Hero + ## Editing the hero name We want to be able to edit the hero name in a textbox. - Refactor the hero name `