在單頁(yè)面應(yīng)用中，視圖之間的跳轉(zhuǎn)就顯尤為重要的，隨著應(yīng)用越來越復(fù)雜，我們需要用一種方法來精確控制什么時(shí)候該呈現(xiàn)怎樣的頁(yè)面給用戶。

咱們可以通過在主頁(yè)面中引入不同的模板來支持不同頁(yè)面的切換，但是這么做的缺點(diǎn)就是，越來越多的內(nèi)嵌代碼導(dǎo)致最后難以管理。

通過ng-include指令我們可以把很多的模板整合在視圖中，但是我們有更好的方法來處理這種情況，我們可以把視圖打散成layout和模板視圖，然后根據(jù)用戶訪問的特定的URL來顯示需要的視圖

我們可以將這些“碎片”在一個(gè)布局模板中拼接起來

AngularJS通過在$routeProvider($route服務(wù)的提供者)上聲明routes來實(shí)現(xiàn)上面的構(gòu)想

使用$routeProvider，我們可以更好的利用瀏覽歷史的API并且可以讓用戶可以把當(dāng)前路徑存成書簽以方便以后的使用

在我們的應(yīng)用中設(shè)定路由，我們需要做兩件事情：第一，我們需要指出我們存放將要存放新頁(yè)面內(nèi)容的布局模板在哪里。比如，如果我們想在所有頁(yè)面都配上header和footer，我們可以這樣設(shè)計(jì)布局模板：

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

ng-view指令將高速$routeProvider在哪里渲染模板

第二，我們需要配置我們的路由信息，我們將在應(yīng)用中配置$routeProvider

$routeProvider提供了兩種方法處理路由：when和otherwise。 方法when接收兩個(gè)參數(shù)，第一個(gè)設(shè)置$location.path(). （直接用“//”也沒有問題）

定義
定義路由非常容易，在我們的應(yīng)用mian模塊里面注入ngRoute依賴就可以了

angular.module('myApp', ['ngRoute'])
 .config(function($routeProvider) {});

現(xiàn)在，我們就可以給應(yīng)用定義路由了。在路由模塊里面的.config()方法里面注入了$routeProvider，上面的代碼給我們演示了兩個(gè)用于定義路由的方法。

when()

when()方法有兩個(gè)參數(shù)，我們希望匹配的瀏覽器url和路由操作對(duì)象。一般main route經(jīng)常使用“/”來表示，也可以定義URL參數(shù)，在controller里面就使用$routeParams獲取url參數(shù)。

templateUrl: 表示路由跳轉(zhuǎn)的view模板

controller: 控制器

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()

otherwise()定義了當(dāng)應(yīng)用找不到指定路由的時(shí)候跳轉(zhuǎn)的路由

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: '/'
  });
})

使用
定義好了路由需要怎么使用呢?我們要告訴angular頁(yè)面的哪一個(gè)部分是我們希望轉(zhuǎn)換的，這需要使用到ng-view指令

<div class="header">My page</div>
<div ng-view></div>
<span class="footer">A footer</span>

這樣就只有<div ng-view></div>會(huì)被更新， header/footer都始終保持不變

最新評(píng)論