Angular 英雄之旅-介紹

教程：英雄之旅

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

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

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

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

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

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

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

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

你將學到足夠的 Angular 知識，并確信 Angular 確實能提供你所需的支持。

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

你要構建出什么

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

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

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

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

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

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

下面這張圖匯總了所有可能的導航路徑。

下圖演示了本應用中的動圖。