AngularJS: replacing templateURL with 404 page url when data is not loaded

Question

This doesn't work of course, but should explain what I want to achieve:

In the factory "myapp.factory('gameService', function($http, $location) {" I load data from json feed "return $http.jsonp('api/game/' + id + '?callback=JSON_CALLBACK')", if the data is not loaded change the templateURL, which was loaded in at first, to 404 page url instead.

var get_data = function (id) {
     return $http.jsonp('api/game/' + id + '?callback=JSON_CALLBACK')
            .then(function(response) {
               //data loaded, do magic
            }, function(response) {
                //data not loaded
                templateUrl: 'views/page_not_found.html'; //<- how to inject this so it works?
            });
};

Dazuku · Accepted Answer · 2014-11-22 00:33:57Z

0

The best way to do this is to make a state in route provider to 'page not found', like this:

app.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html'
        controller: 'MainCtrl',
      })
      .when('/pageNotFound', {
        templateUrl: 'views/page_not_found.html'
      });
});

and in your function make this:

var get_data = function (id) {
    return $http.jsonp('api/game/' + id + '?callback=JSON_CALLBACK')
        .then(function(response) {
           //data loaded, do magic
        }, function(response) {
            //data not loaded
            window.location = '/#/pageNotFound';
        });

};

answered Nov 22, 2014 at 0:33

Dazuku

2731 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yodalr Over a year ago

This just creates infinite loop.

Dazuku Over a year ago

Infinite loop? Are you try it?

yodalr · Accepted Answer · 2014-11-22 14:21:26Z

0

Fixed it with ng-switch and ng-include

In the controller, when data is not loaded I added:

$scope.page_not_found = true;

And to the template I added:

<div ng-switch on="page_not_found">
   <div ng-if="page_not_found" ng-include="'views/page_not_found.html'"></div>
</div>

It doesn't really replace the templateURL, everything happens in one .html template. I hide the main content and import the 404 page with ng-include, this solution seems to be faster as well.

answered Nov 22, 2014 at 14:21

yodalr

11.3k10 gold badges37 silver badges50 bronze badges

Collectives™ on Stack Overflow

AngularJS: replacing templateURL with 404 page url when data is not loaded

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related