2015-02-19 11 views
11

Sto usando angularjs nella mia applicazione, tutto funziona bene ma prima di caricare il modello voglio solo verificare che esista effettivamente sul suo percorso specificato.percorsi angularjs, come verificare se il file modello esiste

Ecco il mio codice:

.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; 
      }] 
     } 

    })) 

voglio che prima di fare questo return 'public/templates/' + rp.page.replace('.html', '') + '.php'; } si deve verificare se il file esiste, altrimenti voglio reindirizzare a pagina 404.

quello che succede ora, quando visito un link non valido, non ottengo lo stato 404, invece carica il file index.html principale, e per questo motivo, avvia lo stesso codice in un ciclo infinito, finalmente il browser si blocca.

Apprezzo il tuo aiuto, grazie.

+0

Allora perché non si usa $ routeChangeError o NOTFOUND (qualcosa) evento per una migliore attuazione di quello che si pensava di reindirizzare utente a altra pagina? – micronyks

+0

puoi per favore fornirmi qualche esempio, come usare $ routeChangeError? –

+0

http://stackoverflow.com/questions/20894568/display-specific-template-on-routechangeerror checkout this. – micronyks

risposta

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

ma dove inserisco questo codice? nella sezione 'load: ['$ q', '$ rootScope', '$ location',' section? Ho già provato qui, non funziona, la ragione è che non ottengo mai un errore anche se l'URL non è valido. –

0

ci sono alcune cose che dovrebbe solo fare in qualsiasi applicazione angular.js non banale, probabilmente il posto migliore per loro è proprio dove si definisce il mainmodule, poi un blocco di config e poi un blocco di corsa.

senza manipolazione e la registrazione quei $ routeChange Eventi (risp. Quando si utilizza ui-router $ stateChange Eventi) si sono fondamentalmente cieco e perdere gli errori e duplicare cambiamenti di percorso e altre brutte cose ...

Qui l'esempio quando si utilizza ui-router, se si utilizza l'instradamento di base angolare utilizzare gli eventi rispettive del router angolare.

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

}]); 
+1

Capisco questa cosa, ma il mio problema è che il mio script non restituisce un errore, ecco un esempio, supponiamo che eseguo questo URL 'mydomain.com/hello.html', ora lo script restituirà il file modello da questo percorso' public/templates/hello.html' ma questo hello.html in realtà non esiste affatto, quindi, anziché caricare questo file o dare un errore, carica index.html, che è il file dell'applicazione principale, dove includiamo le librerie angularjs e bcoz di incluso index.html, carica le librerie angularjs in loop, quindi tonnellate di chiamate ajax e all'ultimo crash del browser, spero di essere in grado di spiegare la mia situazione. –

0

Creare un servizio che verifichi se il file esiste e restituisce una promessa!

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

Nel controllore utilizzare il servizio:

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

In ngRoute, è necessario configurare i percorsi nel blocco config, e all'interno del blocco di configurazione non è possibile utilizzare le fabbriche e servizi, in modo
puoi utilizzare un semplice trucco per verificare se il modello esiste e se non restituire la tua pagina 404.

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; 
      }] 
    } 

})) 

esempio di lavoro: https://plnkr.co/edit/1UjlFgT7dazMZOrAhZzY?p=info

Problemi correlati