How to handle nested services and promises using resolve and $routeChangeError

Question

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.

Ideally the question would look like something that a user actually asked. — Joachim Sauer, Sep 06 '13 at 15:38
I genuinely thought about that. And for most of the cases that applies. SO I decided to check the stackoverflow etiquette to make sure I wasn't doing something wrong. So I found this [link] http://meta.stackexchange.com/a/17851. _The community benefits from having a growing store of useful question/answer articles on this site. This is true regardless of whether the question and answer are provided by two different people or the same person._ — Denison Luz, Sep 06 '13 at 15:46
oh, absolutely! It's fine to provide question *and* answer! But even then, it would be preferable if the question where *phrased* as if an actual user was looking for the answer. In other words: it should be possible for others to answer your question as well! This also means that you should follow the normal guidelines for [tags-in-the-title](http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles) and nice-but-unnecessary-phrases. — Joachim Sauer, Sep 07 '13 at 06:16
Ah, I see! Point taken, Joachim! :) I'm relatively new to StackOverflow. I will try to improve my wording. Thanks for your helpful feedback and useful links. — Denison Luz, Sep 07 '13 at 06:23

Denison Luz · Accepted Answer · 2013-09-06T15:56:20.173

The module myApp has to services called myFirstService and mySecondService.

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

defer.reject("second Service Failed");

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>

dluz : You just answered one of my questions a few minutes ago (http://stackoverflow.com/questions/18667388/change-attribute-from-within-directive). So, I check you out and find you are pretty new to SO. Then, I see you providing info like this. Excellent stuff. Thanks for posting and I don't care that you created a question just to show the answer. This one helps me too. — Justin Noel, Sep 06 '13 at 23:35

How to handle nested services and promises using resolve and $routeChangeError

1 Answers1

Linked