AngularJS $routeParams 解析和承诺

Question

所以...我正在尝试学习一些 Angular 的东西，然后我就陷入了困境。在我的应用中，我使用了第三方 API，所以我不能依赖 $http，这就是为什么你会在代码中看到 $apply。

所以，基本上我有这个：

.when('/dashboard',{
  controller : 'DashboardController',
  templateUrl : 'ui/modules/dashboard/dashboard.html',
  resolve : {
    data : function(myService){
      return myService.start();
    }
  }
})

到目前为止，没有什么奇怪的。这种方法应该有一个承诺，对吧？启动函数如下：

var start = function(){
  return initializeConnection().then(function(){
    return login(false);
  });
};

所以，基本上，如果一切正常，一切正常。那太棒了。问题是，如果我在第二个函数（即login）上得到承诺拒绝，我将无法捕捉到其中的错误，这是我在应用程序顶部创建的AppController（所以它总是实例化）：

$rootScope.$on("$routeChangeError", function (event, previous, current, rejection) {
  console.log('Failing');
});

这基本上从来没有被调用过。我尝试过的一个可行的解决方案是从 start 函数返回一个 Promise，然后如果这些异步函数中的任何一个失败，则返回的 Promise 失败。但在我看来，这应该是不必要的。

你能指出我正确的方向吗？

Answer 1

在您的代码中，如果您收到 promise 拒绝，DashboardController 永远不会被实例化并且您的视图永远不会被加载 - 所以您无能为力。你需要有一个控制器，即使你的承诺被拒绝，它也会被实例化。

我认为您可以创建一个控制器来处理像$routeChangeError 这样的全局事件。我在下面创建了一个名为 checkConnection 的函数，它将分配给应用程序的根元素。

var myApp = angular.module('myApp', []);

myApp.config(function($routeProvider){
  $routeProvider
    .when('/dashboard',{
      controller : 'DashboardController',
      templateUrl : 'ui/modules/dashboard/dashboard.html',
      resolve : {
        data : function(myService){
          return myService.start();
        }
      }
    })
});


myApp.controller('checkConnection', function ($rootScope){
    $rootScope.$on("$routeChangeError", function (event, previous, current, rejection) {
      console.log('Failing');
    });
});

myApp.controller('DashboardController', function($rootScope) {
    // code for your controller goes here
});

在您的 index.html 中，您将拥有：

<div ng-app="myApp" ng-controller="checkConnection">
    <ng-view></ng-view>
</div>

控制器checkConnection 无论如何都会被实例化——所以你可以依靠它来处理错误。

如果没有发生错误，则您正在访问的路由的特定控制器（例如：DashboardController）将正常执行并加载您的视图。

还有改进的余地，但我认为这对你有用。

希望对您有所帮助或至少为您指明正确的方向。