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

Question

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

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

Answer 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 
}); 

Update: После прочтения более внимательно вопрос OP (к сожалению, довольно рано здесь), я думаю у меня есть альтернативное решение (на самом деле два):

1) $scope переменное основной пользовательский интерфейс вашего ng-view, которая скрывает содержимое

Это требует ng-show в вашей точке зрения и resolve в ваших Params, то сделайте $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, и библиотекой, которую я использую для использования, L.A.B (Lungo Angular Bridge).

Answer 2

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

Answer 3

Я новичок в AngularJS, так что это не может быть идеальным решением, но это работает для показа 404 страниц, или аналогичные виды использования, такие как страницы входа:

См Working Example

Перенаправление все к тому же основному шаблону:

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

главный.Шаблон 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;