Render 404 instead of redirecting 404 in angularjs

Question

I'm looking for a good approach to render 404 page instead of redirecting 404 page in angularjs. Many solutions I have found is all about redirecting to another page. It will create a problem that if the user click on browser's back button I will create another redirect to 404 page. So I am looking for a solution that renders 404 page instead.

Thanks for reading, I hope it's understandable for you guys.

Harold

Answer 1

Usage of otherwise might be what are you looking for.

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: After reading more carefully the OP question (sorry, quite early around here), I think I have an alternate solution (actually two):

1) A $scope variable to the main UI of your ng-view that hides the content

This requires ng-show in your view and resolve in your params, then do a $emit to the other controllers in order to tell "Hey, this guy hit a 404, don't display your view"

$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>

Now, this requires that you have a master controller that helps you to manage the rest of your UI. Also, you most likely would need to do some coding to handling the rest of the page instead of just using ng-view (e.g. some controllers that show the current header, body, etc).

2) A custom routing system

I actually have done this for a specific project: you have a service that sets up a "BackURL" and "FordwardURL"; each $onRouteChange you store where do you go and where do you come from; if the user is about to hit a 404, you can still render it through my original example, but when the user hits back, catch that through AngularJS and render the actual "Back" page. In this case I'm using a library that helps me with the routing on mobile devices called Lungo and a library that the company I work for uses, the L.A.B (Lungo Angular Bridge).

Nonpayment

Don't you mean otherwise({ templateUrl: '/404.html' })? The question is about not redirecting! – Putandtake

this is redirecting, my friend :) – Harold

@nXqd pardon my lack of attention, rough morning. Check it up if the updated answer helps you somehow. – Nonpayment

@SteveKlösters That doesn't seem to work for me. Otherwise seems to only take a string to redirct to or a function that returns a string to redirect to. – Tyrothricin

Answer 2

I'm new to AngularJS, so this may not be an ideal solution, but it works for showing a 404 page, or similar uses such as a login page:

See Working Example

Redirect everything to the same master template:

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

master.html template refers to the masterController and has a subpage:

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

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

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

masterController has conditional sub-page logic:

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;

Oof

Answer 3

You could also use ui-router as previously answered here: https://mcmap.net/q/825255/-angularjs-ui-router-handling-404s. IMHO, you not only get an awesome library but you get a better solution.

Spermatium