Javascript AngularJS/ui路由器:解析时处理404
我是AngularJS和ui路由器的初学者,正在尝试处理找不到的资源上的404。我想显示一个错误,而不改变地址栏中的URL 我已将我的状态配置为:Javascript AngularJS/ui路由器:解析时处理404,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我是AngularJS和ui路由器的初学者,正在尝试处理找不到的资源上的404。我想显示一个错误,而不改变地址栏中的URL 我已将我的状态配置为: app.config([ "$stateProvider", function($stateProvider) { $stateProvider .state("home", { url: "/", templateUrl: "app/vi
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状态。
但是,如果该资源不存在,解析函数返回的承诺将以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”对于“状态”列表无效。详细信息
发生此错误是因为$stateChangeError事件提供的toState参数不知道其父项,即toState.parent未定义。
在ui router的Transition函数中,我可以看到作为参数给出的对象是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
}]);
你解决过这个问题吗?我遇到了非常相似的事情,我被卡住了:(