Angular路由的定义和使用

原文链接：http://www.ng-newsletter.com/advent2013/#!/day/2

一、什么是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简单优雅地实现这个功能（页面之间的控制跳转...）

二、安装

使用angular的路由功能需要安装routing模块...（引入angular-route.js就可以了）

三、定义

定义路由非常容易，在我们的应用mian模块里面注入ngRoute依赖就可以了

?

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

 

 

 

现在，我们就可以给应用定义路由了。在路由模块里面的.config()方法里面注入了$routeProvider，上面的代码给我们演示了两个用于定义路由的方法。

when()

when()方法有两个参数，我们希望匹配的浏览器url和路由操作对象。一般main route经常使用“/”来表示，也可以定义URL参数，在controller里面就使用$routeParams获取url参数。

• templateUrl: 表示路由跳转的view模板

• controller: 控制器

?

1 2 3 4 5 6 7 8 9 10 11

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()定义了当应用找不到指定路由的时候跳转的路由

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

 

四、使用

定义好了路由需要怎么使用呢?我们要告诉angular页面的哪一个部分是我们希望转换的，这需要使用到ng-view指令

?

1 2 3

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

 

 

 

这样就只有<div ng-view></div>会被更新， header/footer都始终保持不变

转载于:https://www.cnblogs.com/Eplayed/p/5435866.html