渲染 404 页面而无需在 Angular js 中重定向 [英] render 404 page without redirecting in 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 中重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！