《AngularJS深度剖析與最佳實踐》一2.8 路由

本節書摘來自華章出版社《angularjs深度剖析與最佳實踐》一書中的第2章，第2.8節，作者 雪狼 破狼 彭洪偉，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視

前端“路由”（router）的概念和後端的路由是一樣的，也就是根據url找到view-controller組合的機制。最開始的時候，angular的路由庫合并在核心庫中，現在，路由庫從angular核心庫中剝離出來。官方的路由庫稱為ngroute，由于其過于簡陋，我在工程實踐中比較常用的是一個第三方路由庫：angular-ui-router。

ngroute的寫法是：

雖然寫法不同，但是其工作原理都是類似的：

監聽$locationchangesuccess事件，它将在每次url（包括#後面的hash部分）發生變化時觸發。

在這個事件中，将根據$routeprovider/$stateprovider中注冊的路由表中的url部分查閱其路由對象，如：

從這個路由對象中，可以取到兩個關鍵參數：templateurl/controller。

建立一個scope對象。

加載模闆，借助浏覽器的能力把它解析為靜态的dom。

使用controller對scope進行初始化，添加屬性和方法。

使用$compile服務把剛才生成的dom和scope關聯起來，變成一個live dom。

用這個live dom替換ng-view/ui-view中的所有内容。

你可能還有印象，這個過程我們在前面的第1章也用過。

這個過程非常簡單。作為練習，你可以使用類似的原理來實作一個簡單的路由功能，這個過程中會接觸到很多angular核心服務，對了解angular的核心工作原理非常有用。