click fraud detection
click fraud detection
Blog Case

Создание IM штор. Клиентская часть на Angular. Часть 5

BLOG
CASE
156
0
0/ 5stars
0/5
Время чтения: 30 минут

Клиентская часть на Angular.

Напомню, мы имеем следующую структуру данных:

Стрелками указаны связи между таблицами.

Задача состоит в том, чтобы создать фронтенд-приложение на Angular, в котором необходимо вывести все товары из таблицы shop_good. Также следует обеспечить возможность возможностью фильтровать товары по категориям, проводить поиск по названию, выводить подробную информацию о товаре и предоставить возможность заказать их.

Займемся созданием нового приложения Angular.

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

ng new ng-prj
cd ng-prg
ng serve

Далее, можно открыть в браузере приветственную страницу по адресу http://localhost:4200/ и увидеть следующее:

Первый шаг – заменим главный шаблон src/app/app.component.html и подключим css-фреймворк bootstrap к нашему проекту.

ng add ngx-bootstrap

Этой командой мы добавляем библиотеку ngx-bootstrap, после чего необходимо обязательно перезагрузить сервер разработки для включения стилей в сборку.

Наше приложение будет состоять из четырех разделов.

1.Список всех товаров с фильтром по категориям.
2.Страница описания товарной позиции.
3.Страница поиска.
4.Пользовательская корзина с отправкой заказа.

Создадим эти компоненты следующими командами:

ng g c good
ng g c search
ng g c basket
ng g c detail

Определим маршрутизацию (роутинг) в файле app-routing.module.ts, где привяжем маршруты к соответствующим компонентам.

import { GoodComponent } from './good/good.component';
import { SearchComponent } from './search/search.component';
import { BasketComponent } from './basket/basket.component';
import { DetailComponent } from './detail/detail.component';
const routes: Routes = [
  { path: 'good', component: GoodComponent },
  { path: 'search', component: SearchComponent },
  { path: 'basket', component: BasketComponent },
  { path: 'detail/:id', component: DetailComponent },
  { path: '', redirectTo: 'good' ,pathMatch: 'full'}
];

Сформируем меню в главном шаблоне app.component.html и используя директиву [routerLink] направим ссылки по соответствующим маршрутам .

Директива routerLinkActive="active"  служит для установки css-класса “active” активной ссылке.

Создадим сервис, генерирующий запросы на сервер, в новом файле src/app/api.service.ts.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class APIService {
  constructor(private http: HttpClient) {}
   
getGoodList(){
     return this.http.get('http://localhost:3000/good/list/1/10');
   }

Для того, чтобы иметь возможность использовать HttpClient, необходимо включить модуль HttpClientModule в корневой модуль проекта.

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    ...],
  imports: [
    ...
    HttpClientModule,
    ...
  ],
  providers: [APIService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Теперь можно сделать запрос в компоненте good.component.ts, подписавшись на обозреваемый (Observable) объект, возвращаемый нашим сервисом в методе getGoodList().

import { APIService } from '../api.service';

@Component(...)
export class GoodComponent implements OnInit {
  
items: any[];
  
constructor(private http_service: APIService ) { }
  
doGetList(){
    
this.http_service.getGoodList().subscribe((data: any) => {
       this.items = data.result;
    });
  }

С сервера список приходит в следующем виде:

Где в адресе указывается номер страницы и количество элементов на странице.

Выведем информацию о продуктах в список.

Для того, чтобы изображения стали доступными из папки assets, создадим в ней симлинк на каталог, расположенный выше проекта в папке media Django проекта.

Для этого необходимо в консоле перейти внутрь каталога src/assets и выполнить команду:

      ln -s /<путь к media>/media/ good

Создадим функцию this.http_service.getGoodList() из метода doGetList() в метод ngOnInit. Тем самым загружая список сразу после инициализации компонента.

import { Component, OnInit } from '@angular/core';
import { APIService } from '../api.service';
@Component(...)
export class GoodComponent implements OnInit {
  ...
  ngOnInit() {
      this.http_service.getGoodList().subscribe((data: any) => {
        this.items = data.result;
    });
  }
}

Результирующая страница.

Создание канала (pipe).

Для того, чтобы сделать описание коротким, можно воспользоваться каналом внутри шаблона например таким образом, указав в квадратных скобках количество символов.

   {{ i.desc | shorttext:[50]  }}

Для этого создадим новый файл shorttext.pipe.ts со следующим содержимым:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
 name: 'shorttext'
})

export class ShorttextPipe implements PipeTransform {

transform(value: string, args: string[]): string {
    const limit = args.length > 0 ? parseInt(args[0], 10) : 20;
    const trail = args.length > 1 ? args[1] : '...';
    return value.length > limit ? value.substring(0, limit) + trail : value;
   }
}

Класс, аннотированный декоратором @Pipe, имплементирован от класса Angular PipeTransform и в нем нам нужно переопределить метод transform(), который принимает два параметра: value – это та переменная, что находится в шаблоне к которой применяется pipe (в виде вертикальной черты), а args – это то, что мы передаем внутри квадратных скобок. Задача метода transform – вернуть измененное значение value, которое вставится в шаблон вместо оригинального. Логика «обрезания» текста внути функции transform достаточно проста и не нуждается в пояснении.

Далее необходимо включить наш Pipe в главный модуль, чтобы он стал доступен во всех шаблонах приложения.

import { ShorttextPipe } from './shorttext.pipe';

@NgModule({
  declarations: [
   ...
  ],
 ...
})

Постраничная навигация.

Импортируем модуль постраничной навигации из пакета ngx-bootstrap и добавляем его в секцию imports корневого модуля.

import { PaginationModule } from 'ngx-bootstrap/pagination';

@NgModule({
  declarations: [
  ...
  imports: [
    ...
    PaginationModule.forRoot(),
  ],

Вот как будет выглядеть шаблон для постранички:

В компонент pagination из пакета ngx-bootstrap нам необходимо передать ряд конфигурирующих параметров:

  • totalItems – общее число элементов;
  • currentPage – текущая страница;
  • pageChanged – метод, обрабатывающий переход на страницу;
  • maxSize – максимальное количество страниц в панели навигации.

Польный список возможных переменных и методов можно посмотреть на официальном сайте ngx-bootstrap: https://valor-software.com/ngx-bootstrap/#/pagination.

Вот как будет выглядеть измененный компонент good.component.ts с учетом параметров постраничной навигации.

import { Component, OnInit } from '@angular/core';
import { APIService } from '../api.service';


@Component({
  selector: 'app-good',
  templateUrl: './good.component.html',
  styleUrls: ['./good.component.css']
})
export class GoodComponent implements OnInit {
  
items: any[];
  currentPage: number = 1;
  totalItems: number = 0;
  
constructor(private http_service: APIService ) { }
  
ngOnInit() {
    this.getPage(this.currentPage);
  }
  getPage(page: number){
    this.http_service.getGoodList(page).subscribe((data: any) => {
      this.items = data.result;
      this.totalItems = data.count;
  });
  }
  pageChanged(evt: any){
    this.getPage(evt.page);
    this.currentPage = evt.page;
  }
}

Соответственно, мы должны добавить параметр page и в наш сервис для подстановки его в  url-адрес.

  getGoodList(page: number){
     return this.http.get(`http://localhost:3000/good/list/${page}/10`);
   }

Результат.

 

Выводы

В этой статье мы рассмотрели:

  • создание каркаса приложения Angular;
  • создание компонентов и привязка их к системе маршрутизации;
  • вывод списка товаров с постраничной навигацией и применение pipe для формирования укороченной формы описания товара.
У ВАС ОСТАЛИСЬ ВОПРОСЫ?

Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.

ПОЛУЧИТЬ КОНСУЛЬТАЦИЮ

Наш менеджер свяжется с Вами в ближайшее время

0/5
Проголосовало людей: 0
СОДЕРЖАНИЕ
СТАТЬИ
Клиентская часть на Angular.
Выводы
Что такое мобильное приложение для сайта
Для удобства мобильной аудитории многие предприятия с веб-представительством создают мобильные приложения для собственного сайта. Это…
Алексей Варламов
Алексей Варламов
Онлайн игра Блэк-Джек. Часть 2.
Дмитрий Жариков
Дмитрий Жариков
ПОЛУЧАТЬ ИНТЕРЕСНЫЕ СТАТЬИ
Уже подписались 248 человек
Автор
156
0
Дмитрий Жариков
Дмитрий
Жариков
most
Popular
Возможно
Споры о том, помогает контекстная реклама при SEO-оптимизации или ни на что не влияет, точатся…
Галина Назарова
Галина Назарова
На сайте с адаптивной версткой пользователь не перенаправляется на поддомен, структура страницы просто подстраивается под…
Разработка концепции сайта позволяет избежать большинства возможных разногласий и доработок. На данном этапе специалисты создают…
Алексей Варламов
Алексей Варламов
Давайте начнем
беседу!
КОММЕНТАРИИ0
ОСТАВИТЬ КОММЕНТАРИЙ К СТАТЬЕ
ПОДПИСЫВАЙТЕСЬ НА РАССЫЛКУ АЙТЫЖБЛОГ
ХОТИТЕ ПОЛУЧАТЬ 
ИНТЕРЕСНЫЕ СТАТЬИ?
Уже подписались 248 человек
313
ПОПИСЧИКОВ
ЧИТАТЬ
4295
ПОПИСЧИКОВ
СЛЕДИТЬ
9307
ПОПИСЧИКОВ
СЛЕДИТЬ