Angular-UI Router -Как создать динамические маршруты

Question

Я новичок в angularjs, и мне нужно построить динамический механизм маршрутизации в угловом UI-маршрутизаторе. У меня есть три модуля, такие как документы, задачи, панель мониторинга и различные представления в каждом модуле. Пожалуйста, посмотрите, что я попробовал, и предложите решение.

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> 

Просто попробуйте.