Angular UI 路由器 - 动态 TemplateURL [英] Angular UI Router - Dynamic TemplateURL
问题描述
我正在构建一个带有用于导航的角度 UI 路由器的静态 HTML 网站.我基本上有一个 ui 视图，其中包含多个 (10+) html 模板(页面)以加载到该视图中.我所有的模板页面都在一个名为pages"的目录中.
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'
})....
非常感谢任何帮助.
推荐答案
那应该没那么难，看看这个:
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'
我们还可以将参数 type 限制为预期值之一，请参阅:
We can also restrict the parameter type to be just one of the expected values, see:
url: '/{type:(?:home|viz|about)}',
Angular js - route-ui 添加默认参数
也有很相似的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:
这篇关于Angular UI 路由器 - 动态 TemplateURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
