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.

• Overview Of AngularJS
• Modules And Controller In AngularJS
• Controllers in AngularJS
• AngularJS ng src Directive
• AngularJS ng-Repeat Directive
• Handling Events In AngularJS
• How To Use Two-Way Data Binding In AngularJS
• Filters In AngularJS
• Sorting Data In AngularJS
• Sorting Rows By Table Header In AngularJS
• Creating Custom Filters In AngularJS
• ng-Hide And ng-Show In AngularJS
• ng-init Directive In AngularJS
• Search And MultiSearch In AngularJS
• ngInclude Directive In AngularJS
• $http Service In AngularJS
• Consuming ASP.NET WebService In AngularJS
• AnchorScroll Service In AngularJS
• AngularJS Page Refresh Problems
• RouteParams In AngularJS
• Angular AnchorScroll With Database Part
• AngularJS Routing Using WebService
• AngularJS Controller As Syntax
• AngularJS Nested Scopes And Controllers As Syntax
• AngularJS CaseSensitive And Inline Templates

Introduction

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



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,


Let’s run the Solution.



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.



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

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



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.





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



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



Conclusion

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