W poprzednich artykułach stworzyliśmy nasz pierwszy komponent dla aplikacji – listę to do oraz dodaliśmy do niej zadania. Następnie rozszerzyliśmy aplikację o listę zadań zrobionych, korzystając z stworzonych wcześniej komponentów.
Nie obeszło się jednak bez pewnych modyfikacji dotyczących samych zadań (status: to do/done). Stworzyliśmy model naszego zadania i doszliśmy do wniosku, że czegoś jednak nam brakuje. Czego? O tym dzisiaj 🙂
Wymagania wstępne:
Spisane w formie checklisty (do wydrukowania bądź podglądu/importu jako szablon Nozbe):
Materiały do nauki oraz informacje co i jak znajdziesz we wpisie Tworzymy aplikację webową – krok po kroku – podsumowanie aktualnego statusu & co dalej?
Branch, odpowiadający dzisiejszemu artykułowi: 05-todo-service
Serwis!
Jeśli pewna część aplikacji ma być dostępna dla więcej niż jednego komponentu – korzystamy z serwisów.
Jaka część naszej aplikacji powinna być współdzielona? Oczywiście lista zadań. Wszystkie nasze zadania powinny znaleźć się w serwisie. To on powinien zwracać zadania do zrobienia, przedstawiać skończone, odpowiadać za zmianę statusu czy też reagować na dodanie nowych zadań do listy.
Przenieśmy zatem naszą listę do nowo stworzonego serwisu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Todo } from './todo.model'; export class TodoService { private tasks: Todo[] = [ new Todo('Todo #11'), new Todo('Todo #12'), new Todo('Todo #13'), new Todo('Todo #14'), new Todo('Todo #15', true), new Todo('Todo #16', true) ]; getTasks() { return this.tasks; } } |
Sama lista jest elementem prywatnym, ale możemy ją pozyskać korzystając z metody getTasks().
Jak skorzystać z serwisu w naszym komponencie?
Żeby skorzystać z serwisu potrzebujemy trzech rzeczy:
- zaimportować go
|
1 |
import {TodoService} from './shared/todo.service'; |
- dodać do providerów dla danego komponentu (bądź modułu)
|
1 2 3 4 5 6 |
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], providers: [TodoService] }) |
- wstrzyknąć w konstruktorze danej klasy
|
1 |
constructor (private todoService: TodoService) { } |
Teraz możemy go wykorzystać, odwołując się do niego poprzez this.todoService:
|
1 |
tasks: this.todoService. getTasks() |
Jak pozyskać różne typy zadań?
Mamy metodę pozyskującą wszystkie zadania z naszej listy. Jednak my mamy dwie listy: To do i Done, a getTasks() zwraca wszystkie zadania. Jak to rozwiązać?
Może się wydawać, że mamy dwa sposoby rozwiązania:
- pobierz wszystkie todos i filtruj je po stronie komponentu
- pobierz przefiltrowane pod kątem statusu zadania
Lepiej jednak rozszerzyć serwis by zwracał nam to, o co chodzi niż filtrował pozyskaną listę w komponencie. Unikniemy redundancji.
Żeby zachować pewną konsekwencję, metody nazwiemy odpowiednio:
- getTasks() – lista wszystkich zadań
- getTodos() – zwraca listę zadań do zrobienia
- getDoneTasks() – zrobione
|
1 2 3 4 5 6 7 8 9 10 11 |
getTasks() { return this.tasks; } getTodos() { return this.tasks.filter(task => !task.done); } getDoneTasks() { return this.tasks.filter(task => task.done); } |
Teraz możemy pozyskać obie listy zadań:
|
1 2 3 4 5 6 7 8 9 10 |
lists = { todo: { name: 'To do', tasks: this.todoService.getTodos() }, done: { name: 'Done', tasks: this.todoService.getDoneTasks() } }; |
Gotowe.
Zmiana stanu zadania
Część dotyczącą wyświetlania listy zadań mamy już za sobą. Spróbujmy zaznaczyć zadanie na liście To do:
Jak widzimy checkbox jest zaznaczony, ale nasze zadanie nie zmieniło pozycji, nie zostało też przekreślone. Dlaczego?
Ponieważ nie obsługujemy zdarzenia zmiany wartości checkbox’a. Informacje pobieramy jednostronnie:
|
1 |
<input type="checkbox" [checked]="task.done"> |
Musimy zareagować na zmianę stanu checkbox:
|
1 |
<input type="checkbox" [checked]="task.done" (change)="onStatusChange()"> |
Podmieniamy jedynie status zadania na przeciwny:
|
1 2 3 |
onStatusChange() { this.task.done = !this.task.done; } |
Rezultat?
Ok. Jak widzimy status się zmienił (nazwa zadania jest przekreślona), ale listy nadal pozostają bez zmian. Dlaczego?
Otóż przy starcie aplikacji pobierane są przefiltrowane listy. Nie nasłuchujemy na kolejne zmiany. Skąd aplikacja ma wiedzieć, że chcemy, by listy były aktualne? Trzeba jej o tym powiedzieć.
Jak? Możemy się zasubskrybować na zmiany w serwisie.
EventEmitter
Tak naprawdę Event Emitter zasługiwałby na caaały oddzielny artykuł. Jednak tak jak wspominałam – jest to tutorial tworzenia aplikacji webowej z wykorzystaniem Angular v4. Nie kurs samego Angular v4. Gdyby tak było każdy artykuł zawierałby pięć razy więcej treści. Zakładam więc, że masz podstawową wiedzę na temat Angular v4. Jeśli nie – sięgnij po jeden z polecanych materiałów do nauki (Angular v4 na start).
Tworzymy EventEmitter (dokumentacja).
|
1 2 3 4 5 6 |
import { EventEmitter } from '@angular/core'; import { Todo } from './todo.model'; export class TodoService { todoChanged = new EventEmitter<Todo[]>(); |
Kiedy następuje zmiana wysyłamy sygnał do serwisu z miejsca wystąpienia zmiany.
|
1 2 3 4 |
onStatusChange() { this.task.done = !this.task.done; this.todoService.todoChanged.emit(); } |
Oczywiście, ważne jest by oba komponenty działały na tej samej instancji serwisu. W tym momencie tak jest. Serwis wstrzyknięty jest do komponentu AppComponent, więc wszystkie komponenty będące w hierarchii pod nim – będą korzystać z tej samej instancji serwisu.
Wysyłamy więc informację o zmianie statusu zadania, serwis ją odbiera. Pora odebrać ją w komponencie. Zrobimy to implementując interfejs OnInit:
|
1 2 3 4 5 6 7 8 |
ngOnInit() { this.todoService.todoChanged.subscribe( () => { this.lists.todo.tasks = this.todoService.getTodos(); this.lists.done.tasks = this.todoService.getDoneTasks(); } ); } |
|
1 |
export class AppComponent implements OnInit { |
który oczywiście musimy najpierw zaimportować:
|
1 |
import { Component, OnInit } from '@angular/core'; |
Nasza aplikacja właśnie stała się bardziej “reaktywna” 😉
Pozostało nam jeszcze jedno: dodawanie nowych zadań do listy. Ale tym zajmiemy się w kolejnym artykule serii 😉
Przypominam, że kod aplikacji po dzisiejszej lekcji znajdziesz na Github’ie, branch: 05-todo-service
W razie pytań – śmiało dawaj znać w komentarzu lub na naszej Tutorialowej Grupie Wsparcia na Facebooku.
Powodzenia!
.){kind=link}