AngularJS实现分页显示数据库信息

下面是AngularJS实现分页显示数据库信息的完整攻略：

1. 编写后端接口

首先需要编写一个后端接口，用于从后端服务器获取数据库中的信息。这可以使用任何后端语言来完成，如Java、Node.js、PHP等。例如，我们使用Node.js 和 Express框架编写一个获取所有数据的接口：

const express = require('express');
const app = express();
const port = 3000;

app.get('/api/data', (req, res) => {
  const data = [
    { name: 'Tom', age: 20 },
    { name: 'Jerry', age: 18 },
    // ...
  ];
  res.send(data);
});

app.listen(port, () => console.log(`Server listening on port ${port}!`));

2. 在前端页面中调用后端接口

接下来，在AngularJS中编写代码来调用后端接口，获取数据并展示在前端页面。这可以使用 $http 服务来实现：

app.controller('myCtrl', function($scope, $http) {
  $http.get('/api/data').then(function(response) {
    $scope.data = response.data;
  });
});

3. 分页显示数据

为了分页显示数据，我们需要在前端页面中编写一些额外的代码来实现。使用 ng-repeat 指令来循环展示数据，并通过使用 limitTo 和 slice 过滤器来进行分页。

<ul>
  <li ng-repeat="d in data | limitTo:itemsPerPage:offset">{{d.name}} - {{d.age}}</li>
</ul>

<button ng-click="prevPage()" ng-disabled="currentPage == 0">上一页</button>
<button ng-click="nextPage()" ng-disabled="currentPage >= items.length/itemsPerPage - 1">下一页</button>

在上面的代码中，我们使用 itemsPerPage 和 offset 指令来控制每页显示的数据条数和当前页码。还需要在控制器中编写 prevPage() 和 nextPage() 方法来实现翻页功能：

app.controller('myCtrl', function($scope, $http) {
  $scope.currentPage = 0;
  $scope.itemsPerPage = 3; // 每页显示3条数据
  $scope.offset = 0;

  $http.get('/api/data').then(function(response) {
    $scope.data = response.data;
    $scope.items = Array.from(Array(Math.ceil($scope.data.length/$scope.itemsPerPage)).keys());
  });

  $scope.nextPage = function() {
    if ($scope.currentPage < $scope.items.length-1) {
      $scope.currentPage++;
      $scope.offset = $scope.currentPage * $scope.itemsPerPage;
    }
  };

  $scope.prevPage = function() {
    if ($scope.currentPage > 0) {
      $scope.currentPage--;
      $scope.offset = $scope.currentPage * $scope.itemsPerPage;
    }
  };
});

在上面的代码中，我们在获取数据之后初始化了一些变量，$scope.items 数组的长度表示总共有几页数据。prevPage() 方法和 nextPage() 方法用于切换页码，并更新 offset 变量的值。

4. 示例说明

以下是两个简单的示例说明，使用此方法来分页显示数据库中的数据。

示例一：

以获取GitHub中angular官方文档的目录和内容数据为例：

app.controller('docCtrl', function($scope, $http) {
  $scope.currentPage = 0;
  $scope.itemsPerPage = 10; // 每页显示10条数据
  $scope.offset = 0;

  $http.get('https://api.github.com/repos/angular/angular.io/contents/public/docs').then(function(response) {
    $scope.docs = response.data;
    $scope.items = Array.from(Array(Math.ceil($scope.docs.length/$scope.itemsPerPage)).keys());
  });

  $scope.nextPage = function() {
    if ($scope.currentPage < $scope.items.length-1) {
      $scope.currentPage++;
      $scope.offset = $scope.currentPage * $scope.itemsPerPage;
    }
  };

  $scope.prevPage = function() {
    if ($scope.currentPage > 0) {
      $scope.currentPage--;
      $scope.offset = $scope.currentPage * $scope.itemsPerPage;
    }
  };
});

在上面的代码中，我们使用GitHub的API来获取所有文档目录。另外，GitHub API遵循RESTful规范，可以获得的数据量、数据种类和数据结构很丰富。

示例二：

以获取一个网站免费英雄联盟（LOL）的数据为例。

app.controller('lolCtrl', function($scope, $http) {
  $scope.currentPage = 0;
  $scope.itemsPerPage = 10; // 每页显示10条数据
  $scope.offset = 0;

  $http.get('https://lol.qq.com/biz/hero/champion.js').then(function(response) {
    const data = JSON.parse(response.data.substring(response.data.indexOf('=')+1, response.data.length-2));
    $scope.champions = Object.keys(data.data).map(name => data.data[name]);
    $scope.items = Array.from(Array(Math.ceil($scope.champions.length/$scope.itemsPerPage)).keys());
  });

  $scope.nextPage = function() {
    if ($scope.currentPage < $scope.items.length-1) {
      $scope.currentPage++;
      $scope.offset = $scope.currentPage * $scope.itemsPerPage;
    }
  };

  $scope.prevPage = function() {
    if ($scope.currentPage > 0) {
      $scope.currentPage--;
      $scope.offset = $scope.currentPage * $scope.itemsPerPage;
    }
  };
});

在上面的代码中，我们使用LOL的官方数据接口来获取所有英雄，然后在前端页面中进行分页展示。

以上就是AngularJS实现分页显示数据库信息的完整攻略。