教程: 英雄指南

本教程的终极计划是构建一个程序，来帮助招聘公司管理一群英雄。 即使英雄们也需要找工作。

The grand plan for this tutorial is to build an app that helps a staffing agency manage its stable of heroes.

这篇《英雄指南》覆盖了 Angular 的核心原理。这次构建的应用会涉及很多特性：获得并显示英雄列表，编辑所选英雄的详情，并在英雄数据的多个视图之间建立导航。这些特性，在成熟的、数据驱动的应用中经常见到。

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.

我们将使用内置指令来显示 / 隐藏元素，并且显示英雄数据的列表。 我们将创建组件来显示英雄的详情和英雄列表。 我们将对只读数据使用单向数据绑定。我们将添加一些可编辑字段，并通过双向数据绑定更新模型。 我们将把组件上的方法绑定到用户事件上，比如按键和点击。 我们将让用户能从主列表视图中选择一个英雄，然后在详情视图中编辑它。 我们将通过管道对数据进行格式化。 我们将创建一个共享服务来管理我们的英雄们。 我们将使用路由在不同的视图及其组件之间进行导航。

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.

完成本教程后，我们将学习足够的 Angular 核心技术，并确信 Angular 确实能做到我们需要它做的。 我们将覆盖大量入门级知识，同时我们也会看到大量链接，指向更深入的章节。

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 live example / downloadable example.

游戏的终点

The end game

下面是本教程关于界面的构想：开始是“Dashboard（仪表盘）”视图，来展示我们最勇敢的英雄。

Here's a visual idea of where this tutorial leads, beginning with the "Dashboard" view and the most heroic heroes:

仪表盘顶部中有两个链接：“Dashboard（仪表盘）”和“Heroes（英雄列表）”。 我们将点击它们在“仪表盘”和“英雄列表”视图之间导航。

You can click the two links above the dashboard ("Dashboard" and "Heroes") to navigate between this Dashboard view and a Heroes view.

当我们点击仪表盘上名叫“Magneta”的英雄时，路由将把我们带到这个英雄的详情页，在这里，我们可以修改英雄的名字。

If you click the dashboard hero "Magneta," the router opens a "Hero Details" view where you can change the hero's name.

点击“Back（后退）”按钮将返回到“Dashboard（仪表盘）”。 顶部的链接可以把我们带到任何一个主视图。 如果我们点击“Heroes（英雄列表）”链接，应用将把我们带到“英雄”主列表视图。

Clicking the "Back" button returns you to the Dashboard. Links at the top take you to either of the main views. If you click "Heroes," the app displays the "Heroes" master list view.

当我们点击另一位英雄时，一个只读的“微型详情视图”会显示在列表下方，以体现我们的选择。

When you click a different hero name, the read-only mini detail beneath the list reflects the new choice.

我们可以点击“View Details（查看详情）”按钮进入所选英雄的编辑视图。

You can click the "View Details" button to drill into the editable details of the selected hero.

下面这张图汇总了我们所有可能的导航路径。

The following diagram captures all of the navigation options.

下图演示了我们应用中的所有操作。

Here's the app in action:

接下来

Up next

让我们一起一步步构建出《英雄指南》。 正如我们在无数应用遇到那样，每一步都由一个需求驱动。毕竟做任何事都要有个理由。

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.

这一路上，我们将遇到很多 Angular 核心原理。

Along the way, you'll become familiar with many of the core fundamentals of Angular.