Technologie Programistyczne - Systemy Internetowe

Laboratorium 3
Framework Angular - podstawy
Aleksander Ferens

Zadania do wykonania

Utwórz oraz uruchom aplikację typu Hello World, używając frameworka Angular.

1. Utwórz nowy komponent, który będzie wypisywał na ekranie nagłówek (np.

Witaj na mojej stronie). Wyświetl przykładowe pole z klasy komponentu
zamiast statycznego tekstu.
2. Dodaj element typu input, który będzie podpięty bezpośrednio pod zmienną w
celu personalizacji imienia użytkownika w nagłówku (np. Witaj na mojej
stronie, Marek)
3. Dodaj prosty licznik (przyciski zwiększający o 1 (+) i zmniejszający o 1 (-) ).
4. Utwórz prostą listę rzeczy do zrobienia w nowym komponencie (jedynie
wyświetlanie danych) i dodaj ją do strony głównej (użyj dyrektywy *ngFor)
5. Rozbuduj komponent, aby zaimplementować dodawanie elementu do listy.
6. Rozbuduj komponent, aby zaimplementować usuwanie elementu z listy.
7. Rozbuduj komponent w taki sposób, aby przy próbie dodania do listy takiego
samego zadania, jak jedno z już dodanych zadań, wyświetlał się odpowiedni
komunikat i element nie był dodawany.
8. (do samodzielnego wykonania) Korzystając z poprzednich zadań, utwórz
stronę z listą zadań do zrobienia z możliwością ich usuwania i dodawania. Tak
jak w aplikacji z poprzedniego zadania, przy każdym dodanym zadaniu
powinien być umieszczony symbol albo przycisk, którego kliknięcie spowoduje
usunięcie tego zadania z listy. Każde zadanie na liście powinno składać się z
nazwy, opisu, priorytetu „ważne” „średnio ważne” itp. oraz terminu jego
wykonania.
Technologie Programistyczne - Systemy Internetowe

Kon iguracja środowiska pracy i pierwsza aplikacja

1. Instalujemy środowisko wykonawcze Node.js oraz dołączony do niego NPM

(menedżer pakietów), jeżeli nie jest jeszcze zainstalowane. Możemy sprawdzić,
czy jest zainstalowany przez wywołanie w konsoli:

> node -v
> npm -v

2. Instalujemy CLI Angulara poprzez NPM lub inny menedżer pakietów (np. Yarn) i
tworzymy nową aplikację za jego pomocą (ng new). Wybieramy wersję bez
rou ngu oraz wybrany przez nas format arkuszy stylów.

flaga -g w NPM instaluje pakiet globalnie, przez co wystarczy zainstalować CLI jednorazowo
> npm install -g @angular/cli
> ng new <nazwa-naszej-aplikacji>

3. Po zainstalowaniu wszystkich niezbędnych pakietów i utworzeniu aplikacji

przez CLI, możemy uruchomić utworzony szkielet poprzez wywołanie ng serve
w folderze z aplikacją:

flaga --open automatycznie uruchamia przeglądarkę na stronie głównej naszej aplikacji

> cd <nazwa-naszej-aplikacji>
> ng serve --open

4. Po uruchomieniu serwera deweloperskiego, powinniśmy zobaczyć stronę Hello

World utworzoną przez Angulara (domyślnie na adresie localhost:4200)
Technologie Programistyczne - Systemy Internetowe

Struktura projektu aplikacji Angular

Gdy otworzymy nowy projekt aplikacji, powinniśmy ujrzeć podobnie

wyglądające drzewo plików:
node_modules:
zawiera wszystkie pakiety npm niezbędne do działania
aplikacji

src/app:
główny folder naszej aplikacji, tutaj piszemy kod źródłowy

src/assets:
obrazki, dokumenty lub inne pliki statyczne

src/environments:
konfiguracja aplikacji

src/index.html
główna strona, która zostanie wysłana, gdy ktoś odwiedzi
stronę: zwykle nie ma potrzeby edytować tego pliku

src/styles.css
style globalne dla całego projektu

więcej informacji o pozostałych plikach konfiguracyjnych Angulara:

h ps://angular.io/guide/file-structure
Technologie Programistyczne - Systemy Internetowe

Zadanie 1
Utwórz nowy komponent, który będzie wypisywał na ekranie nagłówek (np.
Witaj na mojej stronie). Wyświetl przykładowe pole z klasy komponentu zamiast
statycznego tekstu.

W celu utworzenia nowego komponentu, możemy wykorzystać CLI:

> ng generate component hello

skrócony zapis - ng g c <nazwa>

Utworzony zostanie wtedy nowy komponent w oddzielnym folderze, składający się z

czterech plików:

- arkusza stylów CSS (działa jedynie w obrębie

komponentu)
- dokumentu HTML
- pliku z testami jednostkowymi (spec.ts)
- logiki komponentu/skryptu (.ts)

Po otwarciu pliku komponentu (hello.component.ts) widzimy klasę w języku

TypeScript:

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-hello',
// znacznik, którym możemy zadeklarować nasz komponent w pliku HTML
templateUrl: './hello.component.html',
// nazwa pliku z szablonem HTML
styleUrls: ['./hello.component.css']
// nazwy arkusza stylów
})
export class HelloComponent implements OnInit {

constructor() { }

ngOnInit(): void { }

}
Technologie Programistyczne - Systemy Internetowe

Zmodyfikuj już istniejący plik HTML (app.component.html) w celu dodania własnego

komponentu poprzez dodanie znacznika z powyższej klasy:

serwer deweloperski, kiedy zauważy zmianę w plikach źródłowych, automatycznie

przeładuje stronę w przeglądarce.

Aby zadeklarować pole w klasie komponentu, używamy poniższej składni:

Jeżeli typ pola jest możliwy do wywnioskowania z jego zawartości, nie musimy go
podawać (poniższa składnia jest również prawidłowa):

Możemy następnie używać naszej zmiennej bezpośrednio w pliku HTML, używając

podwójnych klamrowych nawiasów:

<h1>{{ nazwa }}</h1>

Technologie Programistyczne - Systemy Internetowe

Zadanie 2
Dodaj element typu input, który będzie podpięty bezpośrednio pod zmienną w
celu personalizacji imienia użytkownika w nagłówku (np. Witaj na mojej stronie,
Marek)

W celu podpięcia pola input do zmiennej, używamy atrybutu ngModel:

<h1>Witaj, {{ nazwa }}</h1>
<input type="text" [(ngModel)]="nazwa">

Po skompilowaniu kodu, dostaniemy jednak błąd:

!! Aby użyć ngModel, należy zaimportować najpierw moduł FormsModule w module

naszej aplikacji !!

app.module.ts:
1. importujemy moduł:
import { FormsModule } from '@angular/forms';

2. dodajemy go w tablicy:
imports: [
BrowserModule,
FormsModule
],

Teraz możemy używać ngModel w naszej aplikacji (w module).

Więcej szczegółów: Built-in direc ves

Technologie Programistyczne - Systemy Internetowe

Zadanie 3
Dodaj prosty licznik (przyciski zwiększający o 1 (+) i zmniejszający o 1 (-) ).

Aby dodać metodę do obsługi zdarzenia, używamy okrągłych nawiasów:

<button (click)="incrementCounter()">+</button>

Następnie implementujemy metodę oraz pole w naszej klasie:

incrementCounter() {
this.counter++;
}

export class HelloComponent implements OnInit {

// ...
counter: number = 0;
// ...
}

Analogicznie postępujemy dla przycisku zmniejszającego licznik.

Nawiasy (składnia) w Angularze:

z klasy do widoku,
{{ }} {{ zmienna }}
wypisanie wartości

z klasy do widoku,
[] [value] = “zmienna” powiązanie własności
HTML

z widoku do klasy,
() (click) = “funkcja()”
powiązanie zdarzenia

powiązanie
[( )] [(ngModel)] = “zmienna”
dwukierunkowe
Technologie Programistyczne - Systemy Internetowe

Zadanie 4
Utwórz prostą listę rzeczy do zrobienia w nowym komponencie (jedynie
wyświetlanie danych) i dodaj ją do strony głównej (użyj dyrektywy *ngFor)

Zadeklarujmy tablicę obiektów w naszym komponencie, w której będziemy

przechowywać nasze rzeczy:
export class HelloComponent implements OnInit {
// ...
items = [
{id: 1, name: "Wynieść śmieci" },
{id: 2, name: "Pójść do sklepu" },
];
// ...
}

Następnie możemy wypisać nasze elementy, używając dyrektywy *ngFor:

<ul>
<li *ngFor="let item of items">
{{ item.id }} - {{ item.name }}
</li>
</ul>

Po uruchomieniu strony w przeglądarce, zobaczymy wygenerowane elementy w

strukturze strony:
Technologie Programistyczne - Systemy Internetowe

Zadanie 5
Rozbuduj komponent, aby zaimplementować dodawanie elementu do listy.

Możemy dodać element poprzez użycie zdarzenia click oraz dyrektywy ngModel:
<input type="text" [(ngModel)]="todoItem">
<button (click)="addItem()">Dodaj</button>

Warto dodać pole, które pomoże nam w autoinkrementacji pola id:

lastId = 2;

Zaimplementować dodawanie do listy możemy za pomocą metody .push():

const item = { id: ++this.lastId, name: this.todoItem };
this.items.push(item);

Dobrym pomysłem byłoby również wyczyszczenie pola input po dodaniu przedmiotu -

jak to zrobić?
Technologie Programistyczne - Systemy Internetowe

Zadanie 6
Rozbuduj komponent, aby zaimplementować usuwanie elementu z listy.

Dodajemy przycisk do każdego z pól, a w obsłudze zdarzenia podajemy ID danego

elementu:
<li *ngFor="let item of items">
{{ item.name }}
<button (click)="deleteItem(item.id)">X</button>
</li>

Przykładowa implementacja usuwania wybranego indeksu w tablicy (znajdujemy

indeks w tablicy po ID, i następnie usuwamy go z listy):
deleteItem(id: number) {
const index = this.items.findIndex(obj => obj.id == id);
if(index !== -1) {
this.items.splice(index, 1);
}
}

Jeżeli indeks będzie równy -1, to znaczy, że elementu nie ma w naszej tablicy.

Powyższy zapis funkcji anonimowej: obj => obj.id == id, skraca nam zapis poniższej
funkcji:
function(obj) {
return (obj.id == id);
}

Funkcje strzałkowe - JavaScript | MDN

Technologie Programistyczne - Systemy Internetowe

Zadanie 7
Rozbuduj komponent w taki sposób, aby przy próbie dodania do listy takiego
samego zadania, jak jedno z już dodanych zadań, wyświetlał się odpowiedni
komunikat i element nie był dodawany.

Przy dodawaniu elementu należy sprawdzić, czy dany element już nie istnieje w
podanej tablicy. Po lekkim przekształceniu możemy użyć ponownie metody
.findIndex():

const index = this.items.findIndex(obj => // warunek do spełnienia );

if(index !== -1) {
// co ma się stać, jeżeli znajdziemy istniejący element?
}

Aby wyświetlić komunikat, możemy użyć dyrektywy *ngIf - jeżeli zmienna ma wartość
true, to element HTML wyświetli się na stronie.
<div id="error" *ngIf="errorBoolean">
Element już istnieje!!
</div>

Nasz komponent po modyfikacji dodawania:

export class TodoComponent implements OnInit {

// ...
todoItem = "";
errorBoolean = false;
// ...

addItem() {
const index = this.items.findIndex(obj => obj.name == this.todoItem );
if(index !== -1) {
this.errorBoolean = true;
return; // wychodzimy z metody, pomijając resztę kodu
}

const item = { id: ++this.lastId, name: this.todoItem }

this.items.push(item);

this.todoItem = "";
this.errorBoolean = false;
}
Technologie Programistyczne - Systemy Internetowe

Zadanie 8 (do samodzielnego wykonania)

Korzystając z poprzednich zadań, utwórz stronę z listą zadań do zrobienia z
możliwością ich usuwania i dodawania. Tak jak w aplikacji z poprzedniego zadania,
przy każdym dodanym zadaniu powinien być umieszczony symbol albo przycisk,
którego kliknięcie spowoduje usunięcie tego zadania z listy. Każde zadanie na liście
powinno składać się z nazwy, opisu, priorytetu „ważne” „średnio ważne” itp. oraz
terminu jego wykonania.

wskazówki:

Dyrektywa ngModel działa również dla list rozwijanych w analogiczny sposób:

<select [(ngModel)]="wybranyPriorytet">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

dokumentacja Angulara: Introduc on to the Angular Docs

dokumentacja JavaScript: JavaScript | MDN