15

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

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

4

3 回答 3

13

的用法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的主 UI 的变量ng-view

这需要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和我工作的公司使用的库LAB（Lungo Angular Bridge）。

于 2013-09-13T09:00:35.733 回答
1

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

请参阅工作示例

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

$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;
于 2016-04-05T23:38:24.507 回答
0

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

于 2016-01-26T18:23:01.763 回答