服务器数据库中可通过 API 访问的 slug 示例:
{slug: "john-smith",type: "user"}
{slug: "microsoft-technologies",type: "company"}
场景 1: 用户 View 和 Controller :http://localhost/john-smith
.state('user', {
url: '/:user',
templateUrl: 'partial-user.html',
controller: 'userCtrl'
})
场景 2: 公司 View 和 Controller :http://localhost/microsoft-technologies
.state('company', {
url: '/:company',
templateUrl: 'partial-company.html',
controller: 'companyCtrl'
})
现在我想根据从 API 调用到服务器的 slug 创建一个动态状态。
我写了一个虚构的代码。但我没有办法实现
// Example URL http://localhost/john-smith
.state('hybrid', {
// /john-smith
url: '/:slug',
templateUrl: function () {
return "partial-"+type+".html"
},
controllerProvider: function (rt) {
return type+'Controller'
},
resolove: {
type: function ($http, $stateParams) {
$http.get({
method: "GET",
url: "http://localhost/api/" + $stateParams.slug
}).success(function(response, status, headers, config){
//response = {slug: "john-smith",type: "user"}
return response.type
})
return
}
}
})
最佳答案
它来自类似的问题:AngularJS ui-router - two identical route groups
以防万一,我确实正确理解了您的目标,这将是调整后的状态定义(我只是跳过了 $http 和服务器响应部分,只处理传递的参数):
.state('hybrid', {
// /john-smith
url: '/{slug:(?:john|user|company)}',
templateProvider: ['type', '$templateRequest',
function(type, templateRequest)
{
var tplName = "tpl.partial-" + type + ".html";
return templateRequest(tplName);
}
],
controllerProvider: ['type',
function(type)
{
return type + 'Controller';
}
],
resolve: {
type: ['$http', '$stateParams',
function($http, $stateParams) {
/*$http.get({
method: "GET",
url: "http://localhost/api/" + $stateParams.slug
}).success(function(response, status, headers, config){
//response = {slug: "john-smith",type: "user"}
return response.type
})*/
return $stateParams.slug
}
]
}
})
一个变化是 resolove : {}
变成了:resolve : {}
。另一个是 Controller 定义的固定装置(rt vs type)。而且,我们确实受益于内置功能 templateProvider
和 $templateRequest
(此处类似:Angular ui.router reload parent templateProvider)
在行动中检查 here
扩展,包括 $http 部分 ( extended plunker )
让我们调整(出于 plunker 目的)服务器部分以将此信息作为 data.json
返回:
{
"john-smith": {"type": "user"},
"lady-ann": {"type": "user"},
"microsoft-technologies" : {"type": "company" },
"big-company" : {"type": "company" },
"default": {"type" : "other" }
}
还有这些链接:
<a href="#/john-smith">
<a href="#/lady-ann">
<a href="#/microsoft-technologies">
<a href="#/big-company">
<a href="#/other-unknown">
将通过调整后的状态定义轻松管理:
.state('hybrid', {
// /john-smith
url: '/:slug',
templateProvider: ['type', '$templateRequest',
function(type, templateRequest)
{
var tplName = "tpl.partial-" + type + ".html";
return templateRequest(tplName);
}
],
controllerProvider: ['type',
function(type)
{
return type + 'Controller';
}
],
resolve: {
type: ['$http', '$stateParams',
function($http, $stateParams) {
return $http.get("data.json")
.then(function(response){
var theType = response.data[$stateParams.slug]
||response.data["default"]
return theType.type
})
}
]
}
})
关于javascript - Angular UI-Router 动态路由基于来自 API Ajax 调用的 slug。基于 slug 加载 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30409740/