(docs) tutorial index fixes

public/docs/ts/latest/guide/template-syntax.jade

@@ -1196,7 +1196,7 @@ code-example(format="" language="html").
   <a id="expression-ops"></a>
   ## Template Expression Operators
   The template expression language employs a subset of JavaScript syntax supplemented with some special operators 
-  for specific scenarios. We'll' cover two of them: "pipe" and "Elvis".
+  for specific scenarios. We'll cover two of them, "pipe" and "Elvis".
   
   <a id="pipe"></a>
   ### The Pipe Operator ( | )

public/docs/ts/latest/tutorial/index.jade

@@ -1,75 +1,76 @@
 include ../../../../_includes/_util-fns
 
-.l-main-section
-  :markdown
-    # Tour of Heroes: the vision
+:markdown
+  # Tour of Heroes: the vision
 
-    Our grand plan is to build an app to help a staffing agency manage its stable of heroes.
-    Even heroes need to find work.
+  Our grand plan is to build an app to help a staffing agency manage its stable of heroes.
+  Even heroes need to find work.
 
-    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
-    a list of heroes, editing a selected hero's detail, and navigating among different
-    views of heroic data.
+  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
+  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 method 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.
+  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 method 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.
 
-    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.
+  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.
     
 .l-main-section
-  :markdown
-    ## The End Game
+:markdown
+  ## 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 we're going in this tour, beginning with the "Dashboard"
+  view and our most heroic heroes:
 
-  figure.image-display
-    img(src='/resources/images/devguide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard")
+figure.image-display
+  img(src='/resources/images/devguide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard")
 
-  :markdown
-    Above the list are two links ("Dashboard" and "Heroes").
-    We click them to navigate between this Dashboard view and a Heroes view.
+:markdown
+  Above the dashboard are two links ("Dashboard" and "Heroes").
+  We could click them to navigate between this Dashboard and a Heroes view.
 
-    We can click a hero to be transitioned by the router to a "Hero Details" view,
-    where we 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")
+  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.
+  
+figure.image-display
+  img(src='/resources/images/devguide/toh/hero-details-1.png' alt="Details of hero in app")
 
-  :markdown
-    Links at the top take us back to either of the main views.
-    The "Back" button returns us to the "Dashboard" view.
+:markdown
+  Links at the top can take us to either of the main views.
+  We'll click the "Back" button which sends us to the "Heroes" master list view with
+  "Magneta" as the selected hero.
 
-  figure.image-display
-    img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app")
+figure.image-display
+  img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app")
 
-  :markdown
-    Above the Dashboard are two links ("Dashboard" and "Heroes").
-    We click them to navigate between a Dashboard view and this Heroes view.
+:markdown
+  We click a different hero and the readonly mini-detail beneath the list reflects our new choice.
+  
+  We click the "View Details" button to drill into the
+  editable details of our selected hero.
+  
+  The following diagram captures all of our navigation options.
+
+figure.image-display
+  img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations")
 
-    We can click the "Heroes" link and be wisked away by the router to 
-    a "Heroes" view where we can see a list of our heroes.
-    
-    We can click a hero and have the router race us over to a "Hero Details" view
-    again.
-    
 .l-main-section
-  :markdown
-    ## How We Roll
+:markdown
+  ## How We Roll
 
-    We’ll build this Tour of Heroes together, step by step.
-    We'll motiviate each step with a requirement that we've
-    met in countless applications. Everything has a reason.
+  We’ll build this Tour of Heroes together, step by step.
+  We'll motiviate each step with a requirement that we've
+  met in countless applications. Everything has a reason.
 
-    And we’ll meet many of the core fundamentals of Angular along the way.
- 
-    [Let's get started!](./toh-pt1.html)
+  And we’ll meet many of the core fundamentals of Angular along the way.
+
+  [Let's get started!](./toh-pt1.html)