ngRoute AngularJs自帶的路由

ngRoute

$routeProvider

配置路由的時候使用。

方法：

when(path,route);

在$route服務裏添加一個新的路由。

path：該路由的路徑。

route：路由映射信息。

controller：字符串或函數，指定控制器。

controllerAs：一個用於控制器的標識符名稱。。

template：字符串或函數，html模板。

templateUrl：字符串或函數，html模板的地址。

resolve：對象，一個應該注入控制器的可選的映射依賴關係。若是任何一個依賴關係是承諾，則路由將等該承諾被解決/拒絕後才實例化控制器。

redirecTo：字符串或者函數，URL重定向。

otherwise(params);

設置在沒有其餘路由定義被匹配時，將使用的默認路由。

ngView

路由配置的頁面在HTML的view裏的顯示的視圖區域。

$route

用於在js裏對路由的操做。

依賴：$location   $routeProvider

方法：

reload();

使路由服務從新加載當前路由，即便路由沒有改變。

updateParams(newParams);

操做路由服務更新當前的URL，使用newParams裏指定的路由參數指定當前路由參數。

newParams：將URL參數名稱映射到value。

事件：

$routeChangeStart
URL路由開始變化（未跳轉成功）的時候觸發的事件。
event:合成的事件對象。
next：將跳轉的route信息。
current：當前route信息。
$routeChangeSuccess
URL路由變化成功的時候觸發的事件。
event:合成的事件對象。
current：當前route信息。
previous：上一個route信息。
$routeChangeError
URL路由變化失敗的時候觸發的事件。
event:合成的事件對象。
current：當前route信息。
previous：上一個route信息。
rejection：拒絕承諾，一般是失敗承諾的錯誤。
$routeUpdate
當承諾被拒絕時廣播。
event:合成的事件對象。
current：當前route信息。
$routeParams
$routeParams服務運行檢索當前路由的參數集。

ngRoute使用代碼：

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
      <a href="#/index/page1">page1</a> - <a href="#/index/page2">page2</a> - <a href="javascript:void(0)" ng-click="ctrl.reload()">reload</a> - <a href="lavascript:void(0)" ng-click="ctrl.update()">update</a>
      <div ng-view></div>
      <script type="text/ng-template" id="page1.tpl">
          this is page1.{{fisrtCtrl.value}}
      </script>
      <script type="text/ng-template" id="page2.tpl">
          this is page2.{{secondCtrl.value}}
      </script>
   </div>

  (function () {
      angular.module("Demo", ["ngRoute"])
      .config(["$routeProvider",routeConfig])
      .controller("testCtrl", ["$route","$scope",testCtrl])
      .controller("firstPageCtrl",firstPageCtrl)
      .controller("secondPageCtrl",secondPageCtrl);
      function routeConfig($routeProvider){
          $routeProvider.otherwise("/index/page1");
          $routeProvider
          .when("/index/page1",{
            templateUrl:"page1.tpl",
            controller:"firstPageCtrl",
            controllerAs:"fisrtCtrl"
          })
          .when("/index/page2",{
            templateUrl:"page2.tpl",
            controller:"secondPageCtrl",
            controllerAs:"secondCtrl"
          });
      };
      function testCtrl($route,$scope) {
          this.reload = function(){
              $route.reload();
          };
          this.update = function(){
              $route.updateParams({name:"beast"});
          };
          $scope.$on("$routeChangeStart",function(event,nextRoute,currentRoute){
              //event.preventDefault();  //可控制不跳轉頁面，主要在路由權限控制的時候用的多
              console.log(nextRoute,currentRoute);// 下一個路由信息和上一個路由信息
          });
      };
      function firstPageCtrl(){
          this.value = "hello world";
          console.log("this is page1");//用於證實reload
      }
      function secondPageCtrl(){
          this.value = "Hello World";
          console.log("this is page2");//用於證實reload
      }
  }());

這裏直接使用了ng-template把兩個模板寫在一個頁面，在實際使用中，能夠把兩個模板分開分別放到兩個不一樣的html文件中，而且放到一個規定的文件中，這樣可方便於管理。

相關文章：AngularJs ui-router 路由的簡單介紹