Angular-UI Router - 如何创建动态路由

Question

我是angularjs新手，我需要的是在angularUI路由器中构建一个动态路由机制。我有三个模块，如文档、任务、仪表板，每个模块中都有各种视图。请查看我尝试过的内容并提出解决方案。

app.js

var app= angular.module('myApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home.documentTree', {
      url: '/documentTree',
      views: {
        'main' :{
          templateUrl: "app/documents/views/documentTree.html",
          controller: 'documentCtrl',
          controllerAs: 'documentCtrl'
        }
      }
    })

    .state('home.documents', {
      url: '/documents',
      views: {
        'main' :{
          templateUrl: "app/documents/views/documentList.html",
          controller: 'documentCtrl',
          controllerAs: 'documentCtrl'
        }
      }
    })

    .state('home.documentDetails', {
      url: '/documentDetails',
      views: {
        'main' :{
          templateUrl: "app/documents/views/documentDetails.html",
          controller: 'documentCtrl',
          controllerAs: 'documentCtrl'
        }
      }
    })
$urlRouterProvider.otherwise('login');

});

我的html页面片段如下：

<a ui-sref="home.documentTree">Document Tree</a>
<a ui-sref="home.documents">Document Lists</a>
<a ui-sref="home.documentDetails">Document Deatils</a>

我必须将上述三种文档路由归纳为具有动态参数的一种。

为此，我尝试了以下操作：

<a ui-sref="home.:documents.:documentTree">Document Tree</a>

.state('home.:folder.:action', {
      url: 'home/:folder/:action',
      templateUrl: ['$stateParams', function ($stateParams) {
        return '/app/'+ $stateParams.folder+'/' + $stateParams.action + '.html';
      }],
      controller: 'documentCtrl',
      controllerAs: 'documentCtrl',
    })

但似乎效果不佳。请提出您的想法。

Answer 1

终于找到答案了！

Route:
    .state('home.documents', {
          url: '/:folder/:action',
          views: {
            'main' :{
              templateUrl: function($stateParams) {
                return 'app/' + $stateParams.folder + '/views/' + $stateParams.action + '.html';
              },
              controller: 'documentCtrl',
              controllerAs: 'documentCtrl'
            }
          }
        })

Html Code :

    <a ui-sref="home.documents({folder:'documents',action:'documentTree'})">Document tree</a>

试试吧。

Angular-UI Router - 如何创建动态路由

Angular-UI Router -How to create dynamic routes

angularjs

angular-routing

angular-ui-router