How to make pagination in angular?

Question

Angular

I started to study angularJS, in the future I plan to transfer the project from php to angular .
I am doing this lesson.
Everything works fine, except for pagination, or rather, it is not there at all.
Example controller from the lesson:

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();
        }
    };
}])

Googled an example of pagination, redesigned the controller:

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);
        });
    }])

I output the filteredFilms array in the view, but it turns out to be empty.

<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: As I understand it, all data is loaded into the controller, and in all examples, the array is divided into parts and sorted by it, the problem is that in the project that is currently running on php > 1,000,000 records in the database, what to do in this case ? not to load a million rows each time, you can somehow do pagination with partial data loading

Answer 1

It is necessary to give not all records, but only records on one page (for example, ef has Skip and Take), and implement pagination in angular using bootstrap , and that's it. That is, for each page on request to the server for records.