სთეითში მონაცემების ინიციალიზაცია

ჯერ შევქმნათ სერვისი todo.service.ts, რომელიც გასაკეთებელი საქმეების სიის მენეჯმენტზე იზრუნებს, ისევე როგორც ბექენდიდან ამ სიის მიღება-მოდიფიკაციაზე. მივხედოთ სთეითის ინიციალიზაციის ლოგიკას. ანუ ჩვენ გვინდა, რომ როცა აპლიკაცია გაიხსნება, ჩაიტვირთოს გასაკეთებელი საქმეები.

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { BehaviorSubject, catchError, of, tap } from "rxjs";

export interface TodoItem {
  id: number;
  title: string;
  done: boolean;
}

@Injectable({ providedIn: "root" })
export class TodoService {
  private url = "http://localhost:3000/todos";

  private todos$ = new BehaviorSubject<TodoItem[]>([]);

  constructor(private http: HttpClient) {}

  get todos() {
    return this.todos$.asObservable();
  }

  public init() {
    this.http
      .get<TodoItem[]>(this.url)
      .pipe(
        tap((todos) => {
          this.todos$.next(todos);
        })
      )
      .subscribe();
  }
}

ჩვენ აქვე ვქმნით TodoItem-ის ინტერფეისს, რომელიც იმ ტიპს შეესაბამება, რა ტიპის ობიექტებიც დავამატეთ database.json-ში.

სერვისში ვინახავთ მისამართს, რომელიც ენდფოინთის მიხედვით აცნობებს json-server-ს JSON ფაილში რომელი თვისებიდან ამოიღოს ინფორმაცია. ვქმნით todo$-ს რომელიც იქნება BehaviorSubject, ის დააბრუნებს TodoItem მასივის ტიპის მონაცემებს და ის თავიდან იქნება ცარიელი მასივი.

კონსტრუქტორში შემოგვაქვს HttpClient რომლითაც მოთხოვნებს განვახორციელებთ.

აქვე ვმქნით გეთერს, რომელიც ამ ჩვენ todo$ სტრიმს დააბრუნებს asObservable მეთოდით, ეს საბჯექთის მაგივრად აბრუნებს Observable ინსტანციას, რათა მასზე კომპონენტებიდან next მეთოდის დაძახება არ იყოს შესაძლებელი. ჩვენ გვინდა, რომ next მეთოდის დაძახება შეიძლებოდეს მხოლოდ სერვისიდან, ამით გაუგებრობებს ავირიდებთ თავიდან რადგან სხვადასხვა კომპონენტებიდან მისი დაძახება რაღაც ეტაპზე ქაოსს გამოიწვევს.

ჩვენ ვქმნით init მეთოდს, რომელსაც შეგვიძლია კომპონენტიდან დავუძახოტ. ის HTTP მოთხოვნით მიიღებს მონაცემებს და მას tap ოპერატორით todos$ სტრიმში დაანექსთებს. ასე GET მოთხოვნას მოყვება ეფექტი, რომელიც სთეითის სტრიმში ახალ მნიშვნელობას გასცემს. მასზე აქვე ვასუბსქრაიბებთ, რადგან კომპონენტში მონაცემებს მაინც todos$ სტრიმიდან ავიღებთ. ჩვენთვის მთავარია, რომ ამ მეთოდზე დაძახებამ უბრალოდ მოთხოვნა გაგზავნოს და tap-ში არსებული ეფექტი გამოიწვიოს. ანსუბსქრაიბი აქ არ დაგვჭირდება, რადგან ამას HttpClient აგვარებს.

ახლა AppComponent-ში გამოვიყენოთ ეს სერვისი:

import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { TodoItem, TodoService } from "./todo.service";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit {
  todos$ = this.todoService.todos;

  constructor(private todoService: TodoService) {}

  ngOnInit(): void {
    this.todoService.init();
  }
}

აქ ჩვენ @Component დეკორატორში საინტერესო რაღაცას ვამატებთ: changeDetection-ის სტრატეგიას ვცვლით onPush-ზე (რომელიც უნდა დავაიმპორტოთ). ეს ეუბნება ანგულარის აპლიკაციას, რომ ავტომატურად არ დააფიქსიროს ცვლილებები და არ დაარენდეროს თემფლეითი. ამის გამოყენება უაცილებელი არ არის, მაგრამ რეაქტიული მიდგომის დროს ეს რესურსებს ზოგავს, რადგან ჩვენ შეგვიძლია ცვლილებების დეტექტორი მაშინ დავატრიგეროთ, როცა ამის საჭიროება ნამდვილად არსებობს. ეს მეთოდი სირთულეებს შექმნის, თუ ჩვენ სტრიმებს და async ფაიფებს არ ვიყენებთ, თუმცა მათი გამოყენების შემთხვევაში აპლიკაცია შედარებით უფრო სწრაფია და ნაკლებ რესურსებს საჭიროებს. ანგულარში რეაქტიული პროგრამირების დროს ფაქტობრივად ყველა კომპონენტი onPush-ზე გვაქვს.

ჩვენ ვაინჯექთებთ TodoService-ს და კომპონენტის თვისებაში ვინახავთ ნივთების სტრიმს, რომელსაც გეთერი გვიბრუნებს.

აპლიკაციის ინიციალიზაციისას სერვისზე ვეძახით init მეთოდს, რომელის შედეგადაც ჩვენ კომპონენტის todos$ სტრიმში მონაცემები უნდა მივიღოთ, რა თქმა უნდა ეს იმ შემთხვევაში, თუ ამ სტრიმზე დავასუბსქრაიბებთ. კონვენციურად ყოველთვის უნდა ვცადოთ თემფლეითში async ფაიფით დასუბსქრაიბება იმის მაგივრად, რომ მსაზე კლასში დავასუბსქრაიბოთ.

<div class="container" style="max-width: 500px">
  <h1>Your List:</h1>
  <ul class="list-group" *ngIf="todos$ | async as todos">
    <p *ngIf="todos.length === 0">Your list will show here...</p>
    <li
      class="list-group-item d-flex justify-content-between align-items-center"
      *ngFor="let item of todos"
    >
      <div class="d-flex align-items-center">
        <input type="checkbox" [checked]="item.done" />
        <span class="ms-2">{{ item.title }}</span>
      </div>
    </li>
  </ul>
</div>

ჩვენ გამოვსახავთ სიას ngIf დირექტივით, სადაც async ფაიფით სტრიმზე ვასუბსქრაიბებთ და მისი შედეგი გამოგვაქვს, როგორც todo ცვლადი. შემდეგ ამ ცვლადზე ვაკეთებთ ლუპს და მათ გამოვსახავთ. ჩვენ ვქმნით ჩექბოქსს ყოველი ნივთისთვის, რომელიც მინიშნული იქნება, თუ მისი done თვისება ჭეშმარიტია. თუ მასივი ცარიელია, ჩვენ ტექსტით ამაზე მივანიშნებთ. async ფაიფის ერთ-ერთი პლიუსი ის არის, რომ ის view-ს ხელახლა დარენდერებას მაშინ აიძულებს, როცა მასში გატარებული სტრიმი ახალ მნიშვნელობას გასცემს.

თუ ბრაუზერს შევხედავთ, ნივთების სია უნდა გამოისახოს. ახლა ახალი ნივთების დამატებას მივხედოთ.