02-AngularJs-路由router

AngularJS中路由總結

概述

先談談APP應用。平時我們用的app總是多頁面，如果用原生安卓或者蘋果，那當然很流暢啦。但是當我們用一般的html頁面做移動端，簡單時候我們可以用這樣的标簽去連結頁面時，速度還是可以的。

但是當我們的應用越來越多時，切換起來沒那麼流暢。又是礙于網速，頁面加載進來有點慢。但是在angular裡面，我們可以用路由進行切換。因為在angular裡面，我們使用者一般在加載這樣的應用時，會整個的緩存在手機上。我們用路由進行切換時，不用再發起HTTP請求了。體驗比原來好。

為什麼需要前端路由？

1. ajax請求無法留下曆史記錄。
2. 使用者無法直接通過url進入應用中的指定頁面（無法儲存書簽、無法分享給好友）。
3. ajax對seo是個災難（無法進行搜尋引擎優化）。

前端路由的基本原理

1. 哈希
2. html5中新的history api
3. 路由的核心是給應用定義“狀态”
4. 使用路由機制會影響到應用的整體編碼方式（需要預先定義好狀态）
5. 考慮相容性與“優雅降級”

路由的主要功能

$routeProvider服務和ng-view實作

ng-view實作原理：根據路由的切換，動态編譯html模闆

路由的結構1

angular.module('myApp', ['ngRoute'])
/*配置函數*/
.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrl'
    })
    .when('/day/:id', {
      templateUrl: 'views/day.html',
      controller: 'DayCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });
})
           

config函數是一個配置函數，在使用$routeProvider這樣的一個服務。

when：代表當你通路“/”根目錄的時候，去通路templeteUrl中的那個模闆

Controller：應用于根目錄這個模闆時的controller

otherwise：當路徑通路錯誤，找不到，預設跳轉到這個頁面。

路由的結構2(ui-router)

angular.module('app',[ui.router])
/*配置函數*/
.config(function($interpolateProvider,$stateProvider,$urlRouterProvider)){
    $interpolateProvider.startSymbol('[:');
    $interpolateProvider.startSymbol(':]');    
    /*配置路由*/
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home',{
        url:'/home',
        templeteUrl:'home.tpl'
    })
    /*當通路“/”根目錄的時候，去通路templeteUrl中的那個模闆*/
    .state('login',{
        url:'/login',
        templeteUrl:'login.tpl'
    })  
}
           

路由在html中的使用

方式1：引入單個

<header><h1>Header</h1></header>
<div class="content">
    <div ng-view="home.tpl"></div>
</div>
<footer><h5>Footer</h5></footer
           

方式2：路由切換

<div class=page>
    <div ng-view="home.tpl"></div>
</div>
<div class="tab">
    <a ui-sref="home">首頁</a>
    <a ui-sref="login">登入</a>
</div>
           

注：可如下方式在html頁面中，建立templeteUrl模闆

<script type="text/ng-template" id="login.tpl">
    <div ng-controller="LoginController"></div>
</script>
           

<div ng-view></div>

這裡面呢。就是我們注入的某個模闆（template） 例如：

<div ng-view="tpl/abc.html”></div>

就相當于注入叫做abc.html的模闆。ng-view這個指令優先級是1000的終極指令。就是說權限很高。

　　在注入這個abc.html的模闆的時候。我們一般都用了路由設定，路由相當于一個遙控器。這個ng-view就是一部電視機。如果某個模闆同目前的路由相關聯：

1 建立一個新的作用域；(用路由（遙控器）打開某個電視台)

2 移除上一個視圖，同時上一個作用域也會被清除；（換台，什麼都沒了）

3 将新的作用域同目前模闆關聯在一起；（電視機播放新的電視台）

4 如果路由中有相關的定義，那麼就把對應的控制器同目前作用域關聯起來；

5 觸發$viewContentLoaded事件；

6 如果提供了onload屬性，調用該屬性所指定的函數。

$location 服務

AngularJS提供了一個服務用以解析位址欄中的URL，并讓你可以通路應用目前路徑所對應的路由。它同樣提供了修改路徑和處理各種形式導航的能力。我們一般比較常用的：

1.path()

　path() 用來擷取頁面目前的路徑：

　

$location.path();

// 傳回目前路徑

　修改目前路徑并跳轉到應用中的另一個URL：

　

$location.path('/');

// 把路徑修改為 ‘/’ 路由

2.replace()

如果你希望跳轉後使用者不能點選後退按鈕（對于登入之後的跳轉這種發生在某個跳轉之後的

再次跳轉很有用）， AngularJS提供了replace() 方法來實作這個功能：

$location.path('/home');
           

// 或者

$location.path('/home').replace();