4

这更像是我在玩 AngularJS 时所做的一项研究，我想分享一下，因为我认为有些人可能会觉得这很有用。

有时您需要在实例化控制器和渲染视图之前从多个服务中获取一些数据。

当特定服务正在等待另一个服务的响应时，您也可能遇到这种情况 - 有点嵌套服务结构。

最重要的是，您要确保如果这些服务中的任何一个失败，您将相应地处理错误。

4

1 回答 1

2

该模块myApp必须调用myFirstService和服务mySecondService。

如果您通过拒绝任何服务失败：

defer.reject("second Service Failed");

触发事件$routeChangeError并在控制台中向用户显示一条消息。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>myApp</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js">    </script>

  <script>

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

    myApp.config(function($routeProvider){
      $routeProvider
        .when('/', 
         {
           controller: 'ViewCtrl',
           templateUrl: 'view/app.html',
           resolve: {
           loadData: function(myFirstService){
           return myFirstService.start();
         }
        }
      })
    });

   var appCtrl = myApp.controller('AppCtrl', function($scope, $rootScope){
     $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){

       console.log('Some service has failed: ', rejection);

     });
   });

   var viewCtrl = myApp.controller('ViewCtrl', function($scope, $route){

      $scope.feedback = {
        message: 'All the services are working!'
      }

    });

    myApp.factory('myFirstService', ['$q', '$timeout','mySecondService', function($q, $timeout, mySecondService) {
      var defer = $q.defer();

      return {

        start: function() {

          $timeout(function(){
            defer.resolve('FIRST Service \'myFirstService\' Failed');
          }, 2000);

          return mySecondService.start().then(function(){
           return defer.promise
       });

       }
     }
    }]);


    myApp.factory('mySecondService', ['$q', '$timeout', function($q, $timeout) {
      var defer = $q.defer();

      return {

        start: function() {

         $timeout(function(){
            defer.resolve("second Service Failed");
         }, 2000);

         return defer.promise;

       }
      }
    }]);

  </script>

</head>
<body ng-app="myApp" ng-controller="AppCtrl">

  <script id="view/app.html" type="text/ng-template">

    <h1>{{ feedback.message }}</h1>

  </script>

  <div ng-view></div>

</body>
</html>
于 2013-09-06T15:29:08.350 回答