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 c

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


   

    
   
   

    
   

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).