A Responsive Blogger Website, That Take my blog to the next level.

I am a Software Developer, Learning and experementing with .Net Technology and try to put my Learning altogether here.

We have all sections related to .Net Technology, like .Net-C#, Asp.Net, MVC, jQuery, AngularJs, Sharepoint. Find out more...

Following are the some of the Advantages of using this Web site :-

  • Get Update about latest in .Net world.
  • Collection of Useful, Frequently used .Net Solutions.
  • It’s beautiful on every screen size (try resizing your browser!)

AngularJS route resolve

In this tutorial we will discuss resolve property. Let us understand the use of this property with an example. This is continuation of our previous tutorial. 

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


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 resol ve 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)

    vm.reloadData = function () {

    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.


Tejuteju said...

It is nice blog Thank you provide important information and I am searching for the same information to save my time AngularJS4 Online Training