如何在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注入控制器:

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字段将加载数据并可注入到控制器中。这意味着数据将在转换到新路由之前被加载。

$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);
      }
   }
});

然后将章节注入控制器:

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

Answer 2

你考虑过UI路由提供程序吗?你可以很容易地使用statparams ..

$stateProvider
    .state('book.chapter', {
        url: "/book/chapter/:chapterId",
        templateUrl: 'book.chapter.detail.html',
        controller: function ($stateParams) {
          ....
        }
})

来源:https://github.com/angular-ui/ui-router/wiki/url-routing#url-parametershttp://angular-ui.github.io/ui-router/site//api/ui.router.state。美元stateProvider

你也可以用一种与其他答案略有不同的方式来坚持使用routeprovider。

$routeProvider.when('/Book/:chapter', {
            templateUrl : { function (dynamicUrl) {
               return '/Book/' + dynamicUrl.chapter + '.html';
            },
            controller: 'ChapterCntl'
});