Implementing the function of automatically loading data when the page scrolls to the end based on AngularJS_AngularJS

To implement this function, you can use the third-party control https://github.com/sroze/ngInfiniteScroll. The steps are as follows:

1. Download the ng-infinite-scroll.js program http://sroze.github.io/ngInfiniteScroll/ The current version is 1.0.0

2. If you are using jQuery2.0 or above , you also need to modify the ng-infinite-scroll.js program and change all $window.xxx to $(window) .xxx, elem.xxx changed to $(elem).xxx

3. Introduce script

into HTML

b30fad698bf785b78893da36cc4872f72cacc6d41bbb37262a98f745aa00fbf0
86ae84ff18d651e1e3aa7ff8c065d1052cacc6d41bbb37262a98f745aa00fbf0
58da80a78921fb5d05a46970577c0d122cacc6d41bbb37262a98f745aa00fbf0

4. HTML sample code is as follows:

 <div ng-controller='PostListController'>
   <div infinite-scroll='demo.nextPage()' infinite-scroll-disabled='demo.busy' infinite-scroll-distance=''>
     <div ng-repeat='item in demo.items'>
       <p>
         <input type="hidden" value="{{item.PostId}}" />
         <label>{{item.WriterName}}</label>
         <label>{{item.WriterMail}}</label>
         <label>{{item.WreckerName}}</label>
         <label>{{item.StartDate}}</label>
         <label>{{item.Location}}</label>
         <label>{{item.Story}}</label>
       </p>
     </div>
     <div ng-show='demo.busy'>Loading data...</div>
   </div>
 </div>

5. PostListController.js code is as follows:

 var ftitAppModule = angular.module('ftitApp', ['infinite-scroll']);
 ftitAppModule.controller('PostListController', 
   function ($scope, Demo) {
     $scope.demo = new Demo();
 });
 // 创建后台数据交互工厂
 ftitAppModule.factory('Demo', function ($http) {
   var Demo = function () {
     this.items = [];
     this.busy = false;
     this.after = '';
     this.page = ;
   };
   Demo.prototype.nextPage = function () {
     if (this.busy) return;
     this.busy = true;
     var url = "http://...:/api/post/nextpage?id=" + this.page + "&callback=JSON_CALLBACK";
     $http.jsonp(url).success(function (data) {
       var items = data;
       for (var i = ; i < items.length; i++) {
         this.items.push(items[i]);
       }
       this.after = "t_" + this.items[this.items.length - ].id;
       this.busy = false;
       this.page += ;
     }.bind(this));
   };
   return Demo;
 });

This realizes the function of automatically loading data from the server after the page is dragged to the end.

PS: AngularJS loading execution process

1. Loading of the HTML page, which will trigger the loading of all JS (including AngularJS) contained in the page

2. Start AngularJS and search for all directives

3. Find ng-app, search for its specified module (Module), and attach it to the component where ng-app is located.

4. AnguarJS traverses all sub-components, looking for instructions and bind commands

5. Every time ng-controller or ng-repeat is found, it will create a scope, which is the context of the component. Scope specifies the access rights of each DOM component to functions and variables.

6. AngularJS will then add listeners to the variables and monitor the current value of each variable. Once the value changes, AngularJS updates its display on the page.

7. AngularJS has optimized the algorithm for checking variables. It will only check for data updates when certain special events are triggered, instead of simply polling continuously in the background.