How to make a failed routing resolve promise load a different template URL?

Question

Learning Angular and running into an issue I cant seem to find a "good" answer to. I've been following the official Tutorial and have a similar setup with a project Im working on.

The $routeProvider .when case for phone details GETS a specific .JSON file based on the name of the phone clicked on in the phone list page. The problem is, if you type in a phone name that doesn't have a .JSON file associated with it, the route still proceeds and shows a blank page. I'm trying to figure out how to prevent this.

I've gotten as far as to add a resolve to .when route. However, I can only prevent the view from changing or use a $location.path redirect. Neither of these seem ideal.

How do I go about showing a "404 page" view for phone that doesn't have a JSON file? In my head, I would show a different templateUrl if the GET request responds with a 404, but cant seem to get it working.

Any help would be great!

Here is the code I've got so far:

My route handling.

.when('/game/:Game', {
    templateUrl: 'views/game-detail.html',
    controller: 'GameDetailCtrl',
    resolve: {
      myData: ["Games", "$location", "$q", "$timeout",'$rootScope', function(Games, $location, $q, $timeout,$rootScope) {
        var def = $q.defer();

        var path = $location.path().toString().substring(6);

          // Games service
         Games.get({gameName: path}, function(game, s) {

          }).$promise.then(
            function(data) {
              // found game data 
              def.resolve(data);
            },
            function(error) {
              // couldn't find JSON file
              def.reject(error);
            }
          );

        return def.promise;
      }]
    }
  }).when('/pageNotFound', {
    templateUrl: 'views/error.html'
  })

Root Scope route change error listener:

 $rootScope.$on("$routeChangeError",
  function(event, current, previous, rejection) {
    console.log("failed to change routes");
    //$location.path('/pageNotFound');
  });

Does your `$routeChangeError` handler fire? – ExceptionLimeCat Mar 31 '15 at 21:33 — ExceptionLimeCat, Mar 31 '15 at 21:33
Yes. It does fire and recognize the failed route. – Taz Apr 01 '15 at 22:05 — Taz, Apr 01 '15 at 22:05

score 1 · Answer 1 · edited May 23 '17 at 12:06

1

Well, you really don't do it that way, what you would do in this case would be to have your template HTML contain the template for both the success and failure scenario and an ng-switch inside to flip states when the call fails or succeeds.

Also, I think it would work if you tried to copy the idea from directives as well: Angular.js directive dynamic templateURL

edited May 23 '17 at 12:06

Community

1
1

answered Mar 31 '15 at 21:08

SoluableNonagon

11,541
11
53
98

Thanks for the response. I was thinking something similar using ng-show. – Taz Mar 31 '15 at 21:25
No problem. There are a bunch of ways to do it. None are truly wrong, some are just easier than others. You could also implement a global modal which can be called from anywhere to display all sorts of things including error states. There's a simple enough ng-modal library on github you can pull in. – SoluableNonagon Apr 01 '15 at 15:12

score 0 · Answer 2 · answered Mar 31 '15 at 21:30

0

You can try to change the path with the following code:

        function(error) {
          // couldn't find JSON file
          $location.path('/pageNotFound');
        }

answered Mar 31 '15 at 21:30

Hoyen

2,511
1
12
13

I did this but you run into the problem of adding that failed /game/ route to the browser history. So if the user clicks 'back' in their browser, they will just be redirected to the pageNotFound page over and over. – Taz Mar 31 '15 at 22:05

How to make a failed routing resolve promise load a different template URL?

2 Answers2