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

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

今天好好的跟你們講講ionic的路由配置。

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

可是有些很簡單的也有朋友不理解，因此我就提早出了這篇教程。

但願能對你們有點幫助，關於我遺漏的部分，後面再發教程補充吧。

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

首先咱們仍是從tabs類型的新建項目來學習（這個項目真的很厲害，你們能夠花時間好好看看）。

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

使用的ide是webstorm9.0.3

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

在打開的谷歌瀏覽器中打開開發人員工具（快捷鍵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的視圖，相互之間是沒有歷史的，他們之間的返回須要手動的補充功能，我以爲應該是我哪裏使用的不對。可是還沒定位出來。

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

一、template

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

二、prefetchTemplate

默認爲true。這個設置爲false，表示不提早加載html，模板。這裏咱們看一下新建項目的日誌

這裏咱們在啓動項目的時候，走過路由配置，全部的html都會被預加載到緩存中。是的後面的視圖之間的切換會很流暢。

可是也有一個問題，就是啓動項目的時候，要加載過多的文件，有些文件還不必定有用，在不少級下面的文件，不多使用到。

因此能夠選擇，把一些不經常使用的視圖設置爲false，這樣一開始就不會去加載它們了。

在作按需加載的時候。也能夠把這個值設置爲false。js文件都按需加載了，訪問首頁只加載了一個js文件卻加載了幾十個上百個的html文件，這很不科學。

三、resolve:預載入
  使用預載入功能，能夠預先載入一系列依賴或者數據，而後注入到控制器中。
  在路由中的resolve，可以保證在路由到達前載入數據保證（promises）.
  預載入對象須要一個對象，這個對象的key紀要注入到控制器的依賴，這個對象的值爲須要被載入的服務。
  若是傳入的是字符串，路由會視圖匹配已經註冊的服務。
  若是傳入的是函數，該函數會被注入，而且該函數返回的值即是控制器的依賴之一。
  若是該函數返回一個數據保證（promise），這個數據保證將在控制器被實例化前被預先載入而且數據會被注入到控制器中。

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

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

一、$ionicView.enter 

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

二、$ionicView.leave

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

三、$stateChangeStart

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

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

這節課沒有demo，直接新建一個tabs類型的項目跟着看就能夠了。

你們還有其餘的問題能夠經過如下方式找到我