Как сделать пагинацию на angular?

Question

[mihailsmirnov]

Начал изучать angularJS, в дальнейшем планирую перенос проекта с php на angular

Делаю по этому уроку.

Все нормально работает, кроме пагинации, точнее ее там совсем нет.
Пример контроллера из урока:

yii2AngApp_film.controller('index', ['$scope', '$http', 'services', 
    function($scope,$http,services) {
    $scope.message = 'Everyone come and see how good I look!';
    services.getFilms().then(function(data){
        $scope.films = data.data;
    });    
    $scope.deleteFilm = function(filmID) {
        if(confirm("Are you sure to delete film number: " + filmID)==true && filmID>0){
            services.deleteFilm(filmID);    
            $route.reload();
        }
    };
}])

Нагуглил пример пагинации, переделал контроллер:

yii2AngApp_film.controller('index', ['$scope', '$http', 'services',
    function($scope,$http,services) {

        $scope.message = 'Everyone come and see how good I look!',
        $scope.filteredFilms = [],
        $scope.currentPage = 1,
        $scope.numPerPage = 6,
        $scope.maxSize = 3;

        services.getFilms().then(function(data){
            $scope.films = data.data;
        });
        $scope.deleteFilm = function(filmID) {
             if(confirm("Are you sure to delete film number: " + filmID)==true && filmID>0){
                services.deleteFilm(filmID);
                $route.reload();
            }
        };
        $scope.numPages = function () {
            return Math.ceil($scope.films.length / $scope.numPerPage);
        };

        $scope.$watch('currentPage + numPerPage', function() {
            var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                , end = begin + $scope.numPerPage;
            $scope.filteredFilms = $scope.films.slice(begin, end);
        });
    }])

во вьшке вывожу массив filteredFilms, но он оказывается пустой.

<div ng-show="filteredFilms.length > 0">
        <a class="btn btn-primary" href="#/film/create">
            <i class="glyphicon glyphicon-plus"></i> Добавить
        </a>
        <table class="table table-striped table-hover">
            <thead>
            <th>Название</th>
            <th>Режиссер</th>
            <th>Описание</th>
            <th>Год</th>
            <th style="width:80px;">Действия&nbsp;</th>
            </thead>
            <tbody>
            <tr ng-repeat="data in filteredFilms">
                <td>{{data.title}}</td>
                <td>{{data.director}}</td>
                <td>{{data.storyline}}</td>
                <td>{{data.year}}</td>
                <td>
                    <a class="btn btn-primary btn-xs" href="#/film/update/{{data.id}}">
                        <i class="glyphicon glyphicon-pencil"></i>
                    </a>
                    <a class="btn btn-danger btn-xs" ng-click="deleteFilm(data.id)">
                        <i class="glyphicon glyphicon-trash"></i>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div data-pagination="" data-num-pages="numPages()"
         data-current-page="currentPage" data-max-size="maxSize"
         data-boundary-links="true"></div>

PS: Как я понял в контроллер подгружаются все данные, и во всех примерах, массив делится на части и по нему происходит сортировка, проблема в том что в проекте который сейчас работает на php > 1 000 000 записей в БД, как быть в таком случае? не грузить же миллион строк каждый раз, можно както сделать пагинацию c частичной подгрузкой данных

Answer 1

[amf1k]

Надо отдавать не все записи, а только записи на одну страницу (например в ef есть Skip и Take), а пагинацию на ангуларе реализовать bootstrap`ом, и все. То есть на каждую страницу по запросу на сервер за записями.