Post
Ask Question

Angular Routing Service reload() Method

AngularJS $route service reload() method is useful when you want to reload just the current route instead of the entire application. 

This is often with AngularJS that when we are updating or inserting the data into a table and fetch the data from the table, the HTML view of the angular js app is not refreshed no matter what how many time we clicked the specific link untill or unless we clicked on the refresh button of the browser. The downside of this approach is that we are uploading the whole application rather than the specific section. This can prove by using the developer tool --> network section that displayed how may request are issued and how much amount of data is reloaded to update HTML view.

By using the route service reload() method we can achieve the same with only one single request instead of the whole bunch of data to be reload. The below code fragment will let you understand that how to use the reload() method of $route service of AngularJS .

for example in my angular app we have a controller named membersController, which actually fetch the data from the web service with the help of $http service of AngularJS . To use the $route service reload method, inject $route service into your controller and call the reload() method of the service.

 

  1. // Controller Code  
  2. .controller("membersController", function($http, $route)  
  3. {  
  4.     var viewModel = this;  
  5.     viewModel.reloadData = function()  
  6.     {  
  7.         $route.reload();  
  8.     }  
  9.     $http.get("MemberService.asmx/GetAllMembers")  
  10.         .then(function(response)  
  11.         {  
  12.             viewModel.members = response.data;  
  13.         })  
  14.     // now the reloadData property is available to the controller and we can use this property in HTML view using below code snippet.  
  15.     <!-- HTML View -->  
  16.     //Create a button which calls the reloadData() method onclick event  
  17.     <  
  18.     button ng - click = "membersController.reloadData()" > Reload Data < /button>  

 

Now insert a record into your table and then click on the Reload Data button on HTML View. Goto the Developer tool --> Network section and see how less is data transferred between request response cycle.