angular-ui-router 해상도 오류 처리 방법

angular-ui-router 해상도 오류 처리 방법

각의 라우터를 사용하고 있습니다.resolve상태를 전환하기 전에 서버에서 데이터를 가져옵니다.서버에 대한 요청이 실패하여 사용자에게 오류를 알려야 할 경우가 있습니다.컨트롤러에서 서버를 호출하면then콜이 실패했을 경우 알림 서비스에 전화합니다.에 있는 서버에 콜을 발신했습니다.resolve하위 상태가 서버로부터 결과를 기다린 후 시작하기를 원하기 때문입니다.

서버 콜이 실패했을 경우의 에러는 어디에서 알 수 있습니까?(매뉴얼은 읽었지만 방법은 아직 확실하지 않습니다.또, 이 새로운 스니펫 툴을 사용해 보는 이유도 찾고 있습니다. :)

"use strict";

angular.module('MyApp', ["ui.router"]).config([
  "$stateProvider",
  "$urlRouterProvider",
  function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/item");
    $stateProvider
    .state("list", {
      url: "/item",
      template: '<div>{{listvm}}</div>' +
      	'<a ui-sref="list.detail({id:8})">go to child state and trigger resolve</a>' +
        '<ui-view />',
      controller: ["$scope", "$state", function($scope, $state){
          $scope.listvm = { state: $state.current.name };
      }]
    })
    .state("list.detail", {
      url: "/{id}",
      template: '<div>{{detailvm}}</div>',
      resolve: {
        data: ["$q", "$timeout", function ($q, $timeout) {
          var deferred = $q.defer();
          $timeout(function () {
            //deferred.resolve("successful");
            deferred.reject("fail");   // resolve fails here
          }, 2000);
          return deferred.promise;
        }]
      },
      controller: ["$scope", "data", "$state", function ($scope, data, $state) {
        $scope.detailvm = {
          state: $state.current.name,
          data: data
        };
      }]
    });
  }
]);

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>

<div ng-app="MyApp">
  <ui-view />
</div>

오래된 질문이지만 같은 문제가 발생하여 UI 라우터의 FAQ 섹션에서 이 문제를 발견했습니다.

상태 해결 함수 내에서 사소한 오류가 발생했기 때문에 검출되지 않는 문제가 있는 경우, 이는 실제로 사양에 따른 약속의 의도된 동작입니다.

에러가 해결됩니다.

따라서 앱 실행 단계에서 다음과 같이 모든 해결 오류를 파악할 수 있습니다.

$rootScope.$on('$stateChangeError', 
function(event, toState, toParams, fromState, fromParams, error){ 
        // this is required if you want to prevent the $UrlRouter reverting the URL to the previous valid location
        event.preventDefault();
        ... 
})

문제는 루트 해결의 의존관계가 거부된 경우 컨트롤러가 인스턴스화되지 않는다는 것입니다.따라서 장애를 인스턴스화된 컨트롤러에서 탐지할 수 있는 데이터로 변환할 수 있습니다.

유사 코드 예시:

   data: ["$q", "$timeout","$http", function ($q, $timeout, $http) {
      return $timeout(function () { //timeout already returns a promise
        //return "Yes";
        //return success of failure
         return success ? {status:true, data:data} : {status:false}; //return a status from here
       }, 2000);
     }]

컨트롤러:-

 controller: ["$scope", "data", "$state", function ($scope, data, $state) {
      //If it has failed
      if(!data.status){
        $scope.error = "Some error";
       return;
      }
        $scope.detailvm = {
          state: $state.current.name,
          data: data
        };

만약 당신이 그것을 만들고 있다면$httpcall 등의 기능을 사용하면 장애가 발생한 경우에도 항상 데이터를 해결하고 컨트롤러에 상태를 반환할 수 있습니다.

예:-

resolve: {
        data: ["$q", "$timeout","$http", function ($q, $timeout, $http) {
           return $http.get("someurl")
             .then(function(){ return {status:true , data: "Yes"} }, 
                    function(){ return {status:false} }); //In case of failure catch it and return a valid data inorder for the controller to get instantated
        }]
      },

"use strict";

angular.module('MyApp', ["ui.router"]).config([
  "$stateProvider",
  "$urlRouterProvider",
  function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/item");
    $stateProvider
    .state("list", {
      url: "/item",
      template: '<div>{{error}}</div><div>{{listvm}}</div>' +
      	'<a ui-sref="list.detail({id:8})">go to child state and trigger resolve</a>' +
        '<ui-view />',
      controller: ["$scope", "$state", function($scope, $state){
       $scope.listvm = { state: $state.current.name };
      }]
    })
    .state("list.detail", {
      url: "/{id}",
      template: '<div>{{detailvm}}</div>',
      resolve: {
        data: ["$q", "$timeout","$http", function ($q, $timeout, $http) {
           return $http.get("/").then(function(){ return {status:true , data: "Yes"} }, function(){ return {status:false} })
        }]
      },
      controller: ["$scope", "data", "$state", function ($scope, data, $state) {
   
    
        $scope.detailvm = {
          state: $state.current.name,
          data: data.status ? data :"OOPS Error"
        };
        
      }]
    });
  }
]);

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <script data-require="angular-ui-router@*" data-semver="0.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
  <div ng-app="MyApp">
      <ui-view></ui-view>
    </div>

언급URL : https://stackoverflow.com/questions/25962417/how-to-handle-error-in-angular-ui-routers-resolve