Is there a way to create a dismissible button that goes to the page where the 404 page was blocking?

Issue

In my project using ui-router, I have a 404 page that occurs whenever the a certain component does not exist ( in the otherwise). So instead of displaying, broken JSON, a 404 page is triggered. Is there a way to create a button on my 404 page that when clicked takes the user to the page of the broken JSON?

Solution

You can catch params and states with $rootScope , $stateChangeStart

app.run(function($rootScope, SpinnerService) {
  $rootScope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams) {
    console.log("$stateChangeStart " + fromState.name + JSON.stringify(fromParams) + " -> " + toState.name + JSON.stringify(toParams));
    if(toState.name === 'errorPage'){
        toParams.latestState = fromState;
    }

  });
})

Create a state which includes your error page. And add state action which is working with latest params and latest state.

$stateProvider.state('errorPage', {
  templateProvider: function ($timeout, $stateParams) {
    return $timeout(function () {
      return '<button ui-sref="'+$stateParams.latestState+'"></button>'
    }, 100);
  }
})

You can do that with template, controller, templateUrl, controllerProvider or storing the latest variable inside $rootScope.

There is a lot of way to do it. I think read this article carefully https://github.com/angular-ui/ui-router/wiki

Answered By – hurricane

Answer Checked By – Marilyn (AngularFixing Volunteer)