Based on AngularJS, the function of automatically loading data by Page scrolling is realized.

Based on AngularJS, the function of automatically loading data by Page scrolling is realized.

To implement this function, you can achieve it through the third-party control of the https://github.com/sroze/ngInfiniteScroll. The procedure is as follows:

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

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

3. Introduce script in HTML

<Script type = 'text/javascript 'src = 'path/to/jquery. min. js'> </script>
<Script type = 'text/javascript 'src = 'path/to/angular. min. js'> </script>
<Script type = 'text/javascript 'src = 'path/to/ng-infinite-scroll.min.js '> </script>

4. The sample HTML 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. The PostListController. js code is as follows:

Var ftitAppModule = angular. module ('ftidapp', ['infinite-scroll ']); ftitAppModule. controller ('postlistcontroller', function ($ scope, Demo) {$ scope. demo = new Demo () ;}); // create the ftitAppModule of the Background Data Interaction factory. 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 ;});

In this way, data is automatically loaded from the server after the page is dragged to the end.

PS: The loading and execution process of AngularJS

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

2. Start AngularJS and search for all the commands (directive)

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

4. AnguarJS traverses all sub-components and searches for commands and bind commands.

5. Each time ng-controller or ng-repeart is found, it creates a scope, which is the context of the component. The scope specifies each DOM component's access to functions and variables.

6. AngularJS then adds a listener to the variable and monitors the current value of each variable. Once the value changes, AngularJS will update its display on the page.

7. AngularJS optimizes the algorithm for checking variables. It checks data updates only when some special events are triggered, rather than simply polling in the background.