Angular路由的定義和使用

1、什麼是routing（路由）

Almost all non-trivial, non-demo Single Page App (SPA) require multiple pages. A settings page is different from a dashboard view. The login page is different from an accounts page（設置頁面不一樣於控制頁面，登陸頁面不一樣於帳號信息頁面。。。。就是說一個應用不少功能不一樣的頁面）

咱們可使用Angular簡單優雅地實現這個功能（頁面之間的控制跳轉...）

2、安裝

使用angular的路由功能須要安裝routing模塊...（引入angular-route.js就能夠了）

3、定義

定義路由很是容易，在咱們的應用mian模塊裏面注入ngRoute依賴就能夠了

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

如今，咱們就能夠給應用定義路由了。在路由模塊裏面的.config()方法裏面注入了$routeProvider，上面的代碼給咱們演示了兩個用於定義路由的方法。

when()

when()方法有兩個參數，咱們但願匹配的瀏覽器url和路由操做對象。通常main route常常使用「/」來表示，也能夠定義URL參數，在controller裏面就使用$routeParams獲取url參數。

• templateUrl: 表示路由跳轉的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()定義了當應用找不到指定路由的時候跳轉的路由

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

4、使用

定義好了路由須要怎麼使用呢?咱們要告訴angular頁面的哪個部分是咱們但願轉換的，這須要使用到ng-view指令

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

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