0

I have a form that I need to submit, if something goes wrong I would like to show an error page, I have a controller and view for this but I would like for the browser location textbox not to change to avoid the user from bookmarking the error page.

So I would have a page called /Items

the user submits and there was an error so I would like to show this page (itemsError.html) to the user but I don't want to allow the user to bookmark /ItemsError

If I plugin into the routeprovider then the browser location bar is going to update with something like /ItemsError and at a later date the user could bookmark the page, but this page is a dynamic page and should only be shown depending on the result of the form submission.

What is Angular's best practice for supporting something like this?

Thanks

Martin
  • 23,844
  • 55
  • 201
  • 327
  • Rather than changing the route, just change the partial. To achieve this, instead of using `ng-view` to bind partials, use `ng-include` instead. Use an interceptor on routeChangeSucess to inject logic. – Dan Kanze Jul 26 '13 at 13:39
  • Thanks, can you elaborate? ng-view, i can't delete it really as other pages depend on it. So I should use ng-include using a swtich or something similar? Do you have an example? – Martin Jul 26 '13 at 13:43

1 Answers1

0

config.js

$routeProvider.when('/', {
  template: '/views/home.html',
});

index.html

<!doctype html>
<html lang="en" ng-controller="app">
<head>
</head>
<body>
<ng-include src="page"></ng-include>
</body>
</html>

controllers.js

controller('app', ['$scope','$route',function($scope,$route) {
  $scope.$on("$routeChangeSuccess",function($currentRoute,$previousRoute){
    $scope.page = $route.current.template;
  });
}]).

This will handle your general routing. Now you can dynamically swap partials in your controllers based on logic. In your example, if the form doesn't successfully complete, your error callback can just change the partial on the fly:

controller('form', ['$scope','$route',function($scope,$route) {
  $scope.submit = function(){
    something.get().$then(
       function( value ){$scope.page = '/views/successPage.html/';},
       function( error ){$scope.page = '/views/errorPage.html/';}
    )
  }
}]).
Dan Kanze
  • 18,485
  • 28
  • 81
  • 134
  • Thanks Dan, this looks interesting, i would rather not get rid of the ng-view but looking at the code i think I am able to do this. Just out of interest, is the above example the only way of doing what i am trying to do? Is there any alternatives? I see that show an error page after a post and ensuring that the error page is NOT bookmarkable must be a standard request. It was unbelievable I didn't find anything in the angularjs docs – Martin Jul 27 '13 at 13:08
  • What you are after is the flexibility you gain from following a convention. Making things not "bookmarkable" isn't a standard request. However, response messages within success/failure callbacks on the same page are, and also express the symptom of not being "bookmarkable". What you are really looking for is nothing more than a graceful way to handle your AJAX call --- and one way can be found above. – Dan Kanze Jul 28 '13 at 02:57