block includes
include ../_util-fns
:marked
# 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.
我们的终极计划是构建一个程序，来帮助招聘公司管理一群英雄。
即使英雄们也需要找工作。
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 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.
这篇《英雄指南》覆盖了Angular的核心原理。
我们将使用内置指令来显示/隐藏元素，并且显示英雄数据的列表。
我们将创建一个组件来显示英雄的详情，另一个组件则用来显示英雄列表。
我们将对只读数据使用单向数据绑定。我们将添加一些可编辑字段，并通过双向数据绑定更新模型。
我们将把组件上的方法绑定到用户事件上，比如按键和点击。
我们将学习从主列表视图中选择一个英雄，然后在详情视图中编辑它。
我们将通过管道对数据进行格式化。
我们将创建一个共享服务来管理我们的英雄们。
我们将使用路由在不同的视图及其组件之间进行导航。
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.
完成本教程后，我们将学习足够的Angular核心技术，并确信Angular确实能做到我们需要它做的。
我们将覆盖大量入门级知识，同时我们也会看到大量链接，指向更深入的章节。
Run the .
运行。
.l-main-section
:marked
## 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:
下面是本教程关于界面的构想：开始是“Dashboard（控制台）”视图，来展示我们最勇敢的英雄。
figure.image-display
img(src='/resources/images/devguide/toh/heroes-dashboard-1.png' alt="英雄控制台的输出")
:marked
Above the dashboard are two links ("Dashboard" and "Heroes").
We could click them to navigate between this Dashboard and a Heroes view.
控制台顶部中有两个链接：“Dashboard（控制台）”和“Heroes（英雄列表）”。
我们将点击它们在“控制台”和“英雄列表”视图之间导航。
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.
当我们点击控制台上名叫“Magneta”的英雄时，路由将把我们带到这个英雄的详情页，在这里，我们可以修改英雄的名字。
figure.image-display
img(src='/resources/images/devguide/toh/hero-details-1.png' alt="英雄详情的输出")
: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.
点击“Back（后退）”按钮将返回到“Dashboard（控制台）”。
顶部的链接可以把我们带到任何一个主视图。
如果我们点击“Heroes（英雄列表）”链接，应用将把我们带到“英雄”主列表视图。
figure.image-display
img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="英雄列表的输出")
:marked
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.
我们可以点击“View Details（查看详情）”按钮进入所选英雄的编辑视图。
The following diagram captures all of our navigation options.
下面这张图汇总了我们所有可能的导航路径。
figure.image-display
img(src='/resources/images/devguide/toh/nav-diagram.png' alt="查看导航")
:marked
Here's our app in action
下图演示了我们应用中的所有操作。
figure.image-display
img(src='/resources/images/devguide/toh/toh-anim.gif' alt="英雄指南的所有动作")
.l-main-section
:marked
## 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.
让我们一起一步步构建出《英雄指南》。
正如我们在无数应用遇到那样，每一步都由一个需求驱动。毕竟做任何事都要有个理由。
And we’ll meet many of the core fundamentals of Angular along the way.
这一路上，我们将遇到很多Angular核心原理。
[Let's get started!](./toh-pt1.html)
[勇敢的前进吧！](./toh-pt1.html)