Angular 路由

路由：根據地址欄裏面的url不一樣，展示不一樣的視圖。做用爲分發，路由自己沒法解答問題，它會告訴你該找誰去解決問題。

#是錨點，防止向服務器端發送請求，angular進行攔截。對#/後面的東西去和內部$routeProvider的模板去進行匹配，不一樣的視圖交給不一樣的控制器去處理

angular 路由是單獨提供的功能模塊ngRoute,也是一個單獨發行的.js文件，使用路由的時候，須要手動去導入angular-route.js文件。使用這個文件的緣由是angular自己進行深層次的路由很麻煩，爲了簡化開發，因而就誕生出了route.js專門用來作路由的js文件

 

 

API一共有兩個方法：

1.when( ) : 用於跳轉指定的頁面，用法在文章下面描述

2.otherwise( ) ： 不知足這些路由狀況跳轉的頁面（index）

 

用angular的路由實現這個的佈局是很繁瑣的，因此咱們須要使用ui-router 來實現深層次的路由嵌套。

直接上項目代碼

項目結構：

angular.js ：是gular提供的js文件

angular-route.js ：是路由使用的文件，必定要引入進項目

 

index.html頁面內容

 

hello.index頁面內容

 

bookList.html頁面內容

 

app.js文件  ： 整個項目的配置文件

templateUrl： 跳轉的頁面

controller：跳轉的頁面所使用的控制器

一個頁面要單獨寫一個控制器

 

效果爲： 在url上手動切換錨點處關聯字母，能夠看到頁面無縫隙的進行了跳轉

若是不少人開發同一個項目，該如何合併呢？？

答：每一個人定義一個模塊，讓後整合到一塊兒。bookStoreApp爲主啓動模塊，[ ] 內部爲依賴模塊，把全部關聯的模塊都寫進[ ]內，這樣共同完成一個網站的開發。

 

route路由的缺點爲：會產生一個http請求，會把路由到的頁面請求回來。若是想避免這種狀況，就使用下面的方案

 

注：本文做者不是大漠窮秋，是參考了大漠窮秋的視頻講解而後寫出的demo。