AngularJS route resolve

Suggested Videos
Part 38 - AngularJS cancel route change
Part 39 - AngularJS route change events
Part 40 - AngularJS optional url parameters



In this video we will discuss resolve property. Let us understand the use of this property with an example. This is continuation to Part 40. Please watch Part 40 from AngularJS Tutorial before proceeding.



When we navigate to http://localhost/students, we see the list of student names. These names are coming from a database table. Since the database, the application and the client, all are running on my local machine the data loads really fast. If they are on different machines and if there is network latency, the data may take a few seconds to load.

Let us introduce artificial network latency, by including the following line in GetAllStudents() web method in StudentService.asmx

System.Threading.Thread.Sleep(2000);

After this change. Refresh the application. Navigate to /home and then to /students. Notice the route changes to /students immediately but the students data takes at least 2 seconds to load. So let us understand what's happening here. 

When we click on the Students link on the left, the route transition happens immediately, an instance of the students controller is created and the students view loads. By the time the view is loaded, the promise returned by the http service call to students service is not resolved. At the point when the promise is resolved, the data loads asynchronously and shows up in the view. Till then we will not see the students data on the students view.

If your requirement is not to transition to the new route until all promises are resolved you can take advantage of the resolve property of the route. Here are the steps to use the resolve property

Step 1 : Modify /students route. Notice we are using resolve property with /students route. This ensures that the promise returned by the http call is resolved before transitioning to the new route /students. studentsList property specified in the resolve property will have the student data and can be injected into the students controller.

.when("/students", {

    templateUrl: "Templates/students.html",

    controller: "studentsController",

    controllerAs: "studentsCtrl",

    resolve: {

        studentslist: function ($http) {

            return $http.get("StudentService.asmx/GetAllStudents")

                    .then(function (response) {

                        return response.data;

                    })

        }

    }

})

Step 2 : Modify the studentsController as shown below. Notice we are injecting studentslist property into students controller. This is the same property we used in resolve property in Step 1. studentslist property is then assigned as the value for students property on the view model (vm) object which the view expects. Since we already have the students data, there is no need to make another http call to the student service. Hence we deleted that http call from the students controller.

.controller("studentsController", function (studentslist, $route, $location) {

    var vm = this;

    vm.studentSearch = function () {

        if (vm.name)

            $location.url("/studentsSearch/" + vm.name)

        else

            $location.url("/studentsSearch")

    }

    vm.reloadData = function () {

        $route.reload();

    }

    vm.students = studentslist;

})

With these 2 changes in place. Refresh the app. Navigate to /home and then to /students. Notice this time, the app does not transition to /students (new route) until the promise is resolved and the data is available. Upon the data becoming available the app transitions to the new route and the data is shown immediately.

So in summary, 
1. The resolve property contains one or more promises that must resolve successfully before transitioning to the new route.
2. The property names used in the resolve property can then be injected into the controller. This means the controller does not have to fetch the data.