教程：英雄之旅

快速上手 - STACKBLITZ
在本教程中，你將從頭開始構(gòu)建自己的應(yīng)用，體驗(yàn)典型的開發(fā)過程。這里還有一些對基本的應(yīng)用設(shè)計(jì)概念、工具和術(shù)語的介紹。

如果你對 Angular 還不熟悉，你可能要先試一試 快速上手應(yīng)用。它基于一個現(xiàn)成的、已部分完成的項(xiàng)目，你可以在 StacBlitz 的交互式開發(fā)環(huán)境中檢查和修改，你還可以在那里實(shí)時查看結(jié)果。

“試一試”教程遵循最新的最佳實(shí)踐，以簡明的格式，涵蓋了與其相同的主要話題 - 組件、模板語法、路由、服務(wù)，以及通過 HTTP 訪問數(shù)據(jù)。

這個“英雄之旅”教程向你展示了如何使用 Angular CLI 工具搭建本地開發(fā)環(huán)境并開發(fā)應(yīng)用，還對 Angular CLI 工具 的基礎(chǔ)知識進(jìn)行了介紹。

你建立的英雄之旅應(yīng)用可以幫助人力資源管理局管理好自己的英雄。該應(yīng)用具有許多在任何數(shù)據(jù)驅(qū)動的應(yīng)用中都可能出現(xiàn)的功能。完成后的應(yīng)用會獲取并顯示一些英雄列表、編輯所選英雄的詳細(xì)信息，并在不同的英雄數(shù)據(jù)視圖之間導(dǎo)航。

你會在這份 Angular 文檔中用到的很多個例子中找到對此應(yīng)用領(lǐng)域的引用和擴(kuò)展，但是你并不一定非要通過這個教程來理解這些例子。

在本教程的最后，你將完成下列工作：

• 使用 Angular 的內(nèi)置指令來顯示 / 隱藏元素，并顯示英雄數(shù)據(jù)的列表
• 創(chuàng)建 Angular 組件以顯示英雄的詳情，并顯示一個英雄數(shù)組
• 為只讀數(shù)據(jù)使用單向數(shù)據(jù)綁定
• 添加可編輯字段，使用雙向數(shù)據(jù)綁定來更新模型
• 把組件中的方法綁定到用戶事件上，比如按鍵和點(diǎn)擊
• 讓用戶可以在主列表中選擇一個英雄，然后在詳情視圖中編輯他
• 使用管道來格式化數(shù)據(jù)
• 創(chuàng)建共享的服務(wù)來管理這些英雄
• 使用路由在不同的視圖及其組件之間導(dǎo)航

你將學(xué)到足夠的 Angular 知識，并確信 Angular 確實(shí)能提供你所需的支持。

最終解
完成本教程的所有步驟之后，最終的應(yīng)用會是這樣的：現(xiàn)場演練 / 下載范例。

你要構(gòu)建出什么

下面是本教程關(guān)于界面的構(gòu)想：開始是“Dashboard（儀表盤）”視圖，來展示最勇敢的英雄。

儀表盤頂部中有兩個鏈接：“Dashboard（儀表盤）”和“Heroes（英雄列表）”。你將點(diǎn)擊它們在“儀表盤”和“英雄列表”視圖之間導(dǎo)航。

當(dāng)你點(diǎn)擊儀表盤上名叫“Magneta”的英雄時，路由會打開英雄詳情頁，在這里，你可以修改英雄的名字。

點(diǎn)擊“Back（后退）”按鈕將返回到“Dashboard（儀表盤）”。頂部的鏈接可以把你帶到任何一個主視圖。如果你點(diǎn)擊“Heroes（英雄列表）”鏈接，應(yīng)用將把你帶到“英雄”列表主視圖。

當(dāng)你點(diǎn)擊另一位英雄時，一個只讀的“微型詳情視圖”會顯示在列表下方，以體現(xiàn)你的選擇。

你可以點(diǎn)擊“View Details（查看詳情）”按鈕進(jìn)入所選英雄的編輯視圖。

下面這張圖匯總了所有可能的導(dǎo)航路徑。

下圖演示了本應(yīng)用中的動圖。