UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Angular DI
Dr. Bilicki Vilmos
Szoftverfejlesztés Tanszék
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Az előző előadás összefoglalója
4Bevezetés: NgModules
4JS Modulok vs. NgModule-ok 4Gyakran használt NgModule-ok 4Képesség modulok
4A képesség modulok típusai 4Belépő komponensek
4Szolgáltatások
4Singleton Szolgáltatások
4Képesség modulok laza betöltése 4NgModulok megosztása
4NgModule API
2019. 04. 02. Webfejlesztés keretrendszerek 2
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Áttekintés
4DI
4Angular Dependency Injection 4Hierarchikus Injectorok
4DI Szolgáltatók
4DI működés közben
4Navigáció a komponens fán
2019. 04. 02. Webfejlesztés keretrendszerek 3
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Angular architektúra
2019. 04. 02. Webfejlesztés keretrendszerek 4
Fordító
DI
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Moduláris szoftver
4Információ egységbezárása 4Modul
■
Adott interfészekkel szeparált kódrész
4Hogyan?
■
SOF (Separation of Concerns) – a belső működés elrejtése
■
SRP (Single Responsibility Principle)
■
Demeter törvénye
■
Butább komponens – Karbantarthatóbb kód
■
Függőségek
2019. 04. 02. Webfejlesztés keretrendszerek 5
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Demeter törvénye
2019. 04. 02. Webfejlesztés keretrendszerek 6
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Modulok - függőségek
2019. 04. 02. Webfejlesztés keretrendszerek 7
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
DI
2019. 04. 02. Webfejlesztés keretrendszerek 8
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
DI
4konstruktor 4setter
4interfész
2019. 04. 02. Webfejlesztés keretrendszerek 9
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
DI vs. Stratégia minta
2019. 04. 02. Webfejlesztés keretrendszerek 10
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Angular DI
4Saját DI keretrendszer 4Konstruktor alapú
4Függőségek
■ Szolgáltatások
■ Egyéb objektumok (annotált)
2019. 04. 02. Webfejlesztés keretrendszerek 11
4Injektor
■ Hogyan injektáljuk a szolgáltatást? (Angular)
4Szolgáltató
■ Hogyan hozzuk létre.
Szolgáltatást?
4@Injectable()
■ providedIn – az injektálás gyökere
4@NgModule(),
@Component()
■ providers – komponens vagy modul szintű
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Angular Komponensek
4Controller 4Directive 4Pipe
2019. 04. 02. Webfejlesztés keretrendszerek 12
4Factory 4Service 4Pipe
4Provider 4Value
4Constant
Nem Injektálható
Injektálható
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Hierarchikus DI
4A szolgáltatások adott injektor szkópon belül singelton-ok
4Egy gyökér injektor
4A hierarchia mentén gyermek injektorok
■ Függetlenek egymástól
■ Saját példányok
■ Élettartama az adott komponens/modul élettartamához van kötve
■ Az ősök szkópját látja, használhatja
4Szolgáltatások függőségei, hasonló mint más komponensnél
2019. 04. 02. Webfejlesztés keretrendszerek 13
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
DI függőség
2019. 04. 02. Webfejlesztés keretrendszerek 14
4Kötelező
4Opcionális (@Optional())
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Angular DI címkék
4Karakterlánc 4Típus
4Injektor
2019. 04. 02. Webfejlesztés keretrendszerek 15
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
DI címkék
4Injektor -> szolgáltatás kapcsolat – token
■ token-szolgáltató map
4Egyszerű esteben
■ Példány – Típus
4Beépített konstansok
■ PLATFORM_INITIALIZER
2019. 04. 02. Webfejlesztés keretrendszerek 16
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
DI helyszínek
4Elem
■ @Directive
4Komponens
■ @Component
4Modul
■ @NgModule
4Platform
2019. 04. 02. Webfejlesztés keretrendszerek 17
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
DI feloldás
4Szkóp, Élettartam (Tree Shaking)
4@Host – adott szintre szűkíti a keresést
2019. 04. 02. Webfejlesztés keretrendszerek 18
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Elem DI
2019. 04. 02. Webfejlesztés keretrendszerek 19
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Komponens DI
4Párhuzamos hierarchia az alkalmazás komponens fájával
■ Szolgáltatás izoláció
■ Specializáció
2019. 04. 02. Webfejlesztés keretrendszerek 20
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
DI szolgáltatók
4A DI szolgáltató egy token segítségével konfigurált injetorral biztosítja a futásidejű függőség elemet
4Hazsnálhatunk alternatív szolgáltató által létrehozott injektort is:
■ provide
■ useClass
■ useExisting
■ useValue
■ useFactory
2019. 04. 02. Webfejlesztés keretrendszerek 21
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Alternatív osztály szolgáltatók
4Ugyanazt a szolgáltatást más osztály is adhatja
2019. 04. 02. Webfejlesztés keretrendszerek 22
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Helyettesítő osztály (Alias)
4Más néven is elérhető adott szolgáltatás
2019. 04. 02. Webfejlesztés keretrendszerek 23
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Érték biztosítók (Value provider)
4Kész objektumot szeretnénk átadni
2019. 04. 02. Webfejlesztés keretrendszerek 24
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Factory biztosítók
4A függő változó csak futási időben derül ki
4Nem szolgáltatás beburkolása szolgáltatásba
2019. 04. 02. Webfejlesztés keretrendszerek 25
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Farázás képes biztosítók
4A nem hivatkozott kódot a fordító kiveszi a csomagból
4A Farázás képes biztosítókat a fordító képes kivenni, ha nincs rájuk szükség
4NgModul és Komponens szintű injektáló biztosítók nem Farázás képesek
2019. 04. 02. Webfejlesztés keretrendszerek 26
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Farázás képes biztosító
2019. 04. 02. Webfejlesztés keretrendszerek 27
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Összefoglaló
4NgModule 4Component 4viewChild
2019. 04. 02. Webfejlesztés keretrendszerek 28
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
Áttekintés
4DI
4Angular Dependency Injection 4Hierarchikus Injectorok
4DI Szolgáltatók
4DI működés közben
2019. 04. 02. Webfejlesztés keretrendszerek 29
UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS
A következő előadás összefoglalója
4Angular Routing, Navigation
■
Router import
■
Konfiguráció
■
Router outlet
■
Router link
■
Aktív router link
■
Router állapot
■
Aktivált útvonal
■
Router események
2019. 04. 02. Webfejlesztés keretrendszerek 30