Angular UI路由器 - 动态TemplateURL

Question

我正在构建一个带有角度UI路由器的静态HTML网站,用于导航.我基本上有一个带有多个(10+)html模板(页面)的ui-view加载到该视图中.我的所有模板页面都在一个名为"pages"的目录中.

所以我基本上想知道我们是否只能在$ stateProvider中定义一个状态来动态分配多个模板网址,而不是为每个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调用的slug的Angular UI-Router动态路由.基于slug加载视图

我们可以使用$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添加默认参数

还有一个非常类似的Q&A与工作的plunker和更多细节:

AngularJS ui-router - 两个相同的路由组

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

• 尝试基于常量在控制器中动态设置templateUrl
• Angular UI-router和使用动态模板