anchor.diff:  figure.image-display
     img(src='/resources/images/devguide/router/hero-list.png' alt="Hero List" width="250")
   :marked
  -  We select one and the applications takes us to a hero editing screen.
  +  We select one and the application takes us to a hero editing screen.
   figure.image-display
     img(src='/resources/images/devguide/router/hero-detail.png' alt="Crisis Center Detail" width="250")
   :marked
  -  Our changes take affect immediately. We click the "Back" button and the
  +  Our changes take effect immediately. We click the "Back" button and the
     app returns us to the Heroes list.
   
     We could have clicked the browser's back button instead.
  
positive.code:   We added a new route definition for the `HeroDetailComponent` &mdash; and this definition has a twist.
  +makeExample('router/ts/app/app.component.2.ts','hero-detail-route')(format=".")
  :marked
    Notice the `:id` token in the the path. That creates a slot in the path for a **Route Parameter**.
    In this case, we're expecting the router to insert the `id` of a hero into that slot.
  
    If we tell the router to navigate to the detail component and display "Magneta", we expect hero `id` (15) to appear in the
  
negative.code:   in the `<head>` of the `index.html`.
  +makeExample('router/ts/index.html','base-href')(format=".")
  :marked
    Without that tag, the browser may not be able to load resources
    (images, css, scripts) when "deep linking" into the app.
    Bad things could happen when someone pastes an application link into the
    browser's address bar or clicks such a link in an email link.
  