如何在角度js中进行可变路由

I have this problem & I am unable to find the solution for it. This is an example of code where I am trying to route to variable URL routing

我有这个问题，我找不到解决的办法。这是一个代码示例，我正在尝试路由到变量URL路由。

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

If I want to fix the url till /Book/chapter and 01 can be a variable. Like if user changes 02 or 03 till 100. Do I need to write the $routeProvider 100 times or can be a simple solution, where I can use the number part as a variable and write single $routeProvider to handle 01 to 100?

如果我想修改url，直到/Book/chapter, 01可以是一个变量。比如用户将02或03更改为100。我是否需要编写$routeProvider 100次，或者可以编写一个简单的解决方案，在这个解决方案中，我可以使用数字部分作为变量，并编写一个$routeProvider来处理01到100?

2 个解决方案

#1

No, you do not need to add 100 seperate route definitions. You add a variable to your url template by adding /:some_variable, and then you are to fetch that variable by using the $routeParams service.

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

Example

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

And then inject $routeParams into your controller:

然后向控制器注入$routeParams:

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

   //use the id to fetch content.
}

It does seem like you have a different html page for each chapter. If that is the case you can set a function to the template field to generate the path for the html file:

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

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

If that case is that you are fetching the data from an API through a service, it might be useful to be using the resolve field instead. The resolve field will loaded the data and be injectable into the controller. Which means that the data will be loaded before transitioning in to the new route.

如果您正在通过服务从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);
      }
   }
});

And the inject the chapter into your controller:

将这一章注入控制器

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

#2

Have you considered UI Route Provider? You could easily use stateparams..

您考虑过UI路由提供程序吗?你可以很容易地使用状态参数。

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

Sources: https://github.com/angular-ui/ui-router/wiki/url-routing#url-parameters http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider

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

You could also stick with routeprovider in a slightly different way than suggested in other answers.

与其他答案中建议的方式相比，您还可以坚持使用routeprovider。

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