Как реализовать пагинацию на стороне сервера в Angular 17

В этом руководстве показано, как реализовать нумерацию страниц на стороне сервера в Angular 17 с помощью ngx-pagination. Вы узнаете, как использовать PaginatePipe и PaginationControlsComponent.

Шаг для разбиения на страницы на стороне сервера в Angular 17

• Шаг 1: Создайте проект Angular 17
• Шаг 2: Установите ngx-пагинацию
• Шаг 3: экспортируйте ProvideHttpClient()
• Шаг 4: Создайте сервис для API
• Шаг 5: Использование сервиса для компонентов
• Шаг 6: Обновленный файл представления
• Запустите приложение Angular

Давайте выполним следующие действия:

Шаг 1. Создайте проект Angular 17

Вы можете легко создать свое угловое приложение, используя следующую команду:

ng new my-new-app

Шаг 2. Установите ngx-пагинацию

На этом этапе мы установим пакет ngx-pagination. давайте установим с помощью следующей команды:

npm install ngx-pagination --save

Шаг 3: экспортируйте ProvideHttpClient()

На этом этапе нам нужно экспортировать метод ProvideHttpClient() в файл app.config.ts. поэтому давайте импортируем его, как показано ниже:

src/app/app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
  
import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';
  
import { provideHttpClient } from '@angular/common/http';
   
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations(), provideHttpClient()]
};

Шаг 4. Создайте сервис для API

Здесь нам нужно создать сервис для запроса http-клиента. мы создадим служебный файл и напишем код http-запроса клиента. этот сервис будет использовать в нашем файле компонента.

вам нужно использовать сервис для получения записей о страницах. Если вы хотите создать свой собственный API для отдыха, вы можете следовать инструкциям ниже:

Здесь я буду использовать https://reqres.in/" API демо-сайта для привлечения пользователей с разбивкой на страницы. вы можете увидеть ответ в формате JSON, который нам нужен:

Ответ API:

Итак, давайте создадим сервис и вставим следующий код:

ng g s services/users

Теперь давайте добавим код, как показано ниже:

src/app/services/users.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
  
@Injectable({
  providedIn: 'root'
})
export class UsersService {
  
  private url = 'https://reqres.in/api/users';
     
  constructor(private httpClient: HttpClient) { }
    
  getUsers(page: number){
    return this.httpClient.get(this.url + '?page=' + page);
  }
}

Шаг 5. Используйте сервис для компонентов

Теперь нам нужно использовать эти сервисы для нашего компонента приложения. Итак, давайте обновим код, как показано ниже:

src/app/app.comComponent.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
  
import { NgxPaginationModule } from 'ngx-pagination';
import { UsersService } from './services/users.service';
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, NgxPaginationModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  users:any;
  p: number = 1;
  total: number = 0;
      
  constructor(private service:UsersService) {}
      
  /*------------------------------------------
  --------------------------------------------
  About 
  --------------------------------------------
  --------------------------------------------*/
  ngOnInit() {
    this.getUsers();
  }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  getUsers(){
      this.service.getUsers(this.p)
        .subscribe((response: any) => {
          this.users = response.data;
          this.total = response.total;
        });
  } 
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  pageChangeEvent(event: number){
      this.p = event;
      this.getUsers();
  }
    
}

Шаг 6: Обновленный файл просмотра

Теперь мы обновим наш html-файл. давайте поместим следующий код:

src/app/app.comComponent.html

<div class="container">
  <h1>Angular 17 Pagination Example - ItSolutionStuff.com</h1>
   
  <table class="table table-bordered">
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
    <tr *ngFor="let user of users| paginate: { itemsPerPage: 6, currentPage: p, totalItems: total }">
        <td>{{ user.id }}</td>
        <td>{{ user.first_name }}</td>
        <td>{{ user.last_name }}</td>
        <td>{{ user.email }}</td>
    </tr>
  </table>  
  
  <pagination-controls (pageChange)="pageChangeEvent($event)"></pagination-controls>
</div>

Запустите приложение Angular:

Все необходимые шаги выполнены, теперь вам нужно ввести приведенную ниже команду и нажать Enter, чтобы запустить приложение Angular:

ng serve

Теперь перейдите в веб-браузер, введите указанный URL-адрес и просмотрите выходные данные приложения:

http://localhost:4200

#angular #angular17