4

これは、私が AngularJS で遊んでいたときに行った調査に近いものであり、これが役立つと思う人もいると思うので共有したいと思います。

コントローラーをインスタンス化してビューをレンダリングする前に、複数のサービスからデータをフェッチする必要がある場合があります。

また、特定のサービスが別のサービスからの応答を待っている状況 (ネストされたサービス構造のようなもの) が発生する可能性もあります。

その上で、これらのサービスのいずれかが失敗した場合に、それに応じてエラーを処理することを確認する必要があります。

4

1 に答える 1

2

モジュールは、および とmyApp呼ばれるサービスを必要とします。myFirstServicemySecondService

いずれかのサービスを拒否して失敗させた場合:

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 に答える