AngularJS route resolve

angularjs route resolve promise
angularjs routeprovider resolve promise
angularjs resolve promise example
angularjs $http resolve promise
angular resolve promise route
angular resolve promise before controller
angularjs route resolve promise example
angularjs routeprovider resolve controller

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.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

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", {
controller: "studentsController",
controllerAs: "studentsCtrl",
resolve: {
studentslist: function ($http) {
.then(function (response) {
})
}
}
})

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;

else
}

}

})

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,
The resolve property contains one or more promises that must resolve successfully before transitioning to the new route.
The property names used in the resolve property can then be injected into the controller. This means the controller does not have to fecth the data.

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

[komalmittal]

Vanket ji, Its really amazing!!!Thanks a lot.

[TheUmairkhan]

great vanket..that's awesome..God bless you..

[persistencej]

Your Tutorials are so helpful to the beginners ... Thanks a lot Venkat!

[arunp]

you r just n awesome teacher !
thank you very much :)

[imrulislam]

Is there example to use a progress bar when we change the route and resolve it, it will be very helpful if u show us.

[balamurukand]

Instead we can use service and inject the service in to the controller. Am I right Venkat

[josephregallis]

Internet Explorer works, Chrome does not for the /students route in Windows 10 Pro. No matter how I reload Chrome or close page and reopen, it shows search text box before loading the students list. It's like it caches the old information.

[kijidada]

Is there any way to use this property when I load controller explicitly.. i.e. if I declare the controller name using the ng-controller directive in the view itself...

[chtej]

Venkat, Videos are really good, Is the Source code available for download?

[anurag_official]

How to call Http method using routeParams inside resolve method, because resolve happens before routing so how to get routeParams value and then call http Method in resolvse?