[英]AngularJS / ui-router: handle 404 on resolve
我是AngularJS和ui-router的初学者,正在尝试处理未找到的资源上的404。 我希望显示一个错误,而不更改地址栏中的URL。
我已经将自己的状态配置为:
app.config([
"$stateProvider", function($stateProvider) {
$stateProvider
.state("home", {
url: "/",
templateUrl: "app/views/home/home.html"
})
.state("listings", {
abstract: true,
url: "/listings",
templateUrl: "app/views/listings/listings.html"
})
.state("listings.list", {
url: "",
templateUrl: "app/views/listings/listings.list.html",
})
.state("listings.details", {
url: "/{id:.{36}}",
templateUrl: "app/views/listings/listings.details.html",
resolve: {
listing: [
"$stateParams", "listingRepository",
function($stateParams, repository) {
return repository.get({ id: $stateParams.id }).$promise;
}
]
}
})
.state("listings.notFound", {
url: "/404",
template: "Listing not found"
});
}
]);
(我实际上正在使用TypeScript,但是我尝试将上述内容更改为纯JavaScript)
如果说,我导航到以下URL: http://localhost:12345/listings/bef8a5dc-0f9e-4541-8446-4ebb10882045
那应该打开listings.details状态。 但是,如果该资源不存在,则resolve函数返回的promise将失败,并显示404:
app.run([
"$rootScope", "$state",
function($rootScope, $state) {
$rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
event.preventDefault();
if (error.status === 404) {
$state.go("^.notFound", null, { location: true, relative: toState });
}
});
}
]);
我要在这里执行的操作是转到listings.notFound状态,而不更改地址栏中的目标URL。 我使用相对路径,因为我想将此逻辑用于其他资源。
但是,我得到一个例外:
路径'^ .notFound'对状态'listings.details'无效
发生此错误的原因是$ stateChangeError事件给出的toState参数不知道其父级,即toState.parent是未定义的。 在ui-router的transitionTo函数中,我可以看到作为参数给出的对象是to.self
,它仅提供信息的子集。 使用relative: $state.get(toState.name)
也无济于事,因为内部ui路由器再次返回state.self
我想避免维护绝对路径列表,而改写在状态层次结构中导航的逻辑(无论它多么简单,DRY等等)。
我要去做错了吗,还有另一种处理404的正确方法吗? 如果没有,最好的方法是什么?
最好使用$urlRouterProvider
处理此异常
app.config([
"$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/404');
// define states
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.