AngularJS 路由：ng-route 與 ui-router

阿新 • • 發佈：2019-01-11

AngularJS的ng-route模組為控制器和檢視提供了[Deep-Linking]URL。通俗來講，ng-route模組中的$routeService監測$location.url()的變化，並將它對映到預先定義的控制器。也就是在客戶端進行URL的路由。下面首先給出$route的使用示例，然後引入一個更加強大的客戶端路由框架ui-router。

Angular 路由

在APP中定義多個頁面的控制器，並給出對應的模板。然後$routeProvider進行配置，即可將URL對映到這些控制器和檢視。首先定義一個基本的Angular APP，並引入ngRoute：

Angular$route

Service在ngRoute模組裡。需要引入它對應的javascript檔案，並在我們的APP裡ngRoute新增為模組依賴（如何新增模組依賴？）。

var app = angular.module('ngRouteExample', ['ngRoute'])
    .controller('MainController', function($scope) {
    })
    .config(function($routeProvider, $locationProvider) {
      $routeProvider
          .when('/users', {
              templateUrl 
: 'user-list.html',
              controller: 'UserListCtrl'
          })
          .when('/users/:username', {
              templateUrl: 'user.html',
              controller: 'UserCtrl'
          });

        // configure html5
        $locationProvider.html5Mode(true);
    });

上述程式碼中，$routeProvider

定義了兩個URL的對映：/users使用user-list.html作為模板，UserListCtrl作為控制器；/users/:username則會匹配類似/users/alice之類的URL，稍後你會看到如何獲得:username匹配到的值。先看首頁的模板：

HTML5Mode：伺服器端路由和客戶端路由的URL以#分隔。例如/foo/bar#/users/alice，Angular通過操作錨點來進行路由。然而html5Mode(true)將會去除#，URL變成/foo/bar/users/alice（這需要瀏覽器支援HTML5的，因為此時Angular通過pushState來進行路由）。此時伺服器對所有的客戶端路由的URL都需要返回首頁（/foo/bar）檢視，再交給Angular路由到/foo/bar/users/alice對應的檢視。

<div ng-controller="MainController">
  Choose:
  <a href="users">user list</a> |
  <a href="users/alice">user: alice</a>

  <div ng-view></div>
</div>

注意到模板檔案中有一個div[ng-view]，子頁面將會載入到這裡。

路由引數

接著我們定義上述路由配置的子頁面控制器和檢視模板。使用者列表頁面：

app.controller('UserListCtrl', function($scope) {});

<!--user-list.html-->
<h1>User List Page</h1>

使用者頁面：

app.controller('UserCtrl', function($scope, $routeParams) {
    $scope.params = $routeParams;
});

<!--user.html-->
<h1>User Page</h1>
<span ng-bind="params.userName"></span>

我們點選首頁的/users/alice時，將會載入user.html，span的值為alice。$routeParams提供了當前的路由引數，例如：

// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}

UI-Router

檢視不能巢狀。這意味著$scope會發生不必要的重新載入。這也是我們在Onboard中引入ui-route的原因。
同一URL下不支援多個檢視。這一需求也是常見的：我們希望導航欄用一個檢視（和相應的控制器）、內容部分用另一個檢視（和相應的控制器）。

UI-Router提出了$state的概念。一個$state是一個當前導航和UI的狀態，每個$state需要繫結一個URL Pattern。在控制器和模板中，通過改變$state來進行URL的跳轉和路由。這是一個簡單的例子：

<!-- in index.html -->
<body ng-controller="MainCtrl">
<section ui-view></section>
</body>

// in app-states.js
$stateProvider
    .state('contacts', {
        url: '/contacts',
        template: 'contacts.html',
        controller: 'ContactCtrl'
    })
    .state('contacts.detail', {
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
            // If we got here from a url of /contacts/42
            $stateParams.contactId === "42";
        }
    });

當訪問/contacts時，contacts $state被啟用，載入對應的控制器和檢視。在ui-router時，通常使用$state來完成頁面跳轉，而不是直接操作URL。例如，在指令碼使用$state.go：

$state.go('contacts');  // 指定state名，相當於跳轉到 /contacts
$state.go('contacts.detail', {contactId: 42});  // 相當於跳轉到 /contacts/42

在模板中使用ui-sref（這是一個Directive）：

<a ui-sref="contacts">Contacts</a>
<a ui-sref="contacts.detail({contactId: 42})">Contact 42</a>

巢狀檢視

不同於Angular原生的ng-route，ui-router的檢視可以巢狀，檢視巢狀通常對應著$state的巢狀。 contacts.detail是contacts的子$state，contacts.detail.html也將作為contacts.html的子頁面：

<!-- contacts.html -->
<h1>My Contacts</h1>
<div ui-view></div>

<!-- contacts.detail.html -->
<span ng-bind='contactId'></span>

上述ui-view的用法和ng-view看起來很相似，但不同的是ui-view可以配合$state進行任意層級的巢狀，即contacts.detail.html中仍然可以包含一個ui-view，它的$state可能是contacts.detail.hobbies。

命名檢視

在ui-router中，一個$state下可以有多個檢視，它們有各自的模板和控制器。這一點也是ng-route所沒有的，給了前端路由極大的靈活性。來看例子：

<!-- index.html -->
<body>
  <div ui-view="filters"></div>
  <div ui-view="tabledata"></div>
  <div ui-view="graph"></div>
</body>

這一個模板包含了三個命名的ui-view，可以給它們分別設定模板和控制器：

$stateProvider
  .state('report',{
    views: {
      'filters': {
        templateUrl: 'report-filters.html',
        controller: function($scope){ ... controller stuff just for filters view ... }
      },
      'tabledata': {
        templateUrl: 'report-table.html',
        controller: function($scope){ ... controller stuff just for tabledata view ... }
      },
      'graph': {
        templateUrl: 'report-graph.html',
        controller: function($scope){ ... controller stuff just for graph view ... }
      }
    }
  })

AngularJS 路由：ng-route 與 ui-router

Angular 路由

路由引數

UI-Router

巢狀檢視

命名檢視

AngularJS 路由：ng-route 與 ui-router

AngularJS路由巢狀，通過ui-route實現深層路由

團隊任務2：原型設計與UI設計

團隊任務2：原型設計與UI設計1

vue——this.$route 與 this.$router

第3篇：angularJS使用ui-router的巢狀路由配置

第26篇：AngularJS+ui-router實現一個超簡單的登陸和跳轉的二級路由demo

AngularJS進階一深入理解ANGULARUI路由 UI-ROUTER

AngularJS路由之ui-router（二）

AngularJS路由之ui-router（三）

AngularJs之ui.router路由基本配置及傳參方法

AngularJs ui-router 路由的簡單介紹

AngularJS ui-router (巢狀路由)

AngularJS學習筆記--002--Angular JS路由外掛ui.router原始碼解析

Angular路由：ui-router

AngularJS路由之ui-router（一）

第4篇：ui-router 切換路由後頁面不回到頂部的解決辦法

AngularJS路由之ui-router（四）$state.go頁面跳轉

AngularJS學習之 ui router

遊戲UI框架設計(五)：配置管理與應用

AngularJS 路由：ng-route 與 ui-router

Angular 路由

路由引數

UI-Router

巢狀檢視

命名檢視

相關推薦