Angular 英雄示例教程

英雄指南教程（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/AngularZH/Tutorial