zoukankan      html  css  js  c++  java
  • part 36 AngularJS route reload

    In this video we will discuss angular route service reload() method. This method is useful when you want to reload just the current route instead of the entire app. Let us understand this with an example. 



    We will continue with the same example that we have been working with in the previous videos. When we navigate to http://localhost/students we see the list of students. Notice that when you click on the same students link, nothing happens. This means if we insert a new record in the database table and issue a request to the same route, you may not see the new records. 

    One of the ways to see the new data is by clicking on the browser refresh button. The downside of this is that the entire app is reloaded. This means all the resources required to run your app will be reloaded. You can see all the resource requests made on the network tab in the browser developer tools. 

    The other way is to reload just the current route. Here are the steps. 

    Step 1 : Modify the studentsController function in script.js

    .controller("studentsController", function ($http, $route) {
        var vm = this;
     
        vm.reloadData = function () {
            $route.reload();
        }
     
        $http.get("StudentService.asmx/GetAllStudents")
                    .then(function (response) {
                        vm.students = response.data;
                    })
    })


    Please note : 
    1. $route service in injected in the controller function
    2. reloadData() function is attached to the view model (vm) which will be available for the view to call. This method simply calls reload() method of the route service. 

    Step 2 : Modify the partial template (students.html). Please note that we have included a button which calls reloadData() method when clicked. 

    <h1>List of Students</h1>
    <ul>
        <li ng-repeat="student in studentsCtrl.students">
            <a href="students/{{student.id}}">
                {{student.name}}
            </a>
        </li>
    </ul>
    <button ng-click="studentsCtrl.reloadData()">Reload</button>


    At this point
    1. Run the app
    2. Navigate to http://localhost/students. You should see list of students.
    3. Insert a new record in the database table
    4. Open browser developer tools
    5. Click the Reload button 

    There are 2 things to notice here
    1. The newly added record will be shown on the view
    2. Only the resources required to reload the current route are requested from the server

  • 相关阅读:
    【C语言入门教程】5.1 函数说明 与 返回值
    【C语言入门教程】4.10 综合实例
    【C语言入门教程】4.9 指向指针的指针
    【C语言入门教程】4.8 指针数组
    【C语言入门教程】4.7 指针的地址分配
    Windows 7 共享文件夹 给 VirtualBox 中的 Ubuntu 14
    【C语言入门教程】4.6 指针 和 数组
    Ubuntu 12/14 个性化配置
    【C语言入门教程】4.5 指针变量的定义与引用
    【C语言入门教程】4.4 指针 与 指针变量
  • 原文地址:https://www.cnblogs.com/gester/p/6535412.html
Copyright © 2011-2022 走看看