当前位置：首页 > 资讯 > 技术文档

简单讲解AngularJS的Routing路由的定义与使用

时间：2022-07-31 01:19 编辑：来源：阅读：
扫一扫，手机访问

摘要：简单讲解AngularJS的Routing路由的定义与使用

在单页面应用中，视图之间的跳转就显尤为重要的，随着应用越来越复杂，我们需要用一种方法来精确控制什么时候该呈现怎样的页面给用户。咱们可以通过在主页面中引入不同的模板来支持不同页面的切换，但是这么做的缺点就是，越来越多的内嵌代码导致最后难以管理。通过ng-include指令我们可以把很多的模板整合在视图中，但是我们有更好的方法来处理这种情况，我们可以把视图打散成layout和模板视图，然后根据用户访问的特定的URL来显示需要的视图我们可以将这些“碎片”在一个布局模板中拼接起来 AngularJS通过在$routeProvider($route服务的提供者)上声明routes来实现上面的构想使用$routeProvider，我们可以更好的利用浏览历史的API并且可以让用户可以把当前路径存成书签以方便以后的使用在我们的应用中设定路由，我们需要做两件事情：第一，我们需要指出我们存放将要存放新页面内容的布局模板在哪里。比如，如果我们想在所有页面都配上header和footer，我们可以这样设计布局模板：

<header>
 <h1>Header</h1>
</header>
<div class="content">
 <div ng-view></div>
</div>
<footer>
 <h5>Footer</h5>
</footer>

ng-view指令将高速$routeProvider在哪里渲染模板第二，我们需要配置我们的路由信息，我们将在应用中配置$routeProvider $routeProvider提供了两种方法处理路由：when和otherwise。方法when接收两个参数，第一个设置$location.path(). （直接用“//”也没有问题） [b]定义 [/b]定义路由非常容易，在我们的应用mian模块里面注入ngRoute依赖就可以了

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

现在，我们就可以给应用定义路由了。在路由模块里面的.config()方法里面注入了$routeProvider，上面的代码给我们演示了两个用于定义路由的方法。 [b]when()[/b] 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'
    })

[b]otherwise()[/b] 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: '/'
  });
})

[b]使用 [/b]定义好了路由需要怎么使用呢?我们要告诉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都始终保持不变

全部评论(0)

上一篇：详解Angular2 关于*ngFor 嵌套循环
下一篇：JavaScript动态绑定详解

资讯排行榜
更多>>