根据来自API的Ajax调用塞角UI-路由器动态路由。根据塞加载视图 [英] Angular UI-Router dynamic routing based on slug from API Ajax Call. Load view based on slug
问题描述
例子蛞蝓在服务器数据库中，通过API访问：
{塞：约翰·史密斯，键入：用户}
{塞：微软的技术，键入：公司}
场景1：用户视图和放大器;控制器：的http：//本地主机/约翰·史密斯
.state（'用户'，{
网址：/：用户，
templateUrl：局部user.html，
控制器：userCtrl
}）
情景2：公司视图和放大器;控制器：的http：//本地主机/微软技术
.state（本公司，{
网址：/：公司，
templateUrl：局部company.html，
控制器：companyCtrl
}）
现在我想要做一个动态的基础蛞蝓从API调用获取到服务器。
我写了虚code。但是我没有得到的方式来实现。
//例URL的http：//本地主机/约翰 - 史密斯
.state（'混合'，{
// /约翰 - 史密斯
网址：/：蛞蝓，
templateUrl：函数（）{
返回部分 - +类型+HTML。
}，
controllerProvider：功能（RT）{
返回类型+'控制'
}，
resolove：{
类型：功能（$ HTTP，$ stateParams）{
$ http.get（{
方法：GET，
网址：HTTP：//本地主机/ API /+ $ stateParams.slug
}），成功（函数（响应状态，头，配置）{
//响应= {塞：约翰·史密斯，键入：用户}
回报response.type
}）
返回
}
}
}）
有一个工作plunker 。
它来自类似的问题： AngularJS UI路由器 - 两个相同的路线组
在的情况下，我明白你的目标正确，这将是调整状态定义的（我只是跳过了$ HTTP和服务器响应的一部分，只是在与传递的参数）的：
.state（'混合'，{
// /约翰 - 史密斯
网址：'/ {塞:( ?:约翰|用户|公司）}，
templateProvider：['类型'，'$ templateRequest'，
功能（类型，templateRequest）
{
VAR tplName =tpl.partial-+类型+。html的;
返回templateRequest（tplName）;
}
]
controllerProvider：['类型'，
功能（型）
{
返回类型+'控制';
}
]
解决： {
类型：['$ HTTP，$ stateParams'，
功能（$ HTTP，$ stateParams）{
/ * $ http.get（{
方法：GET，
网址：HTTP：//本地主机/ API /+ $ stateParams.slug
}），成功（函数（响应状态，头，配置）{
//响应= {塞：约翰·史密斯，键入：用户}
回报response.type
}）* /
回报$ stateParams.slug
}
]
}
}）
一个变化是 resolove：{} 的变成了： 解析：{} 。另一种是控制器高清夹具（RT VS型）。而且，我们的利润来自内置的功能 templateProvider 和 $ templateRequest 的（类似此处的角ui.router重载父templateProvider ）的
检查行动这里
扩展，包括$ HTTP部分（扩展plunker ）
让我们调整（用于plunker目的）的服务器部分，返回此信息作为 data.json
{
约翰·史密斯：{类型：用户}，
淑女安：{类型：用户}，
微软的技术：{类型：公司}，
大公司：{类型：公司}，
默认：{类型：其他}
}
和以下链接：
＆LT; A HREF =＃/约翰·史密斯＆GT;
＆LT; A HREF =＃/淑女安＆GT;
＆LT; A HREF =＃/微软技术＆GT;
＆LT; A HREF =＃/大公司＆GT;
＆LT; A HREF =＃/其他未知的＆GT;
将由此调整后的状态DEF轻松管理：
.state（'混合'，{
// /约翰 - 史密斯
网址：/：蛞蝓，
templateProvider：['类型'，'$ templateRequest'，
功能（类型，templateRequest）
{
VAR tplName =tpl.partial-+类型+。html的;
返回templateRequest（tplName）;
}
]
controllerProvider：['类型'，
功能（型）
{
返回类型+'控制';
}
]
解决： {
类型：['$ HTTP，$ stateParams'，
功能（$ HTTP，$ stateParams）{
返回$ http.get（data.json）
。然后（函数（响应）{
VAR theType = response.data [$ stateParams.slug]
|| response.data [默认]
返回theType.type
}）
}
]
}
}）
检查这里更新的东西
Examples slugs in server database accessible through API:
{slug: "john-smith",type: "user"}
{slug: "microsoft-technologies",type: "company"}
scenario 1 : user view & controller : http://localhost/john-smith
.state('user', {
url: '/:user',
templateUrl: 'partial-user.html',
controller: 'userCtrl'
})
scenario 2 : company view & controller : http://localhost/microsoft-technologies
.state('company', {
url: '/:company',
templateUrl: 'partial-company.html',
controller: 'companyCtrl'
})
Now I want to make make a dynamic state based the slug getting from API Call to the server.
I written a imaginary code. But I'm not getting way to achieve
// 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
}
}
})
There is a working plunker.
It comes from similar issue: AngularJS ui-router - two identical route groups
In case, I do understand your aim properly, this would be the adjusted state definition (I just skipped the $http and server response part, just working with passed parameter):
.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
}
]
}
})
One change is the resolove : {} became: resolve : {}. Another is fixture of the controller def (rt vs type). And also, we do profit from built in features templateProvider and $templateRequest (similar here: Angular ui.router reload parent templateProvider)
check that in action here
EXTEND, including the $http part (extended plunker)
Let's adjust (for plunker purposes) the server part to return this info as data.json:
{
"john-smith": {"type": "user"},
"lady-ann": {"type": "user"},
"microsoft-technologies" : {"type": "company" },
"big-company" : {"type": "company" },
"default": {"type" : "other" }
}
And these links:
<a href="#/john-smith">
<a href="#/lady-ann">
<a href="#/microsoft-technologies">
<a href="#/big-company">
<a href="#/other-unknown">
Will be easily managed by this adjusted state def:
.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
})
}
]
}
})
Check that updated stuff here
这篇关于根据来自API的Ajax调用塞角UI-路由器动态路由。根据塞加载视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
