渲染 404 而不是在 angularjs 中重定向 404答案

【问题标题】：Render 404 instead of redirecting 404 in angularjs渲染 404 而不是在 angularjs 中重定向 404
【发布时间】：2013-09-13 08:54:04
【问题描述】：

我正在寻找一种渲染 404 页面的好方法，而不是在 angularjs 中重定向 404 页面。我发现的许多解决方案都是关于重定向到另一个页面。如果用户单击浏览器的后退按钮，我将创建另一个重定向到 404 页面，这将产生一个问题。所以我正在寻找一种呈现 404 页面的解决方案。

感谢阅读，希望大家能理解。

【问题讨论】：

标签： angularjs user-experience

【解决方案1】：

otherwise 的用法可能是您想要的。

angular.module('MyApp', [])
.config(function($routeProvider) {
  $routeProvider.
    when('/', {templateUrl:'/home.html'}).
    // add as many as you want here...
    otherwise({templateUrl:'/404.html'}); // Render 404 view
});

更新：在仔细阅读了 OP 问题后（抱歉，这里很早），我认为我有一个替代解决方案（实际上是两个）：

1) 一个 $scope 变量，用于隐藏内容的 ng-view 的主 UI

这需要ng-show 在您的视图中，resolve 在您的参数中，然后对其他控制器执行$emit 以告诉“嘿，这家伙打了 404，不要显示您的视图”

$routeProvider.otherwise({
  controller: 'masterController',
  resolve: {
    404: function(){
      return true;
    };
  });

angular.module('MyApp', [])
.controller('masterController', function($scope, 404) {
  $scope.isOn404 = 404
  ...
})

// In the view

<div ng-controller="masterController">
   <div ng-hide="isOn404">
    <!-- Actual content -->
   </div>
   <div ng-show="isOn404">
    <!-- 404 Page -->
   </div>
</div>

现在，这要求您有一个主控制器来帮助您管理 UI 的其余部分。此外，您很可能需要进行一些编码来处理页面的其余部分，而不仅仅是使用ng-view（例如，一些显示当前标题、正文等的控制器）。

2) 自定义路由系统

我实际上是为一个特定的项目这样做的：你有一个设置“BackURL”和“FordwardURL”的服务；每个$onRouteChange你存储你去哪里，你从哪里来；如果用户即将点击 404，您仍然可以通过我原来的示例呈现它，但是当用户回击时，通过 AngularJS 捕捉它并呈现实际的“返回”页面。在这种情况下，我使用了一个库，它可以帮助我在移动设备上进行路由，称为 Lungo 和一个我工作的公司使用的库 L.A.B（Lungo Angular Bridge）。

【讨论】：

你不是说otherwise({ templateUrl: '/404.html' })吗？问题是关于 not 重定向！
这是重定向，我的朋友 :)
@nXqd 请原谅我缺乏关注，早上很糟糕。如果更新的答案对您有所帮助，请检查一下。
@SteveKlösters 这似乎对我不起作用。否则似乎只需要一个要重定向到的字符串或一个返回要重定向到的字符串的函数。

【解决方案2】：

我是 AngularJS 的新手，所以这可能不是一个理想的解决方案，但它适用于显示 404 页面或类似用途，例如登录页面：

见Working Example

将所有内容重定向到同一个主模板：

$routeProvider
.when('/', {
        controller: 'homeController',
        templateUrl: 'partial.master.html'
    })
.when('/cust/:custid', {
        controller: 'custController',
        templateUrl: 'partial.master.html'
    })

master.html模板引用masterController并有一个子页面：

<div ng-controller="masterController">
    <h2><a href="#">{{title}} - Header</a></h2>
    <hr>

    <div ng-include="subPage"></div>

    <hr>
    <h3>{{title}} - Footer</h3>
</div>

masterController 有条件分页逻辑：

controllers.custController = function($scope, $rootScope, $routeParams){
    $rootScope.subpage = 'cust';
    $scope.cust = getCustomer( $routeParams.custid );
};
controllers.masterController = function($scope, $rootScope) {
    switch($rootScope.subpage) {
    case 'home':
        $scope.subPage = 'partial.home.html';
        break;
    case 'cust':
        if($scope.cust) {
            $scope.subPage = 'partial.cust.html';
        } else {
            $scope.subPage = 'partial.404notfound.html';
        }
        break;

【讨论】：

【解决方案3】：

您也可以使用之前在此处回答的 ui-router：https://stackoverflow.com/a/23290818/2723184。恕我直言，您不仅获得了一个很棒的库，而且获得了更好的解决方案。

【讨论】：