angularjs Routen, wie zu prüfen, ob Vorlagendatei existiert

Question

Ich benutze angularjs in meiner Anwendung, alles funktioniert gut, aber vor dem Laden der Vorlage möchte ich nur überprüfen, dass es tatsächlich auf dem angegebenen Pfad existiert.

Hier ist mein Code:

.when("/:page", angularAMD.route({ 

     templateUrl: function (rp) { 
        return 'public/templates/' + rp.page.replace('.html', '') + '.php'; }, 

     resolve: { 
     load: ['$q', '$rootScope', '$location', 
      function ($q, $rootScope, $location) { 

       var path = $location.path(); 
       //console.log(path); 
       var parsePath = path.split("/"); 

       var controllerName = parsePath[1]; 
       controllerName = controllerName.replace('.html', '').replace('_', ''); 
       var loadController = "public/js/controllers/" + 
             controllerName + "Controller.js"; 

       var deferred = $q.defer(); 
       require([loadController], function() { 
         $rootScope.$apply(function() { 
         deferred.resolve(); 
       }); 
      }); 
      return deferred.promise; 
      }] 
     } 

    })) 

Ich möchte, dass diese return 'public/templates/' + rp.page.replace('.html', '') + '.php'; }, bevor Sie es prüfen müssen, ob diese Datei vorhanden ist, sonst I bis 404 Seite umleiten möchten.

Was passiert jetzt ist, wenn ich einen ungültigen Link besucht, bekomme ich nicht 404-Status, stattdessen lädt es die Hauptindex.html-Datei, und aus diesem Grund startet es den gleichen Code in einer Endlosschleife, endlich Browser hängt.

Schätzen Sie Ihre Hilfe, danke.

Answer 1

(or $scope.$on) 
$rootScope.$on("$routeChangeError", function(event, current, previous, eventObj) { 
    //redirect your user to custom 404 page; 
    }); 

Answer 2

Es gibt ein paar Dinge, die Sie sollten nur in einer nicht-trivialen Angularjs app tun, wahrscheinlich der beste Ort für sie richtig ist, wo Sie Ihre mainmodule definieren, dann einen Block config und dann einen Laufblock.

Ohne Handhabung und jene $ routeChange Events (resp. Bei der Verwendung von ui-Router $ state Events) Anmeldung Sie im Grunde blind sind und werden Fehler verpassen und Routenänderungen und andere unangenehme Dinge duplizieren ...

Hier das Beispiel Verwenden Sie bei der Verwendung von UI-Router die Verwendung von angular basic routing mit den entsprechenden Ereignissen von angular router.

angular.module('yourMainModuleName', ['your dependencies']) 

.config(['$someProvider', function(someProvider) { 
    // do setup all your global providers here 
    // e.g. $http, restangular, ui-router, angular-translate.... 

} ]) 

.run(['$rootScope', '$state', '$stateParams', 
function($rootScope, $state, $stateParams) { 

    // put ui-router $state on $rootScope, so we have access to it in all $scopes 
    $rootScope.$state = $state; 
    $rootScope.$stateParams = $stateParams; 

     $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) { 
      // always see what happens in your app! 
      console.debug('stateChangeStart from: ' + (fromState && fromState.name) + ' to: ' + toState.name); 
      // handle auth here as well, check whether user is allowed to go to this state, abort if not 
      ... 
     }); 

     $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { 
      // see what happens in your app! 
      console.debug('stateChangeSuccess from: ' + (fromState && fromState.name) + ' to: ' + toState.name); 
     }); 

     // log stateChangeErrors 
     $rootScope.$on("$stateChangeError", function (event, toState, toParams, fromState, fromParams, error) { 
      console.log('Error on StateChange from: "' + (fromState && fromState.name) + '" to: "'+ toState.name + '", err:' + error.message + ", code: " + error.status); 
      $state.go('home'); 
     }); 

}]); 

Answer 3

Erstellen Sie einen Dienst, der überprüft, ob die Datei vorhanden ist und gibt ein Versprechen zurück!

$http.head("template2check").then(function() { 
       return true; 
      }, function() { 
       return false; 
      }); 

Im Controller nutzen den Service:

<service>.<service method>.then(function (found) { 
    if (found) {...... 
}); 

Answer 4

In ngRoute, müssen Sie die Routen in der config Block, und innerhalb Konfigurationsblock konfigurieren Fabriken und Dienstleistungen, die Sie nicht
, verwenden Sie so Sie können einen einfachen Trick verwenden, um zu überprüfen, ob eine Vorlage existiert, und wenn Sie Ihre 404-Seite nicht zurückgeben.

var checkTplUrl = function(url) { 
    var http = new XMLHttpRequest(); 
    http.open('HEAD', url, false); 
    http.send(); 
    return (http.status !== 404) ? url : './404.html'; 
}; 

.when("/:page", angularAMD.route({ 

    templateUrl: function (rp) { 
     return checkTplUrl('public/templates/' + rp.page.replace('.html', '') + '.php'); }, 

    resolve: { 
     load: ['$q', '$rootScope', '$location', 
      function ($q, $rootScope, $location) { 

       var path = $location.path(); 
       //console.log(path); 
       var parsePath = path.split("/"); 

       var controllerName = parsePath[1]; 
       controllerName = controllerName.replace('.html', '').replace('_', ''); 
       var loadController = "public/js/controllers/" + 
         controllerName + "Controller.js"; 

       var deferred = $q.defer(); 
       require([loadController], function() { 
        $rootScope.$apply(function() { 
         deferred.resolve(); 
        }); 
       }); 
       return deferred.promise; 
      }] 
    } 

})) 

Arbeitsbeispiel: https://plnkr.co/edit/1UjlFgT7dazMZOrAhZzY?p=info