2022. augusztus 24.
Az Angular keretrendszer a mobil és a webes alkalmazások fejlesztését teszi lehetővé. Első verzióját 2009-ben mutatták be, ma pedig már az egyik legnépszerűbb technológia, amit a JavaScript fejlesztők használnak. De mi is az az Angular keretrendszer? Milyen elvek alapján működik és miben más, mint a Facebook által kifejlesztett nagy konkurens, a React? Nézzük a részleteket!
Mi az az Angular keretrendszer?
Az Angular egy webalkalmazás-keretrendszer, ami a Google nevéhez köthető. TypeScript programozási nyelv alapú, ingyenes és nyílt forráskód segítségével érhető el a rendszer, ami meglehetősen nagy népszerűségnek örvend. Az Angular vagy más néven Angular 2 valójában az AngularJS átírása.
A frontend framework használatával a webes appok fejlesztése egyszerű: a HTML eszköztárát kiterjeszti és kiegészíti, az alkalmazás felépítésében helyet kapó elemek pedig követhetően elkülönülnek. A kód leegyszerűsödik az adatkapcsolás és a függőség injektálásának következtében.
A keretrendszer célja, hogy a DOM, vagyis a Dokumentum Objektum Modell manipuláció és az alkalmazás logikája különváljon, ugyanígy a kliens oldal és a szerveroldal is. Magába foglalja a tesztelés fontosságát, ami legalább akkora jelentőséggel bír, mint a program megírása. A megközelítés szerint az üzleti vonulatot az imperatív programozás képviseli, míg a felület meghatározásához egy deklaratív leírás a legjobb.
Az Angular keretrendszer alapjához különféle modulok csatolhatók, amelyek az eszköztár bővítését szolgálják, de természetesen új, saját kiegészítéseket is lehet írni és hozzákapcsolni a rendszerhez.
A felépítés
Az Angular alkalmazások felépítésében az MVC, vagyis Model View Controller játssza a fő szerepet. A HTML fájl tehát maga a nézet, a modellek és a kontrollerek pedig JavaScript használatával készülnek el.
Az egyirányú adatkapcsolás lényege, hogy a template és a modell komponenseket egyesíti egyetlen nézetté. Amennyiben ez megtörtént, de később a modell komponensen változtatni kell, úgy érdemes ügyelni arra, hogy a nézetben ezek a módosítások nem jelennek meg automatikusan, és a nézetben végrehajtott változások sincsenek visszavezetve a modellbe. Ezt az állapotot a fejlesztők úgy tudták feloldani, hogy gondoskodtak a komponensek közötti folyamatos szinkronizálásról.
Az Angular azonban megoldást kínál erre a problémára. A kétirányú adatkapcsolás ugyanis lehetővé teszi a szinkronizált változtatást. Az egyirányú adatkapcsoláshoz képest más megközelítést alkalmaz, mivel ebben az esetben a nézet a modell projekciójának tekinthető, vagyis a nézet változásai tükröződnek a modellben és a modellben eszközölt módosítások is eljutnak a nézetbe.
A HTM szabványra épít, de kibővíti azt különféle direktívákkal. Ezek előnye, hogy szükségtelenné teszik a közvetlen DOM manipulációt. Ilyen direktíva például az ng-contorller, amivel meghatározhatjuk, hogy melyik kontroller alkalmazását tűztük ki célul vagy az ng-class, ami lehetővé teszi a CSS osztályok dinamikus betöltését.
Az Angularban használt kifejezések a JavaScript kifejezésekre, van azonban néhány kivétel. Ilyen például a kontextus, ami az Angular esetén a scope objektum, a JavaScriptnél viszont a window. Különbség továbbá, hogy a JavaScript esetében a nem definiált tulajdonságok kiértékelése során hibaüzenet jön vissza, az Angular esetében azonban nem. Az Angularban nincs elágazás, ciklus, kivétel, vannak azonban különféle szűrök, amiket alkalmazni lehet.
Mielőtt összevetnének a konkurens Reacttal, ejtsünk néhány szót a kontrollerekről! Az Angular kontrollerek nyelve a JavaScript. Ezek alkalmasak az objektumok inicializálására, illetve egy-egy objektum viselkedésének meghatározására.
Angular van React?
A React önmagában webalkalmazások fejlesztésére nem alkalmas, mivel komponens alapú nézetek készítésére hozták létre. Az egyirányú adatforgalmat a Flux architektúra valósítja meg. Ezzel szemben az Angular rendszerben a user interface a komponensekből épül fel.
A nyelvek tekintetében elmondható, hogy a React esetén az ES6 szabványt és a JavaScriptet is lehet alkalmazni, míg az Angular TypeScriptben készül és egy átalakító program segítségével lesz belőle JavaScript fájl. Kliens oldali rendelést tesz lehetővé mindkét technológia, ez azonban a SEO szempontjából nem előnyös, nem a teljes HTML tartalmat adja vissza, amennyiben megosztjuk a social media területén. Az Angular ezt a problémát az Angular Universal könyvtárral küszöböli ki, ennek segítségével social media barát tartalom jön létre.
Ha már a JavaScript keretrendszerről beszélünk, szót kell ejteni a Vue.js-ről is, amelynek hatalmas előnye, hogy az üzleti logika és a megjelenés elválik. Akár összetett alkalmazásokat is lehet használatával fejleszteni, köszönhetően annak, hogy több könyvtárral lehet bővíteni. Az Angular és a React keretrendszerekhez képest óriási előnye, hogy lépésenként lehet elsajátítani, így viszonylag hamar el lehet kezdeni a fejlesztést.
A SynerinSoft az Angular keretrendszert alkalmazza az egyedi szoftverfejlesztés során. Ismerd meg, hogyan dolgozunk!
