javascript - 如何在angular js中进行变量路由

Question

我遇到了这个问题，但我找不到解决方案。这是我尝试路由到可变 URL 路由的代码示例

$routeProvider.when('/Book', {
    template: 'examples/book.html',
    controller: BookCntl,
});
$routeProvider.when('/Book/chapter01', {
    template: 'examples/chapter01.html',
    controller: ChapterCntl,
});

如果我想固定 url 到 /Book/chapter 和 01 可以是一个变量。就像用户将 02 或 03 更改为 100 一样。我是否需要将 $routeProvider 编写 100 次，或者可以是一个简单的解决方案，我可以将数字部分用作变量并编写单个 $routeProvider 来处理 01 到 100？

Answer 1

不，您不需要添加 100 个单独的路由定义。您通过添加 /:some_variable 将变量添加到您的 url 模板，然后您将使用 $routeParams 服务获取该变量。

例子

$routeProvider.when('/Book/chapter/:chapterid', {
   templateUrl: 'examples/chapter-view.html',
   controller: ChapterCntl,
});

然后将 $routeParams 注入(inject)到您的 Controller 中:

function ChapterCntl($routeParams) {
   var chapterId = $routeParams.chapterid;

   //use the id to fetch content.
}

似乎每一章都有不同的 html 页面。如果是这种情况，您可以为 template 字段设置一个函数来生成 html 文件的路径:

$routeProvider.when('/Book/chapter/:chapterid', {
   template: function(routeParams) {
      var id = routeParams.id;
      return 'examples/chapter'+id+'.html';
   },
   controller: ChapterCntl,
});

如果这种情况是您通过服务从 API 获取数据，那么使用 resolve 字段可能会很有用。 resolve 字段将加载数据并可注入(inject)到 Controller 中。这意味着数据将在转换到新路由之前加载。

$routeProvider.when('/Book/chapter/:chapterid', {
   templateUrl: 'examples/chapter-view.html',
   controller: ChapterCntl,

   //Will run the below function before transitioning into new route.
   resolve: {
      chapter: function($routeParams, chaptersDataService) {
         var id = $routeParams.chapterid;
         return chaptersDataService.getChapter(id);
      }
   }
});

然后将章节注入(inject)您的 Controller :

function ChapterCntl($scope, chapter) {
    $scope.chapter = chapter; 
    console.log( chapter );
}