Angular UI路由器-动态TemplateURL

Question

我正在建立一个带有角度UI路由器的静态HTML网站进行导航。我基本上有一个带有多个（10+）html模板（页面）的ui视图，可以加载到该视图中。我所有的模板页面都位于名为“页面”的目录中。

所以我基本上想知道我们是否可以在$
stateProvider中仅定义一个状态来动态分配多个模板url，而不是为每个HTML模板页面编写不同的状态（如下所述）。

$stateProvider
.state('home', {
    url: '/home',
    templateUrl: 'pages/home.html',
    controller: 'homeController',
    controllerAs: 'home'
})
.state('viz', {
    url: '/viz',
    templateUrl: 'pages/viz.html',
    controller: 'vizController',
    controllerAs: 'viz'
})
.state('about', {
    url: '/about',
    templateUrl: 'pages/about.html',
    controller: 'aboutController',
    controllerAs: 'about'
})....

任何帮助深表感谢。

Answer 1

那应该没有那么困难，例如检查以下内容：

基于API Ajax调用的插件的Angular UI-Router动态路由。基于子弹加载视图

我们可以使用$stateParams和templateProvider来

.state('general', {
   url: '/{type}',
   //templateUrl: 'pages/home.html',
   templateProvider: ['$stateParams', '$templateRequest',
      function($stateParams, $templateRequest) 
      {
        var tplName = "pages/" + $stateParams.type + ".html";
        return $templateRequest(tplName);
      }
    ],
    // general controller instead of home
    //controller: 'homeController',
    controller: 'generalController',
    controllerAs: 'ctrl'

我们还可以将参数限制为type期望值之一，请参阅：

url: '/{type:(?:home|viz|about)}',