Dr. Bilicki Vilmos Szoftverfejlesztés Tanszék AngularKomponensek,Sablonok

(1)

UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS

Angular

Komponensek,Sablonok

Dr. Bilicki Vilmos

Szoftverfejlesztés Tanszék

(2)

Összefoglaló

4Projekt Fájl Struktúra 4Adat megjelenítés

4Sablon szintaxis

4Felhasználói bevitel

(3)

Projekt Fájl Strukúra

4Workspace Configuration 4npm függőségek

4TypeScript konfiguráció

4Ahead-of-Time Compilation 4Building & Serving

4Testing

4Deployment

4Browser Support

4Dev Tool integration

(4)

Workspace

4Workspace vs. Projekt

■ Egy munkakönyvtrában több angular projekt lehet (cli ng new <project_name>)

4Munkakönyvtár szintű konfig

■ .editorconfig

■ .gitignore

■ angular.json (CLI konfig, eszökzökről, ...)

■ node_modules

■ package.json

■ package-lock.json

■ tsconfig.json

■ tslint.json

■ README.md

(5)

Project

4app/

4assets/

4environments/

4browserslist 4favicon.ico 4index.html 4main.ts

4polyfills.ts

4styles.sass 4test.ts

4tsconfig.app.json 4tsconfig.spec.json 4tslint.json

(6)

Adat megjelenítés

interpoláció

TypeScript fordított aposztróf

(7)

Példa

main.ts app.module.ts

app.component.ts

hero.ts

(8)

Sablon szintaxis

4 A felhasználó élményt (mit lát, mit tehet) a komponens és a felhasználói felületet meghatározó sablon határozza meg 4 MVC, MVVM

4 Angular:

■ Controller:ViewModel

■ Sablon: View

(9)

HTML, Közbeszúrás

4 Bármely HTML elem használható kivéve

■ <script>

4 Közbeszúrás (Interpolation)

■ Interpolation {{...}}

– Sablon kifejezés

■ Az Angular lecseréli a változót az értékre (minden eseményre)

– Kiértékeli

– Átalakítja karakterlánccá

– Átadja a megfelelő elem, direktíva tulajdonságnak vagy HTML elemnek

(10)

Sablon kifejezés

4Egy értéket ad és a dupla kapcsos zárójelen belül van

4Tulajdonság kötés esetén a jobb oldalon jelenik meg [property]="expression”

4A legtöbb JS elem használható 4Kifejezés kontextus

■ Sablon változók + komponens példány + a dirketíva kontextusa

■ Nem fér hozzá a globális kontextushoz

■ Nem fér hozzá a window, document objektumokohoz

■ Nem tud logolni

(11)

Sablon kifejezés: ajánlások

4Angular „Egyirányú adatfolyam”

■ Ne változtasson mást csak azt amihez hozzá van kötve (egy érték kiolvasása ne változtasson más helyen lévő adatot)

4Cél: Idempotens kifejezés

4Gyors lefutás: minden változásdetektációs ciklusnál kiértékeli (sok aszinkron esemény:

HTTP, egér, billentyű, időzítő, ...)

4Egyszerűség: tuladonság, metódus hívás de ne sok boolean kifejezés

(12)

Sablon deklaráció

4A deklaráció (statement) a csatolt elem (komponens, direktíva) eseményére válaszol (event)="statement”

4A kontextusa

■ a komponens példány

■ a sablon saját környezet

4Hasonló szabályok vonatkoznak rá mint a kifejezésre

(13)

Csatolás szintaxis

Adatirány Szintaxis Típus

Egyirányú az adatforrástól a nézet célig

Közbeszúrás Tulajdonság Attribútum Osztály Stílus Egyirányú a nézet

céltól az adatforrásig

Esemény

Kétirányú Kétirányú

(14)

HTML attribútum vs. DOM tulajdonság 4HTML vs. DOM

■ 1:1 összerendelés pl.: id

■ HTML attribútum és nincs DOM párja pl: colspan

■ DOM tulajdonság aminek nincs HTML megfelelője pl: textContent

■ Sok HTML attribútum tűnik csatoltnak de, nem

4Az attribútumok incializálják a DOM tulajdonságokat

4A tulajdonságok változhatnak az attribútumok nem

■ HTML attribútum → kezdeti érték

■ DOM tulajdonság → aktuális érték

(15)

Csatolás célok

Típus Cél Példa

Tulajdonság Elem tulajdonság

Komponens tulajdonság Direktíva tulajdonság Esemény Elem esemény

Komponens esemény Direktíva esemény Kétirányú Esemény és

tulajdonság

Attribútum Attribútum (kivétel) Osztály Osztály tulajdonság

Stílus Stílus tulajdonság

(16)

Tulajdonság csatolás

4Beállítja a nézet elem egy tulajdonságát 4Egyirányú adatfolyam

■ Komponens adat tulajdonságból az elem tulajdonságába

■ Nem használhatjuk arra, hogy kiolvassuk

■ Nem hívhatjuk meg a cél eleme metódusait sem

4@Input-tal jelöljük a másik oldalon azokat a

tulajdonságokat amiket így szeretnénk kiajánlani

(17)

Közbeszúrás vagy Csatlás

4Karaterlánc esteében mindegy

4Nem karakterláncnál csatolást kell használni

(18)

Kód injektálás

4Az angular először „fertőtleníti” a

karakterláncot és csak ezután szúrja be

(19)

Attribútum, osztály, stílus csatolás

4 Attribútumok közvetlen beállítása

4 Ezt csak akkor szabad/lehet használni ha nincs ilyen tulajdonság

(20)

Osztály csatolás

4 CSS osztály neveket adhatunk hozzá, vagy vehetünk el 4 class csatolás

4 Javasolt az NgClass direktíva (több osztály egyszeri manipulásálásra)

(21)

Stílus csatolás

4[style.style-property]

4unit extension: .em, .%

(22)

Esemény csatolás

4Elemtől → Kompnenshez 4Cél esemény (event)

4$event – az eseményhez tartozó adatokat adja át

(23)

Saját események

4 Az egyes direktívák általában adnak ki eseményeket 4 Jellemzően lefelé populálódik a komponens fán

(24)

Kétirányú csatolás

4Szeretnénk kiírni és megváltoztatni is 4[(...)] banán a dobozban J

4HTML űrlap elemekhez (pl.: input) NgModel mert nem követik a x, xChange nevezéktant

(25)

Beépített attribútum direktívák

4NgClass – CSS osztályok hozzáadása, eltávolítása

4NgStyle – HTML stílusok hozzáadása, eltávolítása

4NgModel – kétirányú adatkötés HTML űrlap elemhez

■ Csak azokra működik amelyek támogatva vannak (ControlValueAccessor)

– CheckboxControlValueAccessor – DefaultValueAccessor

– RadioControlValueAccessor – SelectControlValueAccessor

– SelectMultipleControlValueAccessor

■ Saját komponens esetén be kell tartani a szinakxist

(26)

NgModel

(27)

NgModel

(28)

Beépített struktúrális direktívák

4A HTML kinézetet befolyásolják → DOM struktúra változás segítségével

4Példa

■ NgIf

■ NgSwitch

■ NgForOf

(29)

**A * jelentősége**

4Egy nyelvi elem

4Jelzi az angualrnak, hogy burkolja be egy sablonnal

(30)

*ngFor trackBy

4Nagy listáknál egy elem változása is a teljes DOM újratöltését eredményezi

4A megváltozott elemet jelezhetjük az angularnak (milyen változást figyeljen)

(31)

Sablon referencia változók

4#var → egy sablonhoz tartozó DOM elemre mutató referencia

4a sablonon belül bárhonnan hivatkozhatunk rá 4más mint belül a let x

(32)

Bemenő és kimenő tulajdonságok

4 @Input → beállítható tulajdonság

4 @Output → megfigyelhető tulajdonság (EventEmitter)

4 A saját publikus tulajdonságok annotálás nélkül is elérhetőek 4 A komponenseket/direktívákat csak ezeken a csatornákon

keresztül köthetjük össze

■ Ha más komponessel kötjük össze akkor az angular fordító hibát jelez

(33)

Biztonságos hivatkozás

4biztonságos navigáció operátor (?.)

4null/undefined utak esetén nyújt védelmet 4laza betöltésnél fontos (még nemtöltődöt

le az adat)

(34)

Felhasználói bevitel

4A felhasználói akciók mint kattintás,

gombnyomás, szövegbevitel, … DOM eseményeket generálnak

4Angular esemény kötés (DOM

eseményhez)

(35)

Kontextusa

(36)

Felhasználó bevitel: $event

4A DOM események adatot is tartalmaznak 4DOM target a kontextus: event.target.value

(37)

Helyes használat

4$event közvetlen használata HTML függővé teszi a kódunkat

4Sablon referencia változó: #változó

(38)

Összefoglaló

4Projekt Fájl Struktúra 4Adat megjelenítés

4Sablon szintaxis

4Felhasználói bevitel