diff --git a/public/docs/ts/latest/tutorial/_data.json b/public/docs/ts/latest/tutorial/_data.json index 446e87e5d5..03b5fa2545 100644 --- a/public/docs/ts/latest/tutorial/_data.json +++ b/public/docs/ts/latest/tutorial/_data.json @@ -7,33 +7,33 @@ }, "toh-pt1": { "title": "The Hero Editor", - "intro": "We build a simple hero editor", + "intro": "Build a simple hero editor.", "nextable": true }, "toh-pt2": { "title": "Master/Detail", - "intro": "We build a master/detail page with a list of heroes", + "intro": "Build a master/detail page with a list of heroes.", "nextable": true }, "toh-pt3": { "title": "Multiple Components", - "intro": "We refactor the master/detail view into separate components", + "intro": "Refactor the master/detail view into separate components.", "nextable": true }, "toh-pt4": { "title": "Services", - "intro": "We create a reusable service to manage our hero data calls", + "intro": "Create a reusable service to manage the hero data calls.", "nextable": true }, "toh-pt5": { "title": "Routing", - "intro": "We add the Angular Router and learn to navigate among the views", + "intro": "Add the Angular component router and learn to navigate among the views.", "nextable": true }, "toh-pt6": { "title": "HTTP", "subtitle": "Getting and saving data", - "intro": "We convert our service and components to use Angular's HTTP service", + "intro": "Convert the service and components to use Angular's HTTP service.", "nextable": true } } diff --git a/public/docs/ts/latest/tutorial/index.jade b/public/docs/ts/latest/tutorial/index.jade index cb392d9aa5..9ce35b0eea 100644 --- a/public/docs/ts/latest/tutorial/index.jade +++ b/public/docs/ts/latest/tutorial/index.jade @@ -2,80 +2,82 @@ block includes include ../_util-fns :marked - Our grand plan for this tutorial is to build an app to help a staffing agency manage its stable of heroes. - Even heroes need to find work. + The grand plan for this tutorial is to build an app that helps a staffing agency manage its stable of heroes. - Of course we'll only make a little progress in this tutorial. What we do build will - have many of the features we expect to find in a full-blown, data-driven application: acquiring and displaying + The Tour of Heroes app covers the core fundamentals of Angular. You'll build a basic app that + has many of the features you'd expect to find in a full-blown, data-driven app: acquiring and displaying a list of heroes, editing a selected hero's detail, and navigating among different views of heroic data. - The Tour of Heroes covers the core fundamentals of Angular. - We’ll use built-in directives to show/hide elements and display lists of hero data. - We’ll create a component to display hero details and another to show an array of heroes. - We'll use one-way data binding for read-only data. We'll add editable fields to update a model - with two-way data binding. We'll bind component methods to user events like key strokes and clicks. - We’ll learn to select a hero from a master list and edit that hero in the details view. We'll - format data with pipes. We'll create a shared service to assemble our heroes. And we'll use routing to navigate among different views and their components. + You'll use built-in directives to show and hide elements and display lists of hero data. + You'll create components to display hero details and show an array of heroes. + You'll use one-way data binding for read-only data. You'll add editable fields to update a model + with two-way data binding. You'll bind component methods to user events, like keystrokes and clicks. + You'll enable users to select a hero from a master list and edit that hero in the details view. You'll + format data with pipes. You'll create a shared service to assemble the heroes. + And you'll use routing to navigate among different views and their components. + - We’ll learn enough core Angular to get started and gain confidence that - Angular can do whatever we need it to do. - We'll be covering a lot of ground at an introductory level but we’ll find plenty of links - to chapters with greater depth. + You'll learn enough core Angular to get started and gain confidence that + Angular can do whatever you need it to do. + You'll cover a lot of ground at an introductory level, and you'll find many links + to pages with greater depth. + + When you're done with this tutorial, the app will look like this . - Run the . .l-main-section :marked - ## The End Game + ## The end game - Here's a visual idea of where we're going in this tour, beginning with the "Dashboard" - view and our most heroic heroes: + Here's a visual idea of where this tutorial leads, beginning with the "Dashboard" + view and the most heroic heroes: figure.image-display img(src='/resources/images/devguide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard") :marked - Above the dashboard are two links ("Dashboard" and "Heroes"). - We could click them to navigate between this Dashboard and a Heroes view. + Users can click the two links above the dashboard ("Dashboard" and "Heroes") + to navigate between this Dashboard view and a Heroes view. - Instead we click the dashboard hero named "Magneta" and the router takes us to a "Hero Details" view - of that hero where we can change the hero's name. + If a user clicks the dashboard hero "Magneta," the router opens a "Hero Details" view + where the user can change the hero's name. figure.image-display img(src='/resources/images/devguide/toh/hero-details-1.png' alt="Details of hero in app") :marked - Clicking the "Back" button would return us to the "Dashboard". - Links at the top can take us to either of the main views. - We'll click "Heroes". The app takes to the "Heroes" master list view. + Clicking the "Back" button returns users to the Dashboard. + Links at the top take them to either of the main views. + If a user clicks "Heroes," the app displays the "Heroes" master list view. figure.image-display img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app") +// CF: The ability to add heroes isn't shown in the images or discussed in this page. Should that be added? :marked - We click a different hero and the readonly mini-detail beneath the list reflects our new choice. + When a user clicks a different hero name, the read-only mini detail beneath the list reflects the new choice. - We click the "View Details" button to drill into the - editable details of our selected hero. + Users can click the "View Details" button to drill into the + editable details of the selected hero. - The following diagram captures all of our navigation options. + The following diagram captures all of the navigation options. figure.image-display img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations") :marked - Here's our app in action + Here's the app in action: figure.image-display img(src='/resources/images/devguide/toh/toh-anim.gif' alt="Tour of Heroes in Action") .l-main-section :marked - ## Up Next + ## Up next - We’ll build this Tour of Heroes together, step by step. - We'll motivate each step with a requirement that we've - met in countless applications. Everything has a reason. + You'll build the Tour of Heroes app, step by step. + Each step is motivated with a requirement that you've likely + met in many applications. Everything has a reason. - And we’ll meet many of the core fundamentals of Angular along the way. + Along the way, you'll become familiar with many of the core fundamentals of Angular. diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade index 8afda0da67..ffdea56b7d 100644 --- a/public/docs/ts/latest/tutorial/toh-pt1.jade +++ b/public/docs/ts/latest/tutorial/toh-pt1.jade @@ -2,11 +2,11 @@ include ../_util-fns :marked ## Setup to develop locally - Real application development takes place in a local development environment like your machine. + Application development takes place in a local development environment, like your machine. Follow the [setup](../guide/setup.html) instructions for creating a new project - named - after which the file structure should look like this: + named . + The file structure should look like this: .filetree .file angular-tour-of-heroes @@ -23,27 +23,24 @@ include ../_util-fns .file systemjs.config.js .file tsconfig.json :marked - When we're done with this first episode, the app runs like this . + When you're done with this page, the app should look like this . ## Keep the app transpiling and running - We want to start the TypeScript compiler, have it watch for changes, and start our server. - Do this by entering the following command in the terminal window. - + To start the TypeScript compiler in watch mode and start the server, type the following: code-example(language="sh" class="code-shell"). 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 - - Update the `AppComponent` so it has two properties:   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=".") @@ -53,129 +50,112 @@ code-example(language="sh" class="code-shell"). +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 displays 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). + Read more about interpolation in the [Displaying Data](../guide/displaying-data.html) page. + :marked ### Hero object - At the moment, our hero is just a name. Our hero needs more properties. - Let's convert the `hero` from a literal string to a class. + The hero needs more properties. + 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". + In the `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. - - ### Multi-line template strings + The browser refreshes and continues to display the hero's name. - 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. + ### Adding HTML with multi-line template strings - Change the quotes around the template to back-ticks and - put the `

`, `

` and `
` elements on their own lines. + To show all of the hero's properties, + add a `
` for the hero's `id` property and another `
` for the hero's `name`. + To keep the template readable, use 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. - .l-main-section :marked - ## Editing Our Hero + ## Editing the hero name - We want to be able to edit the hero name in a textbox. + Users should be able to edit the hero name in a textbox. - Refactor the hero name `