How not to change url when show 404 error page with ui-router

There is solution for this scenario. We’d use 1) one ui-router native feature and 2) one configuration setting. A working example could be observed here.

1) A native feature of ui-router state definitions is:

The url is not needed. State could be defined without its representation in location.

2) A configuration setting is:

• otherwise() for invalid routes, which parameter does not have to be a string with default url, but could be a function as well (cite):

path String | Function The url path you want to redirect to or a function rule that returns the url path. The function version is passed two params: $injector and $location

Solution: combination of these two. We would have state without url and custom otherwise:

$stateProvider
  .state('404', {
    // no url defined
    template: '<div>error</div>',
  })

$urlRouterProvider.otherwise(function($injector, $location){
   var state = $injector.get('$state');
   state.go('404');
   return $location.path();
});

Check that all in this working example