Az Angular egy népszerű webfejlesztési keretrendszer kliensoldali alkalmazások építésére. Az Angular komponens alapú architektúrát követ, megkönnyítve az alkalmazás kezelését és modularizálását. Az Angular összetevői többféleképpen használhatók a webalkalmazásokon belül. Ez a blogbejegyzés átfogó magyarázatot ad az Angular alkalmazások összetevőiről.
Angular alkatrészek
Mint már említettem, az Angular egy komponens alapú architektúrát követ, amely az Angular alapfogalma, és döntő szerepet játszik az Angular alkalmazások strukturálásában és szervezésében. Segít az alkalmazást kisebb, újrafelhasználható építőelemekre, úgynevezett összetevőkre bontani.
A komponens az Angular kulcsfontosságú funkciója, amely az Angular alkalmazás alapvető felhasználói felületének építőelemeként működik. Egy komponens nem más, mint egy TypeScript osztály dekorátorral (@). HTML-fájlokban használható módszereket és tulajdonságokat tartalmaz.
Az alkatrészeket úgy tervezték, hogy újrafelhasználhatók legyenek. Miután létrehozta az összetevőt az alkalmazás egy adott részéhez, többször is felhasználhatja az alkalmazás során. Ez az újrafelhasználhatóság csökkenti a kód ismétlődését és elősegíti a konzisztenciát.
AppComponent
Amikor új Angular projektet hoz létre az Angular cli paranccsal (ng new project-name), alapértelmezés szerint létrehoz egy AppComponent nevű összetevőt az src/app-ban.
Ez az AppComponent a gyökérkomponens, és a teljes alkalmazás sablonját tartalmazza. Ez a gyökérkomponens több összetevőt is beágyazhat gyermekkomponensként. Egy szögprojektnek legalább egy összetevővel kell rendelkeznie.
@Összetevő
Ez az összetevődekorátor egy osztály szögletes komponenssé tételére szolgál, és további metaadatokat biztosít, amelyek meghatározzák az összetevő feldolgozásának módját. A fenti példában az alkatrészdekorátornak három tulajdonsága van.
választó: A kiválasztó tulajdonság meghatározza a gyökérkomponenst képviselő egyéni HTML-elem-választót.
templateUrl: A templateUrl tulajdonság az összetevő nézetét meghatározó HTML-sablonfájl elérési útját adja meg. Ez a sablon tartalmazza azt a HTML-jelölést, amelyet az Angular megjelenít az összetevőhöz.
styleUrls: A styleUrls tulajdonság egy tömb, amely felsorolja a külső stílusfájlok (CSS vagy SCSS) elérési útjait az összetevő stílusának kialakításához.
Például, ha a választó „app-root”, akkor a HTML-fájlban (index.html) az „app-root›‹/app-root” elemet használhatjuk ennek az összetevőnek a felvételéhez. Ezt az ‹app-root› címkét az app.component.html fájlba írt html-kód váltja fel, amely a templateUrl-ben van definiálva. Az app.component.css fájlt külső stíluslapként használja ehhez az összetevőhöz.
Hozzon létre egy egyéni összetevőt
Az AppComponent alapértelmezés szerint új Angular projekt létrehozásakor jön létre. Ha új egyéni komponenst szeretnénk létrehozni, használjuk az Angular cli parancsot: ng generate Component Component-name.
Ez a parancs létrehoz egy mappát az src/app komponens fájljaival.
- nav-bar.component.ts: Az összetevőosztályt tartalmazó TypeScript-fájl
- nav-bar.component.html: A Navbar összetevő HTML-sablonja.
- nav-bar.component.css: A CSS-fájl az összetevő-specifikus stílusokhoz.
- nav-bar.component.spec.ts: Az összetevő egységtesztfájlja.
Gyermek komponens:
A szögletes alkalmazások jellemzően hierarchikus felépítésűek, ahol a komponensek faszerűen vannak szervezve. A gyökérben van a fő összetevő, és ennek lehetnek gyermek összetevői, amelyeknek viszont lehetnek gyermekkomponensei, amelyek egy komponensfát alkotnak.
Például az ábrán látható sablonhoz hasonló weboldal létrehozásához külön határozza meg a navigációs sáv, a fejléc, a lábléc és a fő tartalomterület összetevőit.
Ezeket az alkatrészeket újra felhasználhatjuk, ahol csak akarjuk. Ezek az összetevők gyermekkomponensként működnek, és az AppComponent nevű szülőkomponensbe vannak beágyazva.
Ha ezeket az összetevőket fel szeretné venni a sablonba, használhat egyéni összetevő-választókat az AppComponent sablonban (amely általában az app.component.html fájlban van meghatározva).
<div> <app-navbar></app-navbar> <app-header></app-header> <app-content></app-content> <app-footer></app-footer> </div>
Ebben a sablonban az egyéni összetevők ("app-navbar", "app-header", "app-content" és "app-footer") a megfelelő választóik segítségével szerepelnek. Ezek az összetevők felelősek saját tartalmuk és funkcióik megjelenítéséért. Például az ‹app-navbar› a navigációs sáv összetevőjében meghatározott HTML-fájlt jeleníti meg.
Következtetés
Az Angular összetevői számos előnnyel járnak, beleértve a modularitást, az újrafelhasználhatóságot, a tokozást és az összetett, karbantartható webalkalmazások létrehozásának támogatását. Ezek a funkciók az Angular-t a modern webfejlesztés robusztus keretévé teszik.
