AngularJS Route Resolve

Overview

In this article, we will see AngularJS Route Resolve and its various problems, with an example. We will work with the same example which we were working with in earlier articles' demo applications.

For more articles on AngularJS, refer these links.

Introduction

As we are continuing with the same example, here is the list of students.

output

Here, the database and application are on same machine. So, the data fetched from our web service is very fast. What if these are residing on different servers ? We will check the data transfer rate. Here, we will use some network latency to do that, using thread. Sleep in your web service as,
code

Let’s run the Solution.

output

Initially, when I clicked on Student Controller, the data didn’t appear because we have written thread.sleep in our web method. Also, you can look at the Controller where we have written a promise function. When that promise is resolved, it will load the data.

code

After a certain interval, we get the list of students.

Why? Because it has resolved the promise function and displayed the list of students.

output

Now, as our data is fetched asynchronously, we will write a resolve in our student’s Controller, and will write a function that will have a promise.

.when("/students", {
templateUrl: "Templates/students.html",
controller: "studentsController as studentsCtrl",
resolve: {
studentsList: function ($http) {
return $http.get("StudentService.asmx/GetAllStudents")
.then(function (response) {
return response.data;
})

Now, look at the studentsController. Here, we have used a resolve and assigned the resolve to students List. The function had a promise. So, when that promise is resolved by the route, it will load the data.

So, we removed that variable vm which we did use earlier. Here, when the promise is resolved, it will respond to that data which is coming from the web service method we used in our web service.

Now, let's move to the next change. As this is coming from studentsController, we need to assign those in the parameter which we used in studentsList, and remove $http too as we are resolving those requests.

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

Now, assign it to the vm variable.

vm.students = studentsList;

So, our final Controller code is.

/// <reference path="angular.min.js" />
/// <reference path="angular-route.min.js" />
var app = angular.module("Demo", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.caseInsensitiveMatch = true;
$routeProvider
.when("/home", {
template: "<h1>Hello There !!</h1>",
controller: "homeController as homeCtrl"
})
.when("/courses", {
templateUrl: "Templates/courses.html",
controller: "coursesController as coursesCtrl",
})
.when("/students", {
templateUrl: "Templates/students.html",
controller: "studentsController as studentsCtrl",
resolve: {
studentsList: function ($http) {
return $http.get("StudentService.asmx/GetAllStudents")
.then(function (response) {
return response.data;
})
}
}
})
.when("/students/:id", {
templateUrl: "Templates/StudentDetail.html",
controller: "StudentDetailController as StudentDetailCtrl"
})
.when("/studentsSearch/:name?", {
templateUrl: "Templates/studentsSearch.html",
controller: "studentsSearchController as studentsSearchCtrl"
})
.otherwise({
redirectTo: "/home"
})
$locationProvider.html5Mode(true);
})
.controller("homeController", function () {
this.message = "Home Page";
})
.controller("coursesController", function () {
this.courses = ["c#", "SQL", "Oracle"];
})
.controller("studentsController", function (studentsList, $route, $location) {
var vm = this;
vm.searchStudents = function () {
if (vm.name) {
$location.url("/studentsSearch/" + vm.name);
}
else {
$location.url("/studentsSearch/" );
}
}
vm.reloadData = function () {
$route.reload();
}
vm.students = studentsList;
})
.controller("StudentDetailController", function ( $http, $routeParams) {
var vm = this;
$http({
url: "StudentService.asmx/GetStudents",
params: { id: $routeParams.id },
method:"get"
})
.then(function (response) {
vm.student = response.data;
})
})
.controller("studentsSearchController", function ($http, $routeParams) {
var vm = this;
if ($routeParams.name) {
$http({
url: "StudentService.asmx/GetStudentsByName",
params: { name: $routeParams.name },
})
.then(function (response) {
vm.students = response.data;
})
}
else {
$http.get("StudentService.asmx/GetAllStudents")
.then(function (response) {
vm.students = response.data;
})
}
});

Let’s save the changes and run the application.

output

Initially, we are on the home Controller. Let's click on the studentsController and see what happens.

output

When I click on the studentsController, look at the URL (above screenshot). It shows students but the data is not loaded. When a promise is resolved, it requests to the service and after certain time, the data is loaded.

NOTE

So, 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 fetch the data.

Output

output

Conclusion

So, this was all about Route Resolve in AngularJS. Hope this article was helpful!!!