AngularJS教程：英雄之旅

我们这个教程的宏伟计划是建立一个应用程序，以帮助人事管理机构管理其英雄的稳定性。哪怕是英雄也需要去找到工作。

当然，我们只会在本教程中取得一些进展。我们想要建造的，将会拥有很多我们在一个非常成熟的，数据驱动的应用程序中期望可以找到的功能：获取和显示英雄列表，编辑所选英雄的细节，以及在不同的英雄数据的视图之间导航。

这个英雄之旅涵盖了Angular的核心基础。我们将使用内置指令来显示/隐藏元素，显示英雄数据的列表。我们将创建一个组件来显示英雄的细节，另一个组件显示英雄数组。我们将使用单向数据绑定作为只读数据。我们将使用双向数据绑定来添加可编辑字段以更新模型。我们将组件方法绑定到用户事件，如键盘的敲击和和鼠标的点击。我们将学习从主列表中选择一个英雄，并在细节视图中编辑该英雄。我们将使用管道格式化数据。我们将创建一个共享服务来组装我们的英雄。我们将使用路由来在不同的视图及其组件之间导航。

我们将学习足够多的核心Angular技术，直到开始并获得信心，Angular可以做我们需要它做的任何事情。我们将在介绍中涵盖很多内容，但我们会发现大量的链接到更深的章节。

运行live example。

这个End游戏

Here's a visual idea of where we're going in this tour, beginning with the "Dashboard" view and our most heroic heroes:

在这个指导中，关于我们走到了哪里，是有一个可见的概念的， 从 "Dashboard" （dashboard）视图开始，这里是我们大多数英勇的英雄:

仪表板上方有两个链接（“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”的英雄，路由将会将我们带到这个英雄的“Hero Details” 视图，这里我们可以更改英雄的名字。

点击“Back”按钮将会带我们返回“Dashboard”。 顶部的链接可以带我们去这两个主要的视图。 我们点击 “Heroes”。这个app就到了“Heroes”主列表视图。

我们点击一​​个不同的英雄，列表下面的只读迷你的细节反映了我们的新选择。

我们点击“View Details”按钮，去深度获取我们所选英雄的可编辑细节。

The following diagram captures all of our navigation options.

下图捕获了我们所有的导航选择。

这里是我们的响应中的应用程序。

下一步

我们将一起一步一步地建设这个英雄之旅。我们将在每个步骤中放入一个我们在无数应用程序中遇到的需求。一切都有一个原因。

这样，我们将会遇到许多Angular的核心基础。

以下是原文，摘自：https://angular.io/docs/ts/latest/tutorial/。

The Tour of Heroes tutorial takes you through the steps of creating an Angular application in TypeScript.

Our grand plan for this tutorial 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.

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.

Run the live example.

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:

Above the dashboard are two links ("Dashboard" and "Heroes"). We could click them to navigate between this Dashboard and a Heroes view.

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.

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.

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.

Here's our app in action

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.