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 路由的简单介绍   

posted @ 2015-12-03 21:01  野兽'  阅读(...)  评论(...编辑  收藏