本文介绍了如何处理嵌套服务和使用决心和$ routeChangeError承诺的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这更像是一个研究,而我与AngularJS玩,我想和大家分享,因为我觉得有些人可能会觉得我这样做是很有用的。

That's more like a research I did while I was playing with AngularJS and I would like to share as I think some people might find this useful.

有时你需要实例化控制器之前从几个服务获取一些数据,显示视图。

Sometimes you need to fetch some data from several services before you instantiate the controller and render the view.

您可能也有一种情况,当某个服务等待另一个服务的响应 - 还挺嵌套的服务结构

You could also have a situation when a particular service is waiting for a response from another service - kinda of nested service structure.

在,你要确保,如果这些服务的任何失败,您将相应地处理错误之上。

On top of that you want to make sure that if any of these services fails you will handle the error accordingly.

推荐答案

模块对myApp 有叫服务 myFirstService mySecondService

如果你做任何服务未能通过拒绝吧:

If you make any of the services fail by rejecting it:

defer.reject("second Service Failed");

$ routeChangeError 事件被触发,并显示在控制台的用户的消息。

The $routeChangeError event is fired and a message is displayed to the user in the console.

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

这篇关于如何处理嵌套服务和使用决心和$ routeChangeError承诺的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-03 05:53