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都始终保持不变