The Resolve Experience

Just to be clear: This article is about AngularJS’s resolve feature. Specifically, the experience it gives the user as opposed to when you do not use it.

If you have ever worked with AngularJS, I bet you have had to fetch some information as soon as you enter a view, like this:

app.controller('AwesomeViewCtrl', ['$scope', '$resource', function($scope, $resource){
    $scope.items = $resource('/api/items').query();
}]);

The more design-inclined of you may have noticed that it didn’t look so awesome when the page appears blank, and then suddenly fills up with whatever data you have designated to the view. Even though the user might not even realize it, they are left wondering – if only just for a little while – if the page is just empty, or something went wrong. If the resource you get the information from is particularly slow that moment (or even down), the user might even leave the page, not having received the message you wanted to share. That is unacceptable.
Here is where the AngularJS resolve feature comes in. AngularJS’s resolve is a clever part of the $routeProvider API. This feature enables you to get the information needed BEFORE entering the view, enabling you to inform the user that the information is being fetched, and they should sit tight for a spell. So, where in code example 1 we fetched the information AFTER entering the view, we would now write:

app.controller('AwesomeViewCtrl', ['$scope', 'items', function($scope, items){ 
    $scope.items = items; 
}]);

But where do we get items from? The answer: dependency injection. Dependency injection is how the $routeProvider passes the resolved information along. In your angular app’s .config-step, where you define your routes, you would write:

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
        .when('/awesome', { 
            templateUrl: '/partials/awesome.html', 
            controller: 'AwesomeViewCtrl', 
            resolve: { 
            items: ['$resouce', function($resource) { 
                // Here you can initiate a loading animation or progress bar 
                return $resource('/api/items').query(function() { 
                    // In the success handler, you can disable the loading animation 
                }, function() { 
                    // In the error handler, you can disable the loading animation 
                    // and tell the user that something went wrong. 
                }); 
            }] 
        } 
    }) 
    .otherwise({ 
        // Some stuff you want to do if the user accesses a wrong URL. 
    }); 
}]);

Using resolve will – in short – delay a page change before we have the information in our hands, resulting in a more smooth page transition, and a user that is satisfied knowing that SOMETHING is happening. You, as a programmer, of course, know that there is no difference between the two scenarios. The user gets the information when it is ready. That cannot be changed. But now the user can SEE that the information is loading, which delights them to no end.