摘要:[MAN鐵人賽]Day 06:AngularJS - Routing
A -> AngularJS - Routing
前言
上一篇我們知道了如何透過Controller在同一頁做不同區塊的控制，今天我們則是要來學習如何透過Routing的方式控制url來切換頁面顯示。
Routing
在開始前我們必須在認清一件事情，MAN的架構在前端開發上是一個Single Page Application的應用，簡單來講就是只有一個HTML的頁面。而這邊會在下一章再回來說明SPA中的Routing。
在實務上一定會有遇到換頁的需求，例如：輸入帳號密碼後驗證使用者資料，如果通過就切換頁面倒使用者的登入頁面，而像這樣一個簡單地例子我們就需要透過Rouing的方式來幫我們處理而這邊要介紹的就是$routeProvider。
這邊要稍微注意一下，Routing實際上的url會是你現在頁面url後再加上#字號區隔，如下：
- /test.html#pag1
本機端test.html下面AngularJS的page1的路由設定對應
- http://test.com/test.html#pag2
公開網路位置端http://test.com/test.html下面AngularJS的page1的路由設定對應
而在使用$routeProvider時記得先在HTML頁面加上ngView，如下
<body ng-app="app">
<!--切換內容的地方-->
<div id="views" ng-view></div>
<!--其他內容
...
-->
</div>
簡單的範例如下：
看到了嗎！透過簡單的設定你就可以更換內容摟～～
我們來看一下切換到其他頁面後的原始碼可以發現其實他會把頁面內的資料都載入到原網頁中，如下：
這邊可以看到其實你子頁面內的html只要放你要顯示的區塊就好。
RESTful
RESTful是使用了REST概念來建立一整組的命名路由，而REST主要有兩個核心精神：
- 使用Resource來當做識別的資源，也就是使用一個URL網址來代表一個Resource
- 同一個Resource則可以有不同的Representations格式變化。
關於REST與RESTful的說明，而根據Restful的精神，我們將Routing的規則，出自它對應了HTTP動詞POST、GET、PUT、DELETE到資料的新增、讀取、更新、刪除等四項操作。一旦將HTTP動詞考慮進來，如此我們就將原本的路由透過下面的格式來做功能的對應
- /item/create
- /item/show/1
- /item/update/1
- /item/delete/1
範例
結合上面兩個說明我們來實作一個支援RESTful概念的Routing吧
如果對Dynamic Routing有興趣請參考這個範例與實作解說此
結語
透過Routing的方式我們可以在不同頁面切換，但這樣的使用方法可能在實務上會有點麻煩跟累贅，下一張會在額外介紹一個AngularJS的plug-in讓整個Routing變得更加方便與好用。
另外，有讀者再問MAN這個架構有沒實際的書本可以學習？ 因為這名詞是我發明的XD，所以還沒有這樣的實戰書籍，不過這就是一個Single page application 的完整應用，在這一系列的教學後，最後幾天我會用一個實際的案例來帶大家建立應用網站並將該網站轉換成跨平的app在iOS與android甚至windows phone上面運行，希望這樣的系列文章能幫大家瞭解與學習，如果對三個技術的各部分有更進階的問題，這部分市面上倒是有不少單一技術的書籍了，歡迎大家也把心得跟小弟交流一下摟，Day-7 over!
