如何处理在角UI路由器的决心错误 [英] How to handle error in angular-ui-router's resolve

查看：207
本文介绍了如何处理在角UI路由器的决心错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我采用了棱角分明的UI路由器的解析移动到前的状态下从服务器获取数据。有时该请求到服务器失败，我需要通知用户失败。如果我调用服务器从控制器，我可以把然后和的情况下，调用失败叫我通知服务在里面。我把电话给服务器决心，因为我想后裔状态等待来自服务器的结果，他们开始之前。

我在哪里可以捕获错误的情况下调用服务器出现故障？ （我已阅读文档但仍然不确定如何。另外，我正在寻找一个理由尝试这个新的代码片段的工具。）

\r
\r

使用严格的;\r
\r
angular.module（'MyApp的，[ui.router]）。配置（[\r
  $ stateProvider\r
  $ urlRouterProvider\r
  功能（$ stateProvider，$ urlRouterProvider）{\r
    $ urlRouterProvider.otherwise（/项目）;\r
    $ stateProvider\r
    .STATE（名单，{\r
      网址：/项目，\r
      模板：'＆LT; D​​IV＆GT; {{listvm}}＆LT; / DIV＆GT;' +\r
      '＆LT;一个UI的SREF =list.detail（{ID：8}）＆GT;转到孩子的状态和触发决心和LT; / A＆GT;' +\r
        '＆LT; UI画面/＆GT;，\r
      控制器：[$范围，$状态功能（$范围，$州）{\r
          $ scope.listvm = {状态：$ state.current.name};\r
      }]\r
    }）\r
    .STATE（list.detail，{\r
      网址：/（编号），\r
      模板：'＆LT; D​​IV＆GT; {{detailvm}}＆LT; / DIV＆GT;，\r
      解析：{\r
        数据：[$ Q，$超时功能（$ Q $超时）{\r
          变种推迟= $ q.defer（）;\r
          $超时（函数（）{\r
            //deferred.resolve(\"successful）;\r
            deferred.reject（失败）; //这里的决心失败\r
          }，2000）;\r
          返回deferred.promise;\r
        }]\r
      }，\r
      控制器：[$范围，数据，$状态功能（$范围，数据，$州）{\r
        $ scope.detailvm = {\r
          状态：$ state.current.name，\r
          数据：数据\r
        };\r
      }]\r
    }）;\r
  }\r
]）;

\r

＆LT;脚本SRC =htt​​p://ajax.googleapis.com/ajax /libs/angularjs/1.2.22/angular.min.js\"></script>\r
＆LT;脚本src=\"http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js\"></script>\r
\r
＆LT; D​​IV NG-应用=MyApp的＆GT;\r
  ＆LT; UI画面/＆GT;\r
＆LT; / DIV＆GT;

\r

\r
\r


解决方案

的问题是，如果任何在路由解析依赖的被拒绝的，控制器的的不会的被实例化。所以，你可以转换失败的数据，你可以在实例化的控制器检测。

例伪code： - 

 数据：[$ Q，$超时，$ HTTP功能（$ Q $超时，$ HTTP）{
      返回$超时（函数（）{//超时已经返回一个承诺
        //返回是;
        //返回失败成功
         返回成功？ {状态：真实，数据：数据} {状态：假}; //从这里返回一个状态
       }，2000）;
     }]

和在你的控制器： - 

 控制器：[$范围，数据，$状态功能（$范围，数据，$州）{
      //如果它未能
      如果（！data.status）{
        $ scope.error =一些错误;
       返回;
      }
        $ scope.detailvm = {
          状态：$ state.current.name，
          数据：数据
        };

如果你正在一个 $ HTTP 来电或类似的，你可以使用HTTP的承诺，即使在失败的情况下始终解析数据，并返回一个状态到控制器

例如： - 

 解析：{
        数据：[$ Q，$超时，$ HTTP功能（$ Q $超时，$ HTTP）{
           返回$ http.get（someurl）
             。然后（函数（）{返回{状态：真实，数据：是}，
                    功能（）{返回{状态：假}}）; //在出现故障的情况下，抓住它并序返回一个有效的数据控制器到达instantated
        }]
      }，

\r
\r

使用严格的;\r
\r
angular.module（'MyApp的，[ui.router]）。配置（[\r
  $ stateProvider\r
  $ urlRouterProvider\r
  功能（$ stateProvider，$ urlRouterProvider）{\r
    $ urlRouterProvider.otherwise（/项目）;\r
    $ stateProvider\r
    .STATE（名单，{\r
      网址：/项目，\r
      模板：'＆LT; D​​IV＆GT; {{错误}}＆LT; / DIV＆GT;＆LT; D​​IV＆GT; {{listvm}}＆LT; / DIV＆GT;' +\r
      '＆LT;一个UI的SREF =list.detail（{ID：8}）＆GT;转到孩子的状态和触发决心和LT; / A＆GT;' +\r
        '＆LT; UI画面/＆GT;，\r
      控制器：[$范围，$状态功能（$范围，$州）{\r
       $ scope.listvm = {状态：$ state.current.name};\r
      }]\r
    }）\r
    .STATE（list.detail，{\r
      网址：/（编号），\r
      模板：'＆LT; D​​IV＆GT; {{detailvm}}＆LT; / DIV＆GT;，\r
      解析：{\r
        数据：[$ Q，$超时，$ HTTP功能（$ Q $超时，$ HTTP）{\r
           返回$ http.get（/），那么（函数（）{返回{状态：真实，数据：是}}，（）的函数{返回{状态：假}}）。\r
        }]\r
      }，\r
      控制器：[$范围，数据，$状态功能（$范围，数据，$州）{\r
   \r
    \r
        $ scope.detailvm = {\r
          状态：$ state.current.name，\r
          数据：data.status？数据：糟糕的错误\r
        };\r
        \r
      }]\r
    }）;\r
  }\r
]）;

\r

＆LT;脚本SRC =htt​​p://ajax.googleapis.com/ajax /libs/angularjs/1.2.22/angular.min.js\"></script>\r
    ＆LT;脚本数据需要=角UI路由器@ *数据semver =0.2.10 src=\"//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js\"></script>\r
  ＆LT; D​​IV NG-应用=MyApp的＆GT;\r
      ＆LT; UI的视图＆gt;＆LT; / UI的视图＆gt;\r
    ＆LT; / DIV＆GT;

\r

\r
\r

I am using angular-ui-router's resolve to get data from server before moving to a state. Sometimes the request to the server fails and I need to inform the user about the failure. If I call the server from the controller, I can put then and call my notification service in it in case the call fails. I put the call to the server in resolve because I want descendant states to wait for the result from the server before they start.

Where can I catch the error in case the call to the server fails? (I have read the documentation but still unsure how. Also, I'm looking for a reason to try out this new snippet tool :).

"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>

解决方案

The issue is that if any of the dependencies in the route resolve is rejected, the controller will not be instantiated. So you could convert the failure to data that you can detect in the instantiated controller.

Example Pseudocode:- 

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

and in your controller:-

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

If you are making an $http call or similar you can make use of http promise to resolve the data always even in case of failure and return a status to the controller.

Example:-

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>

这篇关于如何处理在角UI路由器的决心错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆