AngularJS的UI-Router練習

今天要來練習AngularJS很多人使用的外掛，UI-Router，UI-Router以各種不同的 State (狀態) 來管理AngularJS的路由，擴充了AngularJS原生路由的使用功能 (只單純以Url來組織路由)，所以網站是以一個State到另一個State的方式去設計。

以下是今天演示的需求：

1. 設計三個State， home、heroPanel、heroDetail，
   home為首頁，heroPanel顯示英雄(hero)的 id 和 name 的列表，點列表的某一個 hero 會進到heroDetail，顯示 Detail 頁面。
2. 頁面結構分成三個區塊，header、body和footer，三者的內容皆會跟據State而有所改變。

成品就像下面影片這樣：

首先先來看一下設計的檔案結構：

index.html為主要頁面，且此例也只有一個頁面，並在同一頁中利用UI-Router切換內容。

因為這邊我用npm的方式下載安裝AngularJS和UI-Router，所以有package.json，AngularJS和UI-Router都裝在node_modules裡，當然自己去官網下載也OK。

app資料夾下的為主要JS程式，第一層以app開頭的JS為主要AngularJS Module及其相關設訂，代表著 "home" 的狀態。

其他的資料夾， heroPanel 和 heroDetail 代表 heroPanel 和 heroDetail 兩個狀態，為ui-view是body時的內容設定。

common  資料夾下放著跟 footer 和 header 兩個 ui-view相關的設定

main.css 為 header、 body、footer 標上外框以利識別，也為 class="active" 的元素標上底色以利識別現在狀態。

接下來來看各檔案裡的程式內容