![页面而无需在]( "页面而无需在")
本文介绍了渲染 404 页面而无需在 Angular js 中重定向的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 ui.router &ngResource 与 AngularJS，&我的问题是:
如何在不重定向到它的情况下渲染 404 例如用户输入了 http://www.example.com/wrong-page-name ，他应该只显示 404 页面，并且 URL 不应该更改.
目前我是这样做的，但它会重定向
angular.module('app').run(['$rootScope', '$state', function($rootScope, $state) {$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {如果(错误.状态 === 404){$state.go('innerPages.page', {slug:"not-found"});}});}).config(['$stateProvider','$urlRouterProvider', function($stateProvider, $urlRouterProvider) {$stateProvider.state('innerPages.page', {网址: ':slug',意见:{'内容@':{templateUrl : '...',控制器:'页面控制器'},'pageHeader@' :{templateUrl : "...",控制器:'页面控制器'}},解决:{页面:['pageService'，'$stateParams'，函数(pageService，$stateParams){返回 pageService.get({slug:$stateParams.slug}).$promise;}]}});}]);
感谢帮助！
解决方案
为什么不直接展示 404 模板?
<any ng-view ng-class="{'hidden': notFound}"></any><div class="not-found-template hidden" ng-class="{'hidden': !notFound}"><h2>未找到！</h2>
对于 css:
.hidden{显示:无！重要；}
并添加错误处理服务(可选)
angular.module('app').service('Errors', function ($rootScope) {this.handle = 函数(错误，状态){//未找到开关(状态){案例404:alert('对不起！页面未找到.');//这是显示 404 模板所需的行$rootScope.notFound = true;休息;案例 500:alert('对不起！连接服务器时出错.');休息;案例403:$location.path('/登录');休息;默认:alert('对不起！连接服务器时出错.');}}});
I am using ui.router & ngResource with AngularJS, & my question is :
How do I RENDER 404 without redirecting to it e.g A user typed http://www.example.com/wrong-page-name , he should just be shown the 404 page, and the URL shouldn't change.
Currently this is how I did it but it redirects
angular.module('app')
.run(['$rootScope', '$state', function($rootScope, $state) {
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
if(error.status === 404) {
$state.go('innerPages.page', {slug:"not-found"});
}
});
})
.config(['$stateProvider','$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider.state('innerPages.page', {
url: ':slug',
views : {
'content@':{
templateUrl : '...',
controller : 'pageController'
},
'pageHeader@' : {
templateUrl : "...",
controller : 'pageController'
}
},
resolve:{
page: ['pageService', '$stateParams', function (pageService, $stateParams) {
return pageService.get({slug:$stateParams.slug}).$promise;
}]
}
});
}]);
Thanks for Help !
解决方案
Why don't you just show the 404 template?
<any ng-view ng-class="{'hidden': notFound}"></any>
<div class="not-found-template hidden" ng-class="{'hidden': !notFound}">
<h2>Not Found!</h2>
</div>
And for the css:
.hidden
{
display: none !important;
}
And add a service for error handling (optional)
angular.module('app').service('Errors', function ($rootScope) {
this.handle = function (error, status) {
// not found
switch (status) {
case 404:
alert('Sorry! the page was not found.');
// This is the required line for showing 404 template
$rootScope.notFound = true;
break;
case 500:
alert('Sorry! Error connecting to server.');
break;
case 403:
$location.path('/login');
break;
default:
alert('Sorry! Error connecting to server.');
}
}
});
这篇关于渲染 404 页面而无需在 Angular js 中重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！