角UI路由器 - 动态TemplateURL [英] Angular UI Router - Dynamic TemplateURL

问题描述

我建立一个静态的HTML网站，导航角UI路由器。我基本上有一个用户界面视图具有多个（10+）HTML模板（页）加载到这一观点。我所有的模板页面在一个目录中称为页。

I am building a static HTML website with angular UI router for navigation. I basically have one ui-view with multiple (10+) html templates (pages) to load into that view. All my template pages are in a directory called 'pages'.

所以我基本上想知道，如果我们能够在$ stateProvider定义只是一个状态来分配多个模板，动态的URL，而不是针对每个HTML模板页面写不同的状态（如下面所述）。

So i basically want to know if we can define just one state in the $stateProvider to assign multiple template urls dynamically instead of writing different states for each HTML template page (like mentioned below).

$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'
})....

任何帮助很多AP preciated。

Any help is much appreciated.

推荐答案

这应该不是什么难事，检查此例如：

That should not be so difficult, check for example this:

我们可以用$ stateParams和 templateProvider 到

We can use $stateParams and templateProvider to

.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'

我们也可以限制参数键入来只是预期值之一，请参见：

We can also restrict the parameter type to be just one of the expected values, see:

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

角JS - 路由的UI添加默认parmeter

有也很类似Q＆安培;带工作plunker和更多的细节：

Angular js - route-ui add default parmeter

There is also very similar Q & A with working plunker and more details:

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

Another examples could be found here:

• 试图动态设置控制器templateUrl基础上不断


• 角UI路由器，并使用动态模板

• Trying to Dynamically set a templateUrl in controller based on constant
• Angular UI-router and using dynamic templates

这篇关于角UI路由器 - 动态TemplateURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！