Geek Answers Handbook

How to route error pages using ui-router with the correct url

We use the latest version of Angular and AngularUI Router

The user is on the same page /foo . Click the link to go to /bar . The status of bar determined by the permission function, which retrieves some data from the server. To handle cases of failure, we have a handler $stateChangeError , which analyzes the error and displays the correct error page (for example, 500, 403, 401, etc.). When a user encounters an error going to /bar , they end up with something like /errors/500 . But this is wrong. When you go to the URLs on the Internet and encounter an error, the URL you get to should be the URL you intended to go to. those. if you encounter a 500 error equal to /bar , your location should be /bar .

Has anyone figured this out in ui-router ? Attempt made:

  • Building the destination URL using toState and toParams , and then calling $ location.url / path in the error handler after going to the error page. This repeats the route and tries to retrieve the data again.
  • Call history.replaceState after going to the error page. It really seems useless with ui-router and seems to cause unexpected state changes.
  • Just bite the bullet and use the error states like /errors/500 . This will cancel the back button. If you land on a page and the server returns an error when you try to load it, the error handler will change the state to the error page, so when you click the "Back" button, you will return to /foo and try to solve the error again and again and return you to /errors/500 .
+4
source share
2 answers

This is a very interesting question, and I had my own share of interest in how to do it right!

My job is to handle navigation states using a service connected to the main controller.

I do the following:

  • Use named views and define the root abstract state (to store general views, such as error pages).
  • Define the NavigationStatus service with status. the status can be an object formatted as you wish (example: {code:403, reason:'Nope ! No way !'} )
  • Connect the NavigationStatus service to the main controller, wrap my entire page.
  • Wrap my contents of the variable (ui-view) in a conditional block (ng-if), tied to the registered navigation state so that it can delete the contents when an error occurs.
  • Add other conditional blocks in the switch / case module to display error statuses. They can be templated, expecting your navigation status object to have a specific set of attributes and use views from your root abstract state.
  • When searching for content, systematically click the Success or Error button in the NavigationStatus service. I usually do this in the controller, but I think you could do this with the promise of a ui-router solution. If successful, my main ui-view is displayed. On error, it is replaced with a friendly message without changing the URL.

Hope this helps! :)

PS: (I can come up with a working example if you're interested, but now I'm a little tired)

+2
source

I made several error conditions, for example:

  .state('notFound', { url: '/errors/404', template: '<h1>Not Found</h1>' }) .state('accessDenied', { url: '/errors/403', template: '<h1>Access Denied</h1>' })

Then, when you handle the error, add a parameter to not update the location:

  $state.go('notFound', {}, {location: false});

This leads to a change in the status of notFound, but it does not update the address bar of the browser, so the user still sees the previous URL at your request.

+4
source

More articles:


All Articles