Приветствую читателей, в этом уроке мы будем реализовывать нумерацию страниц в угловых приложениях.
1. Введение
- Angular — это основанная на Typescript инфраструктура с открытым исходным кодом, которая помогает разработчикам создавать одностраничные приложения
- Предлагает объектно-ориентированные функции и поддерживает динамическую загрузку страниц
- Поддержка двухсторонней привязки данных, свойств (
[]) и событий (()) - Поддерживает интерфейс командной строки, чтобы легко инициировать и управлять угловыми проектами из командной строки
Теперь откройте код Visual Studio и давайте посмотрим, как реализовать этот учебник в угловых 6 фреймворках.
2. Пример угловой пагинации
Вот систематическое руководство для реализации этого учебника.
2.1 Используемые инструменты
Мы используем код Visual Studio и Node Terminal для компиляции и выполнения углового кода в браузере.
2.2 Структура проекта
Если вы не знаете, где создавать соответствующие файлы или папки, давайте рассмотрим структуру проекта углового приложения.
3. Создание приложения Angular
Выполните команду ng new angular-routing-child-routes-example в консоли npm, чтобы создать новый угловой проект. После создания нового проекта выполните следующие шаги.
3.1 Установить модуль пагинации
Чтобы начать с нумерации страниц в угловом приложении, мы установим готовый плагин. В консоли npm выполните команду npm install ngx-pagination –save из каталога проекта.
3.2 Импорт модуля пагинации
Для начала работы с нумерацией страниц в угловом NgxPaginationModule потребуется импортировать модуль src/app/app.module.ts файл src/app/app.module.ts .
app.module.ts
|
1
2
3
4
5
6
7
|
// Importing the pagination module for the application.import { NgxPaginationModule } from 'ngx-pagination';// Including the pagination module in the application module. imports: [ BrowserModule, NgxPaginationModule ], |
3.3 Инициализация данных
Добавьте следующий код в файл src/app/app.component.ts чтобы инициализировать массив сотрудников и параметры разбиения на страницы.
app.component.ts
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'Angular Pagination Tutorial'; // Some array of things. public employeedata = []; // Pagination parameters. p: Number = 1; count: Number = 5; constructor() { console.log('Application loaded. Initializing data.'); this.employeedata = [ { 'id': 1, 'name': 'Clare Cornau', 'phoneno': '(815) 6180492', 'email': '[email protected]', 'gender': 'Female', 'nationality': 'Somalia' }, { 'id': 2, 'name': 'Edouard Elsmore', 'phoneno': '(507) 3119958', 'email': '[email protected]', 'gender': 'Male', 'nationality': 'United States' }, { 'id': 3, 'name': 'Aeriel Elldred', 'phoneno': '(478) 7181722', 'email': '[email protected]', 'gender': 'Female', 'nationality': 'Russia' }, { 'id': 4, 'name': 'Abagael Meachem', 'phoneno': '(698) 4411762', 'email': '[email protected]', 'gender': 'Female', 'nationality': 'China' }, { 'id': 5, 'name': 'Jeremiah Hadwen', 'phoneno': '(345) 6582965', 'email': '[email protected]', 'gender': 'Male', 'nationality': 'Mongolia' }, { 'id': 6, 'name': 'Rollin Wainscoat', 'phoneno': '(659) 9557733', 'email': '[email protected]', 'gender': 'Male', 'nationality': 'Bhutan' }, { 'id': 7, 'name': 'Micah Braddock', 'phoneno': '(864) 2101861', 'email': '[email protected]', 'gender': 'Male', 'nationality': 'Peru' }, { 'id': 8, 'name': 'Jayme Crotty', 'phoneno': '(165) 5814372', 'email': '[email protected]', 'gender': 'Male', 'nationality': 'Niger' }, { 'id': 9, 'name': 'Margo Braker', 'phoneno': '(428) 2282928', 'email': '[email protected]', 'gender': 'Female', 'nationality': 'Argentina' }, { 'id': 10, 'name': 'Bertie Bosman', 'phoneno': '(673) 5170425', 'email': '[email protected]', 'gender': 'Female', 'nationality': 'Greece' }, { 'id': 11, 'name': 'Darelle Rowlands', 'phoneno': '(978) 8885907', 'email': '[email protected]', 'gender': 'Female', 'nationality': 'Indonesia' }, { 'id': 12, 'name': 'Neile Keets', 'phoneno': '(956) 9360112', 'email': '[email protected]', 'gender': 'Female', 'nationality': 'Finland' }, { 'id': 13, 'name': 'Shari Bussen', 'phoneno': '(240) 7150720', 'email': '[email protected]', 'gender': 'Female', 'nationality': 'Philippines' }, { 'id': 14, 'name': 'Arron Drivers', 'phoneno': '(416) 4076124', 'email': '[email protected]', 'gender': 'Male', 'nationality': 'Bosnia and Herzegovina' }, { 'id': 15, 'name': 'Carola Balasin', 'phoneno': '(262) 7945277', 'email': '[email protected]', 'gender': 'Female', 'nationality': 'Bolivia' }, { 'id': 16, 'name': 'Clarinda Barrick', 'phoneno': '(501) 3984600', 'email': '[email protected]', 'gender': 'Female', 'nationality': 'China' }, { 'id': 17, 'name': 'Inglis Treweela', 'phoneno': '(718) 4157883', 'email': '[email protected]', 'gender': 'Male', 'nationality': 'Finland' }, { 'id': 18, 'name': 'Yardley Georgeot', 'phoneno': '(213) 5730967', 'email': '[email protected]', 'gender': 'Male', 'nationality': 'Portugal' }, { 'id': 19, 'name': 'Hestia Palffrey', 'phoneno': '(349) 6453938', 'email': '[email protected]', 'gender': 'Female', 'nationality': 'Madagascar' }, { 'id': 20, 'name': 'Gwendolyn Mordon', 'phoneno': '(474) 3068249', 'email': '[email protected]', 'gender': 'Female', 'nationality': 'Greece' } ]; }} |
3.4 Создать HTML-компонент
Добавьте следующий код в файл src/app/app.component.html чтобы отобразить данные о сотрудниках и включить элемент управления разбиением на страницы.
app.component.html
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!--The content below is only a placeholder and can be replaced.--><div class="container"> <h2 class="text-secondary text-center">{{ title }}!</h2> <hr /> <div> <h4 class="text-info">Displaying employee data.</h4> <div> </div> <table class="table table-bordered"> <thead> <tr> <th>Id</th> <th>Fullname</th> <th>Phone no.</th> <th>Email</th> <th>Gender</th> <th>Nationality</th> </tr> </thead> <tbody> <tr *ngFor="let e of employeedata | paginate: { itemsPerPage: count, currentPage: p }"> <td>{{e.id}}</td> <td>{{e.name}}</td> <td>{{e.phoneno}}</td> <td>{{e.email}}</td> <td>{{e.gender}}</td> <td>{{e.nationality}}</td> </tr> </tbody> </table> </div> <!--Including the pagination control.--> <div class="text-right"> <pagination-controls (pageChange)="p = $event"></pagination-controls> </div></div> |
4. Запустите приложение
Поскольку мы готовы со всеми изменениями, давайте скомпилируем и запустим угловое приложение с помощью команды ng serve . После успешной компиляции и развертывания проектов откройте браузер, чтобы протестировать его.
5. Демонстрация проекта
Откройте ваш любимый браузер и нажмите угловой URL-адрес приложения ( http://localhost:4200/ ), чтобы отобразить страницу индекса приложения.
На странице отображаются данные о сотрудниках и управление пагинацией. Это все для этого урока, и я надеюсь, что статья послужила вам тем, на что вы рассчитывали. Удачного обучения и не забудьте поделиться!
6. Заключение
В этом разделе мы узнали, как включить простое управление разбиением на страницы в угловом приложении. Разработчики могут загрузить образец приложения в виде проекта Eclipse в разделе « Загрузки ».
7. Скачать проект Eclipse
Это было руководство по разбиению на страницы в угловом приложении.