Lazy Loading در انگولار — به زبان ساده

1const express = require('express');
2
3const app = express();
4
5//set headers
6app.use(function (req, res, next) {
7    res.header('Access-Control-Allow-Origin', '*');
8    res.header(
9        'Access-Control-Allow-Headers',
10        'Origin, X-Requested-With, Content-Type, Accept'
11    );
12    next();
13});
14
15// items API Routes
16app.use('/api/items', require('./routes/api/items'));
17
18const PORT = process.env.PORT || 5000;
19
20app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

1const express = require('express');
2const router = express.Router();
3const items = require('../../data/item_list');
4
5// Get All items
6router.get('/', (req, res) => res.json(items));
7
8// Paginate Items
9router.get('/page/:page_number/amount/:page_amount', (req, res) => {
10  const page = parseInt(req.params.page_number) - 1;
11  const pageAmount = parseInt(req.params.page_amount);
12  const found = items.slice(page * pageAmount, (page + 1) * pageAmount);
13
14  if (found) {
15    setTimeout(() => {
16      res.json(found);
17    }, 1000)
18  } else {
19    res.status(400).json({ msg: `No items with the specified parameters` });
20  }
21});
22
23module.exports = router;

1export default class ItemInterface {
2
3  id: number;
4  title: string;
5  type: string;
6  img: string;
7  imgLarge: string;
8  description: string;
9  text: string;
10  tags: string[];
11
12  constructor(id: number, title: string, type: string, img: string, imgLarge: string, description: string, text: string, tags: string[]) {
13
14    this.id = id;
15    this.title = title;
16    this.type = type;
17    this.img = img;
18    this.imgLarge = imgLarge;
19    this.description = description;
20    this.text = text;
21    this.tags = tags;
22  }
23}

1@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
2
3body{
4  margin: 0;
5  font-family: 'Roboto', sans-serif;
6}
7
8a{
9  text-decoration: none;
10}

1.spinner-container {
2  display: flex;
3  margin-top: 50px;
4}
5
6.spinner {
7  width: 2.5rem;
8  height: 2.5rem;
9  border-top-color: #4285f4;
10  border-left-color: #4285f4;
11
12  animation: spinner 400ms linear infinite;
13  border-bottom-color: transparent;
14  border-right-color: transparent;
15  border-style: solid;
16  border-width: 2px;
17  border-radius: 50%;
18  margin: auto;
19}
20
21@keyframes spinner {
22  0% { transform: rotate(0deg); }
23  100% { transform: rotate(360deg); }
24}
25
26.shine {
27  $shine-opacity: 5%;
28  background: darken(#f6f7f8, $shine-opacity)  linear-gradient(
29      to right,
30      darken(#f6f7f8, $shine-opacity) 0%,
31      darken(#edeef1, $shine-opacity) 20%,
32      darken(#f6f7f8, $shine-opacity) 40%,
33      darken(#f6f7f8, $shine-opacity) 100%
34  ) no-repeat;
35  background-size: 800px 400px;
36  display: inline-block;
37  position: relative;
38
39  animation-duration: 1s;
40  animation-fill-mode: forwards;
41  animation-iteration-count: infinite;
42  animation-name: placeholder-shimmer;
43  animation-timing-function: linear;
44}
45
46@keyframes placeholder-shimmer {
47  0% {
48    background-position: -468px 0;
49  }
50  100% {
51    background-position: 468px 0;
52  }
53}

1import { Injectable } from '@angular/core';
2
3import { HttpClient } from '@angular/common/http';
4
5import { Observable } from 'rxjs';
6
7import ItemInterface from '../interfaces/item.interface';
8
9@Injectable({
10  providedIn: 'root'
11})
12
13export class ApiService {
14
15  private pageNr = 1;
16
17  constructor(private http: HttpClient) { }
18
19  fetchItems(): Observable<ItemInterface[]> {
20    return this.http.get<ItemInterface[]>(`http://localhost:5000/api/items/page/${this.pageNr}/amount/8`);
21  }
22
23  paginatePage(): void {
24    this.pageNr ++;
25  }
26}

1import { Component, OnInit } from '@angular/core';
2import { ApiService } from '../../../services/api.service';
3
4import ItemInterface from '../../../interfaces/item.interface';
5
6@Component({
7  selector: 'app-grid',
8  templateUrl: './grid.component.html',
9  styleUrls: ['./grid.component.scss']
10})
11export class GridComponent implements OnInit {
12
13  constructor(private apiService: ApiService) {}
14
15  cards: ItemInterface[] = [];
16  isLoading = false;
17  loadedAll = false;
18  isFirstLoad = true;
19
20  ngOnInit(): void {
21
22    this.getCards();
23    this.handleScroll();
24  }
25
26  getCards(): void {
27
28    this.isLoading = true;
29    this.apiService.fetchItems().subscribe(res => {
30        if (res.length) {
31          this.cards.push(...res);
32        } else {
33          this.loadedAll = true;
34        }
35        this.isLoading = false;
36        this.isFirstLoad = false;
37    });
38  }
39
40  handleScroll(): void {
41
42    window.onscroll = () => this.detectBottom();
43  }
44
45  detectBottom(): void {
46
47      if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
48        if (!this.loadedAll) {
49          this.apiService.paginatePage();
50          this.getCards();
51        }
52      }
53  }
54}

1<div class="grid" *ngIf="isFirstLoad">
2  <app-card-shimmer *ngFor="let cardShimmer of [0, 1, 2, 3, 4, 5, 6, 7]"></app-card-shimmer>
3</div>
4
5<ng-container *ngIf="!isFirstLoad">
6  <div class="grid">
7    <app-card
8      *ngFor="let card of cards"
9      [type]="card.type"
10      [title]="card.title"
11      [img]="card.img"
12      [description]="card.description"
13      [tags]="card.tags">
14    </app-card>
15  </div>
16  <div *ngIf="isLoading" class="spinner-container">
17    <span class="spinner"></span>
18  </div>
19</ng-container>

1.grid {
2  display: grid;
3  @media (min-width: 768px) {
4    grid-template-columns: 1fr 1fr;
5  }
6  @media (min-width: 1024px) {
7    grid-template-columns: 1fr 1fr 1fr 1fr;
8  }
9  grid-gap: 20px;
10}

1import {Component, Input, OnInit} from '@angular/core';
2
3@Component({
4  selector: 'app-card',
5  templateUrl: './card.component.html',
6  styleUrls: ['./card.component.scss']
7})
8export class CardComponent implements OnInit {
9
10  constructor() { }
11
12  @Input() type: string;
13  @Input() title: string;
14  @Input() img: string;
15  @Input() description: string;
16  @Input() tags: string[];
17
18  ngOnInit() {
19  }
20
21}

1<a href='#' class="card">
2  <img src="{{img}}" alt="" class="card__img">
3  <div class="card__content">
4    <div class="card__type">
5      {{type}}
6    </div>
7    <div class="card__title">
8      {{title}}
9    </div>
10    <div class="card__description">
11      {{description}}
12    </div>
13  </div>
14</a>

1.card{
2  $hover-transition: .4s;
3  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
4  transition: $hover-transition;
5  display: block;
6  position: relative;
7  &__img {
8    width: 100%;
9    height: 140px;
10    object-fit: cover;
11    object-position: center;
12  }
13  &__content {
14    padding: 29px 35px 35px;
15  }
16  &__type {
17    font-size: 12px;
18    letter-spacing: 0.3px;
19    color: #9aa0a6;
20    font-weight: 700;
21    text-transform: uppercase;
22  }
23  &__title {
24    margin-top: 10px;
25    color: #3c4043;
26    font-size: 18px;
27    font-weight: 500;
28    letter-spacing: normal;
29    line-height: 26px;
30    transition: $hover-transition;
31  }
32  &__description {
33    margin-top: 15px;
34    padding-bottom: 20px;
35    color: #5f6368;
36    font-size: 14px;
37    letter-spacing: normal;
38    line-height: 22px;
39  }
40  &:hover, &:focus {
41    transition: $hover-transition;
42    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
43    .card__title {
44      transition: $hover-transition;
45      color: #4285f4;
46    }
47  }
48}

1<div class='article-card-shimmer'>
2  <div class="shimmer shine article-card-shimmer__img"></div>
3  <div class='article-card-shimmer__text'>
4    <div class="shimmer shine article-card-shimmer__category"></div>
5    <div class="shimmer shine article-card-shimmer__title"></div>
6    <div class="shimmer shine article-card-shimmer__details"></div>
7  </div>
8</div>

1.article-card-shimmer {
2  &__img {
3    width: 100%;
4    height: 140px;
5  }
6  &__text {
7    margin: 0 35px;
8    margin-top: 30px;
9    display: flex;
10    flex-flow: column nowrap;
11  }
12  &__category {
13    width: 30%;
14    height: 12px;
15  }
16  &__title {
17    width: 60%;
18    height: 18px;
19    margin-top: 15px;
20  }
21  &__details {
22    margin-top: 30px;
23    width: 90%;
24    height: 100px;
25  }
26}

1<div class="container">
2  <app-grid></app-grid>
3</div>

1.container {
2  max-width: 1200px;
3  padding: 0 25px 50px;
4  margin: 50px auto 0;
5}