anchor.diff:    应用仍然在运行，并显示着英雄列表。
     我们把`AppComponent`重构成了一个新的`AppComponent`和`HeroesComponent`，它们工作得很好！
     我们毫发无损的完成了这次重构。
  -  
  +
   :marked
     ## Add Routing
  -  
  +
     ## 添加路由
  -  
  -  We're ready to take the next step. 
  +
  +  We're ready to take the next step.
     Instead of displaying heroes automatically, we'd like to show them *after* the user clicks a button.
     In other words, we'd like to navigate to the list of heroes.
  -  
  +
     我们已准备好开始下一步。
     与其自动显示英雄列表，我们更希望在用户点击按钮之后才显示它。
     换句话说，我们希望“导航”到英雄列表。
  -  
  +
     We'll need the Angular *Component Router*.
   
     我们需要Angular的*组件路由器*。
  -  
  +
     ### Set the base tag
  -  
  +
     ### 设置base标签
  -  
  -  Open the `index.html` and add `<base href="/">` at the top of the `<head>` section. 
  -  
  +
  +  Open the `index.html` and add `<base href="/">` at the top of the `<head>` section.
  +
     打开`index.html`并且在`<head>`区的顶部添加`<base href="/">`语句。
  -  
  +
   +makeExample('toh-5/ts/index.html', 'base-href', 'index.html (base href)')(format=".")
   
   .callout.is-important
  -  
  +
     header base href is essential
  -  
  +
     header base href是不可或缺的
  -  
  +
     :marked
       See the *base href* section of the [Router](../guide/router.html#!#base-href) chapter to learn why this matters.
   
       查看[路由器](../guide/router-deprecated.html#!#base-href)一章的*base href*部分，了解为何如此。
  -    
  +
   :marked
     The Angular router is a combination of multiple provided services (`provideRouter`), multiple directives (`ROUTER_DIRECTIVES`),
     and a configuration (`RouterConfig`). We'll configure our routes first:
  -  
  +
     Angular路由器是由多个服务(`ROUTER_PROVIDERS`)和多个指令(`ROUTER_DIRECTIVES`)以及一个配置装饰器(`RouteConfig`)组成的。我们一次性导入它们。
   
     ### Configure and add the router
  -  
  +
     ### 配置与添加路由器
   
     Our application doesn't have a router yet. We'll create a configuration file for our routes that
     does two things
     (a) configure that router with *routes*. (b) provide an export to add the router to our bootstrap
  -  
  +
     我们的应用还没有路由器。我们得为这些路由创建一个配置文件，该文件要做两件事：(a) 使用*一些路由*配置路由器。(b) 提供一个导出，以便把该路由器添加到我们的启动代码。
   
     *Routes* tell the router which views to display when a user clicks a link or
  
positive.code:    Going back too far could take us out of the application.
     That's acceptable in a demo. We'd guard against it in a real application,
     perhaps with the [*CanDeactivate* guard](../api/router/index/CanDeactivate-interface.html).
     
     回退太多步儿会跑出我们的应用。
     在Demo中，这算不上问题。但在真实的应用中，我们需要对此进行防范。
     也许你该用[*CanDeactivate*守卫](../api/router/index/CanDeactivate-interface.html).。
     
  :marked
    Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.
    
    然后，我们通过一个事件绑定把此方法绑定到模板底部的*后退(Back)*按钮上。
    
  +makeExample('toh-5/ts/app/hero-detail.component.html', 'back-button')(format=".")
  
  :marked
    Modifing the template to add this button spurs us to take one more incremental improvement and migrate the template to its own file
    called `hero-detail.component.html`
    
    修改模板，添加这个按钮以提醒我们还要做更多的改进，并把模板移到独立的`hero-detail.component.html`文件中去。
    
  +makeExample('toh-5/ts/app/hero-detail.component.html', '', 'app/hero-detail.component.html')(format=".")
  
  :marked
    We update the component metadata with a `templateUrl` pointing to the template file that we just created.
    
    然后更新组件的元数据，用一个`templateUrl`属性指向我们刚刚创建的模板文件。
    
  +makeExample('toh-5/ts/app/hero-detail.component.ts', 'template-url', 'app/hero-detail.component.ts (templateUrl)')(format=".")
  
  :marked
    Here's the (nearly) finished `HeroDetailComponent`:
    
    下面是(几乎)完成的`HeroDetailComponent`：
    
  +makeExample('toh-5/ts/app/hero-detail.component.ts', 'v2', 'app/hero-detail.component.ts (latest)')(format=".")
  
  :marked
  
negative.code: 
  :marked
    ## Add a *Dashboard*
  
    ## 添加一个*仪表盘*
  
    Routing only makes sense when we have multiple views. We need another view.
  
    当我们有多个视图的时候，路由才有意义。所以我们需要另一个视图。
  
    Create a placeholder `DashboardComponent` that gives us something to navigate to and from.
  
    先创建一个`DashboardComponent`的占位符，让我们可以导航到它或从它导航出来。
  
  +makeExample('toh-5/ts/app/dashboard.component.1.ts',null, 'app/dashboard.component.ts (v1)')(format=".")
  :marked
    We’ll come back and make it more useful later.
  
    我们先不实现它，稍后，我们再回来，给这个组件一些实际用途。
  
    ### Configure the dashboard route
  
    ### 配置仪表盘路由
  
    Go back to `app.routes.ts` and teach it to navigate to the dashboard.
  
    回到`app.routes.ts`文件，我们得教它如何导航到这个仪表盘。
  
    Import the `DashboardComponent` so we can reference it in the dashboard route definition.
  
    先导入`DashboardComponent`类，这样我们就可以在仪表盘的路由定义中引用它了。
  
    Add the following `'Dashboard'` route definition to the `RouterConfig` array of definitions.
  
    然后把下列`'Dashboard'`路由的定义添加到`@RouteConfig`数组中。
  
  +makeExample('toh-5/ts/app/app.routes.1.ts','dashboard-route', 'app/app.routes.ts (Dashboard route)')(format=".")
  
  .l-sub-section
  