一、ui.router 路由模組，
1、提供$stateProvider物件，
（1）用$stateProvider.state(stateNameString, stateConfigObject)配置路由。
（2）用template去替換<ui-view></ui-view>或<div ui-view></div>。
（3）stateConfigObject包含以下內容：
（3-1）template： string/function，html模板字串，或者一個返回html模板字串的函式。
（3-2）templateUrl：string/function，模板路徑的字串，或者返回模板路徑字串的函式。
（
 
3-3）templateProvider：function，返回html模板字串或模板路徑的服務。
（3-4）controller：string/function，新註冊一個控制器函式或者一個已註冊的控制器的名稱字串。
（3-5）controllerProvider：function，返回控制器或者控制器名稱的服務
（3-6）controllerAs：string，控制器別名。
（3-7）parent：string/object，手動指定該狀態的父級。
（3-8）resolve：object，將會被注入controller去執行的函式，<string,function>形式。
（3-9
 
）url：string，當前狀態的對應url。
（3-10）views：object，檢視展示的配置。<string,object>形式。
（3-11）abstract：boolean，一個永遠不會被啟用的抽象的狀態，但可以給其子級提供特性的繼承。預設是true。
（3-12）onEnter：function，當進入一個狀態後的回撥函式。
（3-13）onExit：function，當退出一個狀態後的回撥函式。
（3-14）reloadOnSearch：boolean，如果為false，那麼當一個search/query引數改變時不會觸發相同的狀態，用於當你修改$location.search()的時候不想重新載入頁面。預設為true。
（
 
3-15）data：object，任意物件資料，用於自定義配置。繼承父級狀態的data屬性。換句話說，通過原型繼承可以達到新增一個data資料從而整個樹結構都能獲取到。
（3-16）params：url裡的引數值，通過它可以實現頁面間的引數傳遞。params:{params1:null,params2:null...}
2、提供$urlRouterProvider物件，
（1）用$urlRouterProvider.when(url,otherUrl/handler)配置匹配的前端路由，
（2）用$urlRouterProvider.otherwise('/login')配置不匹配的前端路由。

二、ui.router實際執行步驟：
$stateParams.params;
$state.go('page',{ thisParams: '123'})
1、定義路由狀態；
$stateProvider
  .state('page2', {
    url: '/event-safe/:thisParams',
    params: {
      thisParams: null//前端可以根據thisParams的取值不同，進行不同的處理，與上面的:thisParams二選一使用
    },
    templateUrl: 'event/event-safe.html',
    controller: 'eventSafeCtrl',
  })
2、啟用路由的方式
（1）$state.go()：優先順序最高的啟用方式
（2）ui-sref：點選包含此指令跳轉，例如<a ui-sref="page2({type:1})"></a>
（3）ng-href：<a ng-href="#/page2/1"></a>
3、ui.router路由巢狀：通過 .語法進行路由層級配置
程式碼示例一：
/* index.html */
<a ui-sref="about">About</a>
<a ui-sref="home">Home</a>
<div ui-view></div>
/* home.html */
<a ui-sref=".list">List</a>
<a ui-sref=".graph">Paragraph</a>
<div ui-view></div>
$stateProvider
  .state("about", {
    url: "/about",
    templateUrl: "about.html",
  })
  .state("home", {
    url: "/home",
    templateUrl: "home.html",
  })
  .state("home.list", {
    url: "/list",
    templateUrl: "home-list.html",
    controller: function ($scope) {
      $scope.dogs = ["Bernese", "Husky", "Goldendoodle"];
    },
  })
  .state("home.graph", {
    url: "/graph",
    template: "I could sure use a drink right now.",
  });
程式碼示例二：
<div>
  <div ui-view="filters"></div>
  <div ui-view="mailbox"></div>
  <div ui-view="priority"></div>
</div>
$stateProvider
  .state('inbox', {
    views: {
      'filters': {
        template: '<h4>Filter inbox</h4>',
        controller: function($scope) {}
      },
      'mailbox': {
        templateUrl: 'partials/mailbox.html'
      },
      'priority': {
        template: '<h4>Priority inbox</h4>',
        resolve: {
          facebook: function() {
            return FB.messages();
          }
        }
      }
    }
  }); 
附1：ngRoute模組提供$routeProvider服務
1、$routeProvider.when('/bookDetail/:bookId',{}).when()
2、<a class="btn btn-default" href="#/bookDetail/{{book.id}}">//實參
3、var bookId = $routeParams.bookId;//獲取實參
附2：ui.router和ngRoute的區別
1、ui.router模組提供$urlRouterProvider、$stateProvider、$stateParams服務
2、ngRoute模組提供$routeProvider、$routeParams服務