Render 404 вместо перенаправления 404 в angularjs

Я ищу хороший подход к рендерингу 404 страницы вместо перенаправления 404 страницы в angularjs. Многие решения, которые я нашел, касаются перенаправления на другую страницу. Это создаст проблему, которая, если пользователь нажмет кнопку "Назад в браузере", я создам другую переадресацию на страницу 404. Поэтому я ищу решение, которое отображает 404 страницы.

Спасибо за чтение, я надеюсь, что это понятно для вас, ребята.

Ответы

Ответ 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, который скрывает содержимое

Для этого требуется 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>

Теперь для этого требуется, чтобы у вас был главный контроллер, который помогает вам управлять остальной частью вашего пользовательского интерфейса. Кроме того, вам, скорее всего, понадобится сделать некоторое кодирование для обработки остальной части страницы, а не просто использовать ng-view (например, некоторые контроллеры, отображающие текущий заголовок, тело и т.д.).

2) Пользовательская система маршрутизации

Я действительно сделал это для конкретного проекта: у вас есть служба, которая устанавливает "BackURL" и "FordwardURL"; каждый $onRouteChange вы храните, куда вы идете, и откуда вы пришли; если пользователь вот-вот достигнет 404, вы все равно можете сделать его в моем исходном примере, но когда пользователь ударит назад, поймайте его через AngularJS и отобразите фактическую страницу "Назад". В этом случае я использую библиотеку, которая помогает мне с маршрутизацией на мобильных устройствах под названием Lungo и библиотекой, которую компания, для которой я работаю, использует LAB (Lungo Angular Bridge).

Ответ 2

Я новичок в 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;

Ответ 3

Вы также можете использовать ui-router, как было сказано ранее: fooobar.com/info/378971/.... ИМХО, вы не только получаете потрясающую библиотеку, но и получаете лучшее решение.