Tuesday, 4 April 2017

How to reload the current route instead of entire app ?


Overhead with Page refresh
The route displayed currently can be populated with latest data (if there are frequent changes in backend/DB) using Page refresh (F5)
But it will also reload all the resources - JS, css etc.

Better way is to use $route.reload() method to reload specific route.


$route.reload()
JS (Add a function to reload the route)

app.controller("homeController", function ($scope) {
   this.message = "Welcome to Home page"
;
});

app.controller("trainingController", function ($scope) {
   this.trainings = ["AngularJS", "HTML", "CSS", "Javascript"]
;
});

app.controller("studentController", function ($route, $http) {
   var curr = this;

   curr.reloadData = function() {
      $route.reload();
   }

   $http.get("service/api/GetAllStudents").then(
     function(response) {
        curr.students = response.data
;
     }

   )
});



TEMPLATE (Add a button on template to reload the route)
students.html
<h1>Student List</h1>
<ul>
   <li ng-repeat="student in studentCrtl.students">
        <a href="students/{{student.id}}">
            {{ student.name }}
       </a>
   </li>
</ul>


<button ng-click="studentCrtl.reloadData()">Reload data</button>


No comments:

Post a Comment

Note: only a member of this blog may post a comment.