web-dev-qa-db-fra.com

Redirection vers une page d'erreur dans Angularjs

Je suis nouveau chez AngularJs. J'ai une application à page unique avec des itinéraires configurés avec un contrôleur et une vue. La vue est chargée dans l'élément <ng-view></ng-view> de la page index.html. À l'intérieur du contrôleur, je passe un appel http pour obtenir les données et les lie au $scope. Pour les scénarios de réussite, cela fonctionne bien, mais s'il y a une erreur, comment puis-je connecter une autre vue au lieu de la vue par défaut configurée dans la route angulaire. S'il vous plaît, faites-moi savoir.

angularjsangularjs-routing
12
zilcuanu

Utilisez $location.url() pour rediriger vers un fichier 404.html en cas d'erreur

$http.get(url,[params])
    .success(function(data, status, headers, config){
        // bind your data to scope
    })
    .error(function(data, status, headers, config) {
        $location.url('/404');
    });

Puis configurez votre $routeProvider

$routeProvider
    .when('/404', {
        templateUrl: '404.html',
        controller: 'Four04Controller'
    })
17
Raghavendra

Pour implémenter un scénario courant de traitement des erreurs ajax, vous pouvez implémenter un intercepteur de requête personnalisé et rediriger l'utilisateur vers la page d'erreur (ou la page de connexion) en fonction du statut de l'erreur:

myApp.factory('httpErrorResponseInterceptor', ['$q', '$location',
  function($q, $location) {
    return {
      response: function(responseData) {
        return responseData;
      },
      responseError: function error(response) {
        switch (response.status) {
          case 401:
            $location.path('/login');
            break;
          case 404:
            $location.path('/404');
            break;
          default:
            $location.path('/error');
        }

        return $q.reject(response);
      }
    };
  }
]);

//Http Intercpetor to check auth failures for xhr requests
myApp.config(['$httpProvider',
  function($httpProvider) {
    $httpProvider.interceptors.Push('httpErrorResponseInterceptor');
  }
]);

Plunker ici

32
Yuriy Rozhovetskiy

vous pouvez utiliser: https://github.com/angular-ui/ui-router En cas d'erreur, vous pouvez déclencher un état "erreur" il y a et j'ai résolu de cette façon

3
chf

Si vous utilisez $ stateProvider au lieu de $ routeProvider vous pouvez faire comme ceci:

function routerConfig($stateProvider, $urlRouterProvider) {
  $stateProvider
     .state('404', {
       url: '/404',
       templateUrl: '404.html'
     })
     .state('home', {
       url: '/',
       templateUrl: 'home.html'
     });

  $urlRouterProvider.otherwise('/404');
}

Faites attention à $ urlRouterProvider.otherwise (url) , qui est la fonction appelée lorsque le fournisseur ne trouve pas l’URL demandée. Il est donc automatiquement redirigé vers l’URL fournie dans cette fonction.

0
luizfelippe