Angular UI 路由器 - 动态模板 URL

Question

我正在构建一个静态 HTML 网站，其中包含 angular UI 导航路由器。我基本上有一个 ui-view，其中包含多个 (10+) html 模板（页面）以加载到该视图中。我所有的模板页面都在一个名为 'pages'.

的目录中

所以我基本上想知道我们是否可以在 $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

这应该不难，例如检查这个：

我们可以用$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)}',

Angular js - route-ui add default parmeter

还有与 working plunker 非常相似的问答和更多详细信息：

可以在这里找到另一个例子：

Angular UI-router and using dynamic templates

Angular UI 路由器 - 动态模板 URL

Angular UI Router - Dynamic TemplateURL

state

angularjs

angular-ui-router

Angular js - route-ui add default parmeter