Angular 英雄之旅-介紹

教程：英雄之旅

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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