Tour of Heroes app and tutorial

快速上手 - Stackblitz
Getting Started


In this tutorial, you build your own app from the ground up, providing experience with the typical development process, as well as an introduction to basic app-design concepts, tools, and terminology.

如果你對 Angular 還不熟悉,你可能要先試一試 快速上手應用。它基於一個現成的、已部分完成的專案,你可以在 StacBlitz 的互動式開發環境中檢查和修改,你還可以在那裡即時檢視結果。

If you're completely new to Angular, you might want to try the Try it now quick-start app first. It is based on a ready-made partially-completed project, which you can examine and modify in the StackBlitz interactive development environment, where you can see the results in real time.

“試一試”課程遵循最新的最佳實踐,以簡明的格式,涵蓋了與其相同的主要話題 - 元件、範本語法、路由、服務,以及透過 HTTP 訪問資料。

The "Try it" tutorial covers the same major topics—components, template syntax, routing, services, and accessing data via HTTP—in a condensed format, following the most current best practices.

這個“英雄之旅”課程向你展示了如何使用 Angular CLI 工具搭建本地開發環境並開發應用,還對 Angular CLI 工具 的基礎知識進行了介紹。

This Tour of Heroes tutorial shows you how to set up your local development environment and develop an app using the Angular CLI tool, and provides an introduction to the fundamentals of Angular.


The Tour of Heroes app that you build helps a staffing agency manage its stable of heroes. The app has many of the features you'd expect to find in any data-driven application. The finished app acquires and displays a list of heroes, edits a selected hero's detail, and navigates among different views of heroic data.

你會在這份 Angular 文件中用到的很多個例子中找到對此應用領域的參考和擴充套件,但是你並不一定非要透過這個課程來理解這些例子。

You will find references to and expansions of this app domain in many of the examples used throughout the Angular documentation, but you don't necessarily need to work through this tutorial to understand those examples.


By the end of this tutorial you will be able to do the following:

  • 使用 Angular 的內建指令來顯示 / 隱藏元素,並顯示英雄資料的列表。

    Use built-in Angular directives to show and hide elements and display lists of hero data.

  • 建立 Angular 元件以顯示英雄的詳情,並顯示一個英雄陣列。

    Create Angular components to display hero details and show an array of heroes.

  • 為唯讀資料使用單向資料繫結

    Use one-way data binding for read-only data.

  • 新增可編輯欄位,使用雙向資料繫結來更新模型。

    Add editable fields to update a model with two-way data binding.

  • 把元件中的方法繫結到使用者事件上,比如按鍵和點選。

    Bind component methods to user events, like keystrokes and clicks.

  • 讓使用者可以在主列表中選擇一個英雄,然後在詳情檢視中編輯他。

    Enable users to select a hero from a master list and edit that hero in the details view.

  • 使用管道來格式化資料。

    Format data with pipes.

  • 建立共享的服務來管理這些英雄。

    Create a shared service to assemble the heroes.

  • 使用路由在不同的檢視及其元件之間導航。

    Use routing to navigate among different views and their components.

你將學到足夠的 Angular 知識,並確信 Angular 確實能提供你所需的支援。

You'll learn enough Angular to get started and gain confidence that Angular can do whatever you need it to do.


完成本課程的所有步驟之後,最終的應用會是這樣的:現場演練 / 下載範例

After completing all tutorial steps, the final app will look like this:現場演練 / 下載範例.


What you'll build


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.


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: