AngularJS + ASP.NET Web API：使用服务器端分页、排序和搜索在 AngularJS 中构建一个简单的网格（第 4 部分）

在上一篇博文中，我实现了分页。在这篇博文中，我们将实现一个名为angular-loading-bar的精巧的 Angular 插件。但在我们继续之前，我想纠正上一篇博文中的一个问题。在students.tpl.html文件中，我们添加了分页指令如下

<pagination data-total-items="totalItems" ng-model="currentPage" data-max-size="NumberOfPageButtons" 
class=" pagination-sm" data-boundary-links="true" data-rotate="false" ng-change="pageChanged()" 
data-items-per-page="recordsPerPage"></pagination>

虽然这可以正常工作，但它将无法通过 HTML 验证，并且您可能注意到“pagination”下方有波浪线。这让我感到非常困扰，因此为了纠正这个问题，将分页自定义标签转换为span，然后使用属性来初始化分页自定义指令，如下所示

<span data-pagination data-total-items="totalItems" data-ng-model="currentPage" 
data-max-size="NumberOfPageButtons" class=" pagination-sm" data-boundary-links="true" 
data-rotate="false" data-ng-change="pageChanged()" data-items-per-page="recordsPerPage"></span>

现在我们解决了这个问题，让我们去加载条的主页，看看我们将要使用的加载条。当此页面加载时，您可能看到蓝色条从屏幕左侧向右侧运行。我们将把它整合到我们的应用程序中，以便每次由于 XHR 请求而出现延迟时，加载条都会显示出来。

如果您还记得，在第一篇博文中，我们确保loading-bar.js和loading-bar.css被包含在页面中。现在，我们只需要将其作为依赖项注入即可。

我们这样做如下

angular.module('ngWebApiGrid.student', ['ngRoute', 'ui.bootstrap', 'chieffancypants.loadingBar'])
    .config(["$routeProvider", function($routeProvider) {
        $routeProvider.when("/", {
            controller: "studentCtrl",
            templateUrl: "app/simpleGrid/students.tpl.html"
        });

        $routeProvider.otherwise("/");
    }])

完成了！现在，当您（例如）翻页浏览记录时，您应该会在顶部看到加载条出现。

目前，我们使用了默认配置，这似乎对我们的目的来说很好，但请随意尝试——文档记录非常完善，因此应该很容易配置。

像往常一样，代码在这里，您可以查看我在本篇博文中进行的更改在此提交中查看。

关注 @sangymohan