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

Vote count:

0

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');
  });

asked 22 secs ago

Taz

44

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