CODEWITHSUNDEEP
javascriptangularjsngroute
Alireza Mirian
Alireza Mirian

Reputation: 6722

Loading different templates based on dependency resolve error when using ng-route

Assuming I have a user route, and I've configured the $routeProvider like this:

$routeProvider.when("/user/:id", {
   templateUrl: "templates/user.html",
   controller: "userController",
   resolve: {
      user: function(User, $route){
         // Assume that User.get(id) will return a promise for user data
         return User.get($route.current.params.id);
      }
   }
});
//...

Problem:

In some circumstances, user may not be resolved. For example the user may not exist (404), or current user may not have access to this user's page (403), and so on. Like most websites, I want to use my customized error pages for these kinds of errors. The problem is that template has already been fetched and I can't change it for example to "templates/errors/404.html".

NOTE 1:

I don't want to redirect the route to something like "/pageNotFound.html", because it's obviously just not right! I want the route to stay at "/user/{id}" while loading "404.html" template instead of "user.html".

NOTE 2:

One solution that I came up with is to set an error interceptor, and resolve promise with some data about error, by which I can detect the error on the controller and expose it to scope. So, I can use a ng-switch at the root of "user.html" that switches to different templates for normal case and different errors cases.
But I don't actually like this solution because I want to set one global 404 template for all routes that their dependencies aren't resolved because their resources are not found.

Upvotes: 2

Views: 249

Answers (1)

pansay
pansay

Reputation: 687

templateUrl can be a function which takes an object of the current params (:id) as argument, but that function gets called before the resolve. So you could do some basic check based on the id there, but not use the results from the resolve's service call.

Upvotes: 1

Related Questions