英雄指南教程（Tour of Heroes）涵蓋了 Angular 的基本知識。

在本教程中，你將構建一個應用，來幫助人事代理機構來管理一群英雄。

這個入門級 app 包含很多資料驅動的應用所需的特性。 它需要獲取並顯示英雄的列表、編輯所選英雄的詳情，並且在包含有英雄資料的不同檢視之間進行導航。

在本教程的最後，你的應用可以做下面的工作：

• 使用Angular 的內建指令（Angular directives）來顯示 / 隱藏元素，並顯示英雄資料的列表。
• 建立 Angular 元件（Angular components）以顯示英雄的詳情，並顯示一個英雄陣列。
• 為只讀資料使用單向資料繫結。
• 新增可編輯欄位，使用雙向資料繫結來更新模型。
• 為使用者事件繫結元件方法（component methods），比如相應使用者鍵盤輸入和點選。
• 讓使用者可以在主列表中選擇一個英雄，然後在詳情檢視中編輯他。
• 使用管道來格式化資料。
• 建立共享的服務來管理這些英雄。
• 使用路由在不同的檢視及其元件之間導航。

你將學到足夠的 Angular 知識和足夠的信心來讓 Angular 提供你所需的支援。

完成本教程的所有步驟之後，最終的應用會是這樣的：live example / download example。

你將要構建什麼

下面是本教程有關介面的構想：本應用開始介面為"Dashboard（主面板）"檢視，在這個檢視中顯示最勇敢的英雄。

你可以單擊主面板上的兩個連結（"Dashboard" 和 "Heroes"）來在主面板檢視和英雄檢視之間進行導航。

如果你在主面板中單擊英雄名稱 "Magneta" 時，路由將會開啟 "Hero Details（英雄詳細）"頁面。在這個頁面中，你可以對英雄的名字進行修改。

單擊 "Back（返回按鈕）"，應用將會讓你返回到 Dashboard（主面板）頁面中。頂部的連結能夠讓你在任何時候都能夠返回到主頁面。如果你單擊  "Heroes（英雄列表）"，引用將會將英雄以列表顯示。

當你單擊不同英雄的名字的時候，一個只讀的“微型詳情檢視”會在列表的下方顯示，以體現你的選擇。

你可以點選 “View Details（檢視詳情）” 按鈕進入所選英雄的編輯檢視。

下面這張圖彙總了所有可能的導航選項。

下面是本應用的動態展示：

https://www.cwiki.us/display/A