在现代Web开发中，AngularJS作为一个流行的前端框架，提供了丰富的功能，方便开发者构建复杂的单页面应用程序（SPA）。其中，页面滚动到底部时自动加载更多数据的需求在很多应用场景中都非常常见，如文章列表、商品列表等。实现该功能不仅能改善用户体验，还能根据用户的实际需要动态地加载数据，避免一次性加载过多无用信息，减少服务器负担。
本文介绍如何使用AngularJS结合第三方控件ngInfiniteScroll来实现页面滚动到底部自动加载数据的功能。需要下载ngInfiniteScroll组件，并在项目中引入必要的JavaScript库，包括jQuery、AngularJS以及ngInfiniteScroll。特别需要注意的是，如果使用jQuery 2.0以上版本，需要对ngInfiniteScroll组件进行一些简单的修改，将所有的$window.xxx改为$(window).xxx，以及将elem.xxx改为$(elem).xxx，以保证与jQuery的兼容性。
在HTML页面中，通过在控制滚动加载的div元素上设置`infinite-scroll`指令，指定当滚动到底部时需要调用的方法`demo.nextPage()`，以及`infinite-scroll-disabled`指令来禁用加载，防止在数据加载过程中重复触发。当用户滚动到页面底部时，`infinite-scroll-distance`可以控制距离底部多远开始触发加载。使用`ng-repeat`指令来展示从服务器加载的数据项。通过在页面上使用`ng-show`指令，可以展示一个加载中的提示，告诉用户正在加载数据。
在JavaScript中，通过AngularJS的模块和控制器管理应用逻辑。首先定义一个AngularJS模块`ftitApp`，并引入`infinite-scroll`模块。控制器`PostListController`负责处理视图和模型之间的交互。在控制器中，创建一个`Demo`实例，包含页面数据和加载状态，并定义`nextPage`方法来处理从服务器获取数据的逻辑。
`Demo`工厂负责与后端进行数据交互，通过$http服务发起JSONP请求来获取数据。需要注意的是，如果是在本地开发或有跨域限制的环境下，JSONP请求是一种有效的解决方案。`nextPage`方法中，每次成功加载数据后，将新数据项添加到`items`数组中，并更新`page`信息以便于下次加载更多数据。同时，如果页面滚动到底部，但数据还在加载中（`busy`属性为true），则不触发新加载。这种方法避免了在数据还未加载完成时重复发起请求。
此外，本文还简单介绍了AngularJS的加载执行过程，分为三个阶段：首先HTML页面加载，触发页面内所有JS文件的加载；接着AngularJS启动，搜寻页面中的所有指令；最后找到`ng-app`指令，加载指定的模块，并启动整个应用。了解这个过程可以帮助开发者更好地理解AngularJS的工作机制，从而在开发过程中做出更加合理的应用架构设计。
AngularJS的插件生态非常丰富，ngInfiniteScroll就是其中之一。它通过简单的配置和少量的代码就可以实现复杂的功能，极大地提高了开发效率和用户体验。在使用类似插件时，开发者应当关注其版本更新、兼容性问题以及是否符合项目需求，确保整个应用的稳定性和性能。
