ionic入門教程-ionic路由詳解（state、route、resolve）(轉)

標籤：應該   字元   www   入門教程   圖關係   手機   arm   點擊   one   

http://blog.csdn.net/onil_chen/article/details/51758696?appinstall=0

今天好好的跟大家講講ionic的路由配置。

問到的朋友有點多，因為這個內容比較多，所以我一直想等我多瞭解一些再出關於路由的教程。

但是有些很簡單的也有朋友不理解，所以我就提前出了這篇教程。

希望能對大家有點協助，關於我遺漏的部分，後面再發教程補充吧。

但是基本的內容，簡單的應用，應該這篇教程裡面都會提到了。

首先我們還是從tabs類型的建立項目來學習（這個項目真的很厲害，大家可以花時間好好看看）。

我們就按照代碼的啟動流程開始看這個路由吧。

使用的ide是webstorm9.0.3

首先讓我們運行這個項目，右鍵點擊index.html，選擇用瀏覽器運行，選擇Google瀏覽器。

在開啟的Google瀏覽器中開啟開發人員工具（快速鍵F12），

然後選擇手機偵錯模式（開發人員工具欄，放大鏡旁邊那個按鈕，可能是手機樣子或者別的，版本問題，我忘記表徵圖長什麼樣子了），

選擇iphone6。然後重新整理。重新適配介面。（只是為了比較好看而已）

既然這節課是說路由，那最開始我們最先要關注的就是

http://localhost:63342/routeDemo/www/index.html#/tab/dash

為什麼會訪問這個地址呢？#tab/dash這個就是路由，但是為什麼訪問的是這個路由，又是什麼意思，怎麼定義的呢？

首先我們做一個操作，在地址欄裡面訪問http://localhost:63342/routeDemo/www/就是去掉了index.html#/tab/dash這不部分的內容。

訪問之後，你會發現，就算是只訪問http://localhost:63342/routeDemo/www/最後訪問的還是http://localhost:63342/routeDemo/www/index.html#/tab/dash

這裡有兩個知識點，一個是web的，當url訪問的是網站的某個檔案夾時，瀏覽器會自動開啟該檔案夾下的index.html檔案。

即開啟的就是上面這個代碼，代碼是按照順序從上到下解析的。跑到body的ng-app=“starter”，就是自動啟動應用的指令碼。

就會在模組池（我隨意說的，便於理解）尋找名字叫做starter的模組。是的，模組，沒有應用，你沒有看錯。

紙上得來終覺淺，絕知此事要讀源碼（read the fucking source code）

我們開啟app.js查看源碼

可以看到這裡定義了名字叫做starter的模組，前面自動啟動的就是它，後面中括弧裡面的內容，可以理解為這個模組的依賴，就是說這個模組要運行起來，是要在這三個模組運行起來的基礎上才行的，這麼說不是很嚴謹，但是新手這麼理解是可以的。

一般在項目中，會把這個模組的傳回值儲存下來，這樣在代碼中操作會比較方便。

var app = angular.module(name,[])這樣子的形式，在代碼中直接使用app就是當前這個應用了，比較方便。

恩，我們接著往下看

注意看前面的.run()可以這麼理解在app啟動並執行時候執行的內容，看內容這一塊是打包之後才有用的。所以你的項目只是一個單存的web項目，可以把這個刪除了也沒有關係。

這個.run()還可以用來引入rootscope，全域的控制器上下文，可以實現一些簡單的資料傳遞，或者通用函數的統一處理。寫法如下

.run(function($rootScope){  $rootScope.debug = true;})這樣子你在子控制器裡面引入$rootScope,就能獲得這個全域變數了，比如在是否列印log的時候可以這麼實現

$rootScope.debug && console.log("作業記錄")

這裡還要注意的是.run()是直接接在angular.module(name,[]).run()注意這是一個鏈式的寫法。有語句後面加分號編程習慣的小夥伴，可以注意一下，按照上面提到的，可以把這個拆開寫var app = angular.module(name,[]);  這是可以斷開的app.run(); 這樣子的寫法有個好處就是，這兩部分的內容可以寫到不同的檔案裡面。有些人喜歡把route這部分的內容分離，就是可以這麼實現的。

還是接著看源碼

.config()可以理解為應用啟動並執行設定檔，可以用來定義一些基礎的配置，這裡引入的是$stateProvider,用來配置路由。第二個參數其實是可以不用的。但是這裡是用來定義，當你訪問連結的時候沒有攜帶任何的路由資訊，那系統會自動訪問otherwise配置的路由。就像我們一開始訪問的地址http://localhost:63342/routeDemo/www/。瀏覽器自動幫我們補齊了地址http://localhost:63342/routeDemo/www/index.html。這是一個沒有路由資訊的地址，所以這裡配置的otherwise就會幫我們自動補上#/tab/dash。這裡就解釋了為什麼我們直接存取項目目錄，會訪問http://localhost:63342/routeDemo/www/index.html#/tab/dash。

接下來，我們來看一個詳細的路由配置。這裡有兩種情況。是否為母片（模板）.

我們看tab的這個路由，url就是路由地址，abstract：true就是指設定這個介面為母片介面，可以這麼理解，這是一個架子，所有的子介面都有這個統一的介面。

templateUrl是定義了這個路由視圖對應的介面。這裡我們還是圍繞著http://localhost:63342/routeDemo/www/index.html#/tab/dash。這個連結。我們要解釋裡面的這個tab是什麼。

這裡我們做一個有意思的嘗試，我們登出掉路由配置裡面的$urlRouterProvider.otherwise(‘/tab/dash‘)防止我們輸入錯誤路由的時候，系統自動跳轉。然後我們在瀏覽器裡面訪問http://localhost:63342/routeDemo/www/index.html#/tab只訪問到tab這一級。（注意在瀏覽器中只修改路由是不會重新載入頁面的，這也是路由的一個優點，所以要重新整理頁面之後在修改路由，這樣我們剛才修改的代碼才會有效）

然後我們會在介面上看到兩個淺淺的框框。

要仔細看，不然會以為沒有東西。我們在從控制台看一下html

注意看這個視圖是有解析的。恩，這 暫且放一邊不看，我們接著看另外一個路由配置

首先是這個路由的名字tab.dash這裡的點和js中的點一樣理解為對象的屬性，這裡表示一種從屬關係。指dash這個視圖是tab的一個子視圖。

這個路由配置和tab的路由配置有個明顯不同的地方就是多了一個views，可以簡單理解為用來定義視圖詳情。格式是views:{name:{parms}}

這裡最應該關注的就是‘tab-dash’這個視圖名字。首先要指導這個視圖名字是從哪來的，又是什麼意思？

我們開啟tabs.html檔案

可以看到在tabs地下定義的tab裡面有一個ion-nav-view 它的名字定義為‘tab-dash’這個意思就是。tab.dash這個路由定義了，這個路由的視圖是在‘tab-dash’這個tab的視圖裡面繪製的。

這個ion-nav-view我們在index.html中也有見過<ion-nav-view ></ion-nav-view>。那這裡要怎麼理解呢？

我們對代碼做一點小改動。改動tab的配置。加入views屬性。

然後給index.html中的<ion-nav-view ></ion-nav-view>加入屬性name=‘main‘。

然後運行項目，項目運行成功。給每一個視圖定義了名字之後，理解起來就容易很多了。下面我畫一個簡單的圖來說明這幾個關係。

這裡我把視圖之間畫的比較開，便於理解。但是這些視圖之間的關係，要以我下面的說明為主。

首先我們來理解系統預設的那種沒有定義views屬性的路由，它們會被預設繪製在最上層的main視圖裡面。從上往下，第一個沒有定義名字的view。

比如我們在項目中常常會有一些介面不需要下面的tab切換。所以我們可以把他們定義為不帶views屬性的，即不聲明所屬視圖的路由，他們都會被繪製在main視圖中，他們和tabs視圖是同級的關係。這個視圖是直接在主視圖中繪製的，所以圖中藍色的tabs視圖，實際上是不存在的。

tabs視圖下面有定義了很多個子視圖，根據代碼控制這些子視圖是只能同時有一個是顯示的，其他的子視圖都會被放入視圖緩衝中。所以途中紫色的視圖，應該是和tabs視圖一樣的的，但是它們是存在的。當這些視圖的大小都完全一樣的時候，那我們看起來就像只有一個視圖了。這裡我在畫一個簡化版的tabs切換的視圖關係，便於理解。

正視圖側視圖

根據上面這兩個不同角度的圖應該能夠理解tabs是怎麼做到切換的了。我們能夠看到的就是最上層的，所以在tabs母片裡面定義的tabs切換欄，在每一個子視圖裡面都有，就是這麼實現的。

所以說視圖要不要定義，要怎麼定義可以根據項目需要靈活的選擇。定義在同一個視圖地下的路由在切換的時候，會有曆史保留，可以直接使用back按鈕，進行返回操作。但是游離在子視圖，即沒有設定views的視圖，相互之間是沒有曆史的，他們之間的返回需要手動的補充功能，我覺得應該是我哪裡使用的不對。但是還沒定位出來。

看完了建立項目中定義的這幾個屬性，我們接下來來看幾個，比較常用的建立項目中沒有提到的屬性。

1、template

這個屬性和templateUrl都是用來定義視圖對應的html模板的，前者接受的是一個html的字串，後者接受的是一個檔案路徑的地址。比較好理解。

2、prefetchTemplate

預設為true。這個設定為false，表示不提前載入html，模板。這裡我們看一下建立項目的日誌

這裡我們在啟動項目的時候，走過路由配置，所有的html都會被預先載入到緩衝中。是的後面的視圖之間的切換會很流暢。

但是也有一個問題，就是啟動項目的時候，要載入過多的檔案，有些檔案還不一定有用，在很多級下面的檔案，很少使用到。

所以可以選擇，把一些不常用的視圖設定為false，這樣一開始就不會去載入它們了。

在做按需載入的時候。也可以把這個值設定為false。js檔案都按需載入了，訪問首頁只載入了一個js檔案卻載入了幾十個上百個的html檔案，這很不科學。

3、resolve:預載入
  使用預載入功能，可以預先載入一系列依賴或者資料，然後注入到控制器中。
  在路由中的resolve，能夠保證在路由到達前載入資料保證（promises）.
  預載入對象需要一個對象，這個對象的key紀要注入到控制器的依賴，這個對象的值為需要被載入的服務。
  如果傳入的是字串，路由會視圖匹配已經註冊的服務。
  如果傳入的是函數，該函數會被注入，並且該函數返回的值便是控制器的依賴之一。
  如果該函數返回一個資料保證（promise），這個資料保證將在控制器被執行個體化前被預先載入並且資料會被注入到控制器中。

這個用來實現按需載入的基礎，也有其他的模組依賴，或者前置函數的執行，都是靠它來完成的。

接下來還要講到的幾個常用事件。

1、$ionicView.enter 

在進入視圖的時候響應的事件，在控制器中使用on方法監聽觸發

2、$ionicView.leave

在離開視圖的時候響應的事件。注意如果從A介面到B介面跳轉，那麼B介面的enter會先響應，再響應A介面的leave事件

3、$stateChangeStart

在切換路由是響應的事件，可以用來判斷前置路由是什麼，控制當進入某些頁面時執行的函數，比如說進入某些頁面都要把右上方的按鈕顯示出來等等

暫時能想起來的，就這麼多，其中需要明確關注的是resolve這個屬性。後續的深入學習，對它的涉及會比較多。

這節課沒有demo，直接建立一個tabs類型的項目跟著看就可以了。

大家還有其他的問題可以通過以下方式找到我

ionic入門教程-ionic路由詳解（state、route、resolve）(轉)