Az AngularJS architektúra áttekintése

Az AngularJS egy olyan keret, amelyet arra terveztek, hogy kiterjessze a HTML képességeit az egyszerű statikus nyelvről egy dinamikusabb ügyféloldali adat-intuitív nyelvre. Az AngularJS 100% JavaScript. Segít egy jobban kezelt ügyféloldali kód megírásában. Ez a fejlesztő számára nagyobb kódvezérlést és adatmanipulációs képességeket biztosít magában az ügyféloldalon. Ennek elérése érdekében az AngularJS-nek megfelelő tervezési mintája van a helyén. Ezt MVC mintának nevezzük. Megértjük többet róla a következő szakaszban. Ebben a témában megismerjük az AngularJS architektúrát .

Az építészet

Az AngularJS az MVC tervezési mintájára épül. Az MVC architektúra mögött meghúzódó alapelvek nagyon jól beépülnek az AngularJS-be. Lehet, hogy az MVC robusztus architektúrának számított sok szerveroldali nyelv számára. Az AngularJS az ügyféloldalon is egyesítette az MVC mintázatot.

MVC - modell, nézet, vezérlő

Az MVC minta a Model View Controller mintát jelenti.

  • Modell

Ez az építészet legalacsonyabb szintje. Feladata az alkalmazás adatainak tárolása és karbantartása. Az adatokat az oldal teljes életciklusa alatt, és néha az oldalak között is megőrzik. A modell frissíti magát a vezérlőtől kapott utasítások alapján.

  • Kilátás

A nézet az alkalmazás elülső oldala. Ez az architektúra bemutató rétege, amely felelős az adatok felhasználó számára történő megjelenítéséért. Az UI-oldalak teljes kódját tárolja bármilyen böngészővel kompatibilis nyelven, általában HTML-ben. A nézetet a megfelelő vezérlő indítja el. A nézet kéréseket küld a vezérlőjének, az alkalmazáskal való felhasználói interakció alapján. A vezérlő ezután a kiszolgálótól kapott válasz alapján regenerálja a nézetet.

  • Vezérlő

A vezérlő a feldolgozási agy a nézet és a modell mögött. Döntéseket hoz a nézet és a modell generálására, újjáépítésére vagy megsemmisítésére. Az összes üzleti művelet és kódlogika a vezérlő belsejébe kerül. (Néhány fejlesztő inkább az üzleti logika írását maga a modell írja le). A vezérlő felelős az is, hogy kéréseket küldjön a szervernek és válaszokat kapjon. Ezután a válasz alapján frissíti a Nézetet és a Modellt. Röviden: a vezérlő mindent irányít.

Az MVC architektúráját az alábbi kép ábrázolja grafikusan.

Az MVC robusztus, mivel a Szoftverfejlesztés elvén alapul, a Gondolatok szétválasztása. Számos olyan vezérlő működik, amely bizonyos adatkészleteket működtet, és a megfelelő nézeteket és modelleket kezeli. Az alkalmazás logikája tehát el van választva a felhasználói felület rétegétől.

MVC az AngularJS-ben

Ez az MVC-ről és annak alapelveiről szól. Hogyan valósítják meg ezeket az elveket az AngularJS-ben? Megértjük.

  • Hatókör - A Scope az a modell, amely az alkalmazás adatait tárolja. A hatókör-változók a DOM-hoz csatolódnak, és a változó tulajdonságai kötésekkel érhetők el.
  • HTML adatkötéssel - az AngularJS nézete nem szabályos HTML. Ez egy adatkötött HTML. Az adat-összerendelés segít dinamikus adatok megjelenítésében a HTML-címkékben. Ily módon a modell rendszeresen frissíti a DOM-ot.
  • ngController - Az ngController irányelv felelős a modell, a nézet és az üzleti logika közötti együttműködésért. Az ngController irányelv által meghatározott vezérlőosztály vezérli a hatókört és a nézetet.

Fogalmi áttekintés

Oké, tehát most megértjük, hogy az AngularJS az MVC architektúrára épül. Ez minden? Nincs itt semmi más? Természetesen van.

Van néhány fontos fogalom, amelyeket meg kell értenünk ahhoz, hogy megértsük az AngularJS alkalmazások viselkedését. Megértjük őket.

  • sablonok

A sablonok a HTML elemek, valamint az AngularJS-specifikus elemek és attribútumok. Az AngularJS alkalmazások dinamikáját a sablonnak a modell és a vezérlő adataival történő kombinálásával érik el.

  • irányelvek

Az irányelvek olyan attribútumok vagy elemek, amelyek újrafelhasználható DOM-összetevőt képviselnek. Az irányelvek közvetlenül manipulálják a mögöttes HTML DOM-ot a dinamikus nézet megjelenítéséhez. Ez mentesíti a fejlesztőt attól, hogy aggódjon a natív HTML elemek és attribútumok miatt.

  • Kétirányú adatkötés

Az AngularJS automatikusan szinkronizálja az adatokat a modell és a nézet között az adatmegkötéssel. A modell egyetlen igazságforrásnak tekinthető az alkalmazás adataihoz. A nézet mindig a modell vetülete. Amint a modell megváltozik, a nézet megváltozik, és fordítva. Ezt kétirányú kötésnek nevezzük. Ezt a sablonnak a böngészőre történő élő összeállításával érik el.

  • útvonalválasztás

Az AngularJS alkalmazások egyoldalas alkalmazások (SPA), és nagy hangsúlyt fektetnek az oldalak közötti útválasztásra. Az AngularJS robusztus útválasztási mechanizmussal rendelkezik, amely elvégzi az URL-egyezést az összetevőhöz tartozó útválasztóban megadott útvonalak listájából. Ez azt jelenti, hogy amikor egy böngésző URL-t kér, egy társított gyermek összetevő kerül előállításra, nem pedig egy teljes oldalra.

  • Szolgáltatások

A vezérlő egy nézettel van felszerelve. Ez azt jelenti, hogy jó gyakorlat, hogy csak azt a kódot írja be a vezérlőbe, amely logikai szempontból hasznos a nézetéhez. A nézettől független logika máshova is áthelyezhető, hogy más vezérlők is felhasználhassák.

Itt jönnek a Szolgáltatások akcióban. A szolgáltatások elválasztják az újrafelhasználható üzleti logikát a konkrét logikától. A nézetspecifikus logika ezután az adott vezérlők belsejében rejlik, míg a közös üzleti logikát az összes vezérlő osztja meg.

Általános hüvelykujjszabályként a háttér-adatok eléréséhez használt kódot a szolgáltatások is megírják.

  • Függőség-befecskendezés

Most, hogy a nézettől független logikákat áthelyeztük egy megosztott helyre, hogyan lehet ellenőrizni a megosztott szolgáltatásokhoz való hozzáférés engedélyét? Ez a Dependency Injection (DI) segítségével történik. A Dependency Injection egy olyan szoftvertervezési minta, amely tárgyalja az objektumok létrehozásának módját és azt, hogy hogyan tudják megőrizni függőségüket. Az AngularJS-ben minden, az irányelvektől a vezérlőkig és a szolgáltatásokig, és egészen mindent a DI-n keresztül vezetékes.

Az AngularJS építészet szórakoztató ténye

A HTML-címkék szögletes zárójelek miatt az AngularJS-t AngularJS-nek nevezték el. A projektet úgy tervezték, hogy dinamikusabbá és adatbarátabbá tegye a HTML-t, ezért a fejlesztők úgy döntöttek, hogy elnevezik a HTML szögletes zárójelek szerint.

Következtetés - AngularJS architektúra

A cikk az AngularJS architektúra minden fontos fogalmát lefedi. Ez jó előrelépés az AngularJS alkalmazás különféle elemeinek működésének megértéséhez. A következő lépés egy teljesen működőképes többvezérlő AngularJS alkalmazás létrehozása, amely az adatokat a háttérből is lehozza. Ez jó gyakorlati tapasztalatokat szerezhet az AngularJS koncepcióival kapcsolatban.

Ajánlott cikkek

Ez egy útmutató az AngularJS architektúrához. Itt tárgyaljuk az architektúrát, az MVC-t a sarokban és a fogalmi áttekintést. A további javasolt cikkeken keresztül további információkat is megtudhat -

  1. Karrier az AngularJS-ben
  2. AngularJS interjúkérdések
  3. Mi a Backbone.js?
  4. Adatbányászati ​​szoftver

Kategória:

Szoftverfejlesztés