Az Angular keretrendszer folyamatosan fejlődik, újabb és újabb funkciókat és lehetőségeket kínálva a fejlesztők számára. Az egyik legnagyobb előrelépés az Ivy motor bevezetésével történt, amely számos lehetőséget kínál a hatékonyabb fejlesztéshez. A legújabb fejlesztések középpontjában a kódok gyorsabb feldolgozása, kisebb méretű csomagok készítése, valamint a fejlesztői élmény javítása áll. Ez a fejezet bemutatja, hogyan használhatjuk ki ezeket az újításokat, hogy gyorsabban és hatékonyabban dolgozhassunk Angular alkalmazások fejlesztésekor.

Az Angular egyik legfontosabb újítása az előre jelezhető stílus kötésekkel kapcsolatos változások. Az Ivy motor bevezetésével az Angular sokkal inkább kiszámíthatóvá teszi a stílusok és osztályok kötését a DOM elemekhez. Ezt egy precedenciát meghatározó szabályrendszer segíti, amely átfogja az Angular összes stílus kötési API-ját, kivéve a NgClass és NgStyle direktívákat. A templátum elemei magasabb prioritást élveznek, mint a direktívák hoszt-kötései, amelyek pedig magasabbak, mint a komponens hoszt-kötései. A stílusok, illetve CSS osztályok és stílus tulajdonságok kötésének prioritása is különbözik: az egyes osztályok és tulajdonságok kötései magasabb prioritást élveznek, mint a teljes osztályok és stílus attribútumok.

A NgClass és NgStyle direktívák minden más kötést felülbírálják. Fontos megjegyezni, hogy az Ivy nem garantálja, hogy a kötéseket és direktívákat milyen sorrendben alkalmazza, tehát egyes esetekben előfordulhat, hogy a stílusok váratlanul változhatnak. A stílusok alkalmazásának sorrendje a következő: először a legmagasabb prioritású templátum tulajdonság kötés, majd a templátum térkép kötés, és így tovább. A bindolás sorrendje a kódban nem számít, ha két kötés azonos prioritású, az utolsó kötés érvényesül.

A stílusok kötésének előrejelezhetősége lehetővé teszi a fejlettebb alkalmazások egyszerűbb implementálását. A változás, amely az Ivy-ban történt, figyelembe veszi, hogy az Angular korábbi verzióiban nem volt egyértelmű a stílusok alkalmazásának sorrendje, ami a fejlesztők számára problémákat okozhatott. Mostantól azonban az új szabályok segítenek abban, hogy világosan megértsük, hogyan hatnak a különböző típusú stílus kötésmódok a felhasználói felületre.

A következő lépés, amelyet érdemes megérteni, az, hogy hogyan lehet a direktívák és komponensek metaadatait örökölni. Az Angular Ivy lehetővé teszi, hogy a komponensek és direktívák közvetlenül örököljenek metaadatokat, például a bemeneti és kimeneti tulajdonságokat, a hosztkötéseket és a lekérdezéseket. Ez csökkenti a csomagok méretét és javítja a fordítási sebességet, mivel nem szükséges minden egyes komponensnél vagy direktívánál újra megadni a metaadatokat, amelyek már az ősosztályban benne vannak.

Például egy alapértelmezett kereső komponenst hozhatunk létre, amely tartalmazza az összes szükséges funkciót, például a kereső mezőt és az eseménykezelést. Ezután egy egyszerű keresődoboz komponenst hozhatunk létre, amely örökli az alapértelmezett kereső komponens viselkedését. Az új komponens saját stílusokat is hozzáadhat, ha szükséges, miközben az alap kereső komponens tulajdonságait örökli.

Egy másik fontos újítás az Angular eszköztárában az AOT (Ahead of Time) fordítás használata. Az AOT előfordítás lehetővé teszi, hogy a kódot már a fejlesztési folyamat során optimalizáljuk, így gyorsabb betöltődést és kisebb csomagokat érhetünk el. Az AOT segítségével a fordító a futás előtt elkészíti az összes szükséges fájlt és kódot, így csökkentve a JavaScript fájlok méretét és javítva a teljesítményt.

A fejlesztői élmény javítása szintén egy fontos szempont, amelyet az Angular folyamatosan fejleszt. Az új eszközök és beállítások lehetővé teszik, hogy a fejlesztők könnyebben konfigurálják alkalmazásaikat, egyszerűsítve a munkát és gyorsítva a fejlesztést. Az Angular szigorúbb beállításai, mint például a szigorú mód, segítenek a kód minőségének javításában, mivel a fejlesztőket arra ösztönzik, hogy jobban odafigyeljenek a típusokra és a hibákra.

Ahhoz, hogy a fejlesztői termelékenységet jelentősen növeljük, fontos, hogy a legújabb Angular verziókat használjuk, és kiaknázzuk az új lehetőségeket, amelyek lehetővé teszik a gyorsabb fejlesztést, kevesebb hibát és jobb teljesítményt. Az Angular folyamatosan fejlődik, és a fejlesztők számára mindig új eszközöket kínál, amelyek segítenek a hatékonyabb és könnyebben karbantartható alkalmazások fejlesztésében.

Hogyan kezeljük az irányultsági kérdéseket az Angular alkalmazásokban?

Az irányultság kezelésére irányuló módszerek és új API-k alkalmazása kulcsfontosságú szerepet játszanak az alkalmazások lokalizálásában és nemzetközi szintű támogatásában. Az Angular alkalmazások számára biztosított eszközök lehetővé teszik, hogy az irányultságot dinamikusan kezeljük a felhasználói felületen, figyelembe véve a különböző nyelvek és kultúrák eltérő olvasási irányait.

A queryToDirection metódus egy egyszerű módszert biztosít a lekérdezés irányultságának meghatározására. A metódus egy adott lekérdezés alapján meghatározza a kívánt irányt, majd egy irányértéket ad vissza:

typescript
private isDirection(query: string): boolean {
    return directionQueryPattern.test(query);
}


private queryToDirection(query: string): Direction {


    const { groups: { direction } = {} } = query.match(directionQueryPattern)!;
    return direction as Direction;
}

Ez a kód lehetővé teszi, hogy a lekérdezés során automatikusan beazonosítsuk a kívánt irányt, például balról jobbra (LTR) vagy jobbról balra (RTL). Az ilyen típusú irányultságok megfelelő kezelése alapvető fontosságú, különösen olyan alkalmazások esetében, amelyek több nyelvet és különböző kultúrákat támogatnak.

Az removeElement metódus az elemek eltávolítására szolgál, amelyeket az irányultsági lekérdezés nem egyezik meg az alkalmazás irányultságával. Ez biztosítja, hogy az alkalmazás az adott irányultság szerint helyesen jelenítse meg a tartalmat. Ha az alkalmazás irányultsága nem egyezik a lekérdezésben szereplő irányultsággal, akkor a következő kód eltávolítja a megfelelő elemeket:

typescript
private removeElement(): void {
    this.container.clear();
}
private removeElementOnDirectionMismatch(): void {
    const directionMismatch$ = this.#validState$.pipe(
        filter(
            ({ appDirection, queryDirection }) =>
                queryDirection !== appDirection
        )
    );
    directionMismatch$
        .pipe(takeUntil(this.#destroy))


        .subscribe(() => this.removeElement());


}

Ez a logika lehetővé teszi, hogy a felhasználói felület dinamikusan alkalmazkodjon a felhasználó által választott irányultsághoz. Ha például a felhasználó jobbról balra olvasású nyelvet választ, az összes olyan elem, amely nem illeszkedik az új irányultsághoz, eltávolításra kerül.

A tesztelés során is figyelembe kell venni az irányultságok dinamikus változását. Az Angular új típusos API-jaival a tesztek pontosabbá váltak, így a fejlesztők könnyebben biztosíthatják, hogy a különböző irányultságok megfelelően kezeltek az alkalmazásban. A TestBed.inject módszer például lehetővé teszi, hogy az Angular tesztelés során a megfelelő típusokat automatikusan kinyerjük, így elkerülhetők a típusokkal kapcsolatos hibák.

typescript
describe('TestBed injection', () => {


  it('TestBed.inject infers the dependency type', () => {
    const service = TestBed.inject(MyService);
  });
});

Ez a típusbiztos megközelítés segít abban, hogy elkerüljük a futásidejű hibákat, amelyek gyakran előfordulhatnak, ha a típusokat manuálisan kell deklarálni.

A fejlesztők számára egy másik fontos eszköz lehet a FakeMatIconRegistry, amely lehetővé teszi az Angular Material SVG ikonjainak testreszabását. Az SVG ikonok testreszabása különösen fontos lehet, ha az alkalmazás nemcsak szöveges, hanem vizuális elemeket is tartalmaz, amelyek irányultságokhoz és lokalizált tartalomhoz kapcsolódnak.

A változó irányultságok kezelése mellett fontos megjegyezni, hogy az alkalmazások lokalizálása nem csupán az irányultságok és nyelvek kezelésére terjed ki. Az alkalmazás teljes funkcionalitásának biztosítása érdekében számos egyéb tényezőt is figyelembe kell venni, például a különböző regionális szabványok, dátumformátumok, pénznemek és mérési rendszerek kezelését. A nemzetközi alkalmazásokban alapvető fontosságú, hogy az összes felhasználói interakció zökkenőmentesen illeszkedjen a felhasználók egyedi igényeihez és preferenciáihoz.

Jak si připravit dokonalé zákusky pro každou příležitost: Tipy a triky na domácí pečení
Jak rozeznat pravdu v mezilidských vztazích a jak zvládat nejistotu v životě
Jak správně řídit testování v DevOps a minimalizovat rizika?