Prehľad architektúry AngularJS

AngularJS je rámec navrhnutý na rozšírenie možností HTML z jednoduchého statického jazyka na dynamickejší jazyk intuitívny na strane klienta. AngularJS je 100% JavaScript. Pomáha písať spravovanejší kód na strane klienta. Poskytuje vývojárovi väčšiu kontrolu nad kódom a manipuláciu s údajmi na samotnej strane klienta. Na dosiahnutie tohto cieľa má AngularJS správny dizajnový vzor. Toto sa nazýva vzor MVC. Poďme sa dozvedieť viac o tom v nasledujúcej časti. V tejto téme sa dozvieme o architektúre AngularJS .

Architektúra

AngularJS je postavený na návrhovom vzore MVC. Princípy architektúry MVC sú v AngularJS veľmi dobre zakomponované. Jeden mohol vedieť, že MVC je robustnou architektúrou pre mnoho jazykov na strane servera. AngularJS zlúčil aj MVC vzor na strane klienta.

MVC - Model, Pohľad, Ovládač

Vzor MVC je skratka pre model Model View Controller.

  • Model

Je to najnižšia úroveň architektúry. Je zodpovedný za uchovávanie a udržiavanie aplikačných údajov. Údaje sa uchovávajú počas celého životného cyklu stránky a niekedy aj medzi stranami. Model sa aktualizuje na základe pokynov získaných od ovládača.

  • vyhliadka

Pohľad je predná strana aplikácie. Je to prezentačná vrstva architektúry zodpovedná za zobrazovanie údajov užívateľovi. Obsahuje kompletný kód pre stránky UI v akomkoľvek jazyku kompatibilnom s prehliadačom, zvyčajne HTML. Pohľad vyvoláva príslušný kontrolér. Pohľad odošle požiadavky do svojho radiča na základe interakcie používateľa s aplikáciou. Riadiaca jednotka potom regeneruje pohľad na základe odpovede prijatej zo servera.

  • kontrolór

Ovládač je spracovateľský mozog za zobrazením a modelom. Rozhoduje o vytvorení, regenerácii alebo zničení pohľadu a modelu. Všetky obchodné operácie a logika kódov sú napísané vnútri kontroléra. (Niektorí vývojári uprednostňujú písanie obchodnej logiky v samotnom modeli). Radič je tiež zodpovedný za odosielanie požiadaviek na server a prijímanie odpovedí. Potom aktualizuje zobrazenie a model na základe odpovede. Stručne povedané, ovládač riadi všetko.

Architektúra MVC môže byť graficky znázornená na obrázku nižšie.

MVC je robustný, pretože je založený na princípe vývoja softvéru Separation of Concerns. Existuje niekoľko radičov, ktoré prevádzkujú konkrétne súbory údajov a spravujú príslušné pohľady a modely. Logika aplikácie je teda oddelená od vrstvy používateľského rozhrania.

MVC v AngularJS

Všetko sa týkalo MVC a jeho princípov. Ako sú tieto princípy implementované v AngularJS? Poďme to pochopiť.

  • Rozsah - rozsah je model, ktorý obsahuje aplikačné údaje. Premenné rozsahu sú pripojené k DOM a vlastnosti premenných sú prístupné prostredníctvom väzieb.
  • HTML s väzbou na dáta - zobrazenie v AngularJS nie je bežné HTML. Je to HTML viazané na údaje. Viazanie údajov pomáha vykresľovať dynamické údaje v značkách HTML. Týmto spôsobom model pravidelne aktualizuje DOM.
  • ngController - Smernica ngController je zodpovedná za spoluprácu medzi modelovou, zobrazovacou a obchodnou logikou. Trieda radiča špecifikovaná smernicou ngController riadi rozsah a pohľad.

Koncepčný prehľad

Dobre, takže teraz chápeme, že AngularJS je postavený na architektúre MVC. Je to všetko? Nehrá sa nič iné? Samozrejme, že existuje.

Existuje niekoľko dôležitých konceptov, ktorým je potrebné porozumieť, aby sme pochopili správanie aplikácií AngularJS. Poďme im porozumieť.

  • šablóny

Šablóny sú prvky HTML spolu s prvkami a atribútmi špecifickými pre AngularJS. Dynamika v aplikáciách AngularJS sa dosahuje kombináciou šablóny s údajmi z modelu a kontroléra.

  • smernice

Smernice sú atribúty alebo prvky, ktoré predstavujú opakovane použiteľnú súčasť DOM. Smernice priamo manipulujú s podkladovým domérom HTML, aby poskytli dynamické zobrazenie. Tým sa vývojár zbavuje starostí o natívne prvky a atribúty HTML.

  • Obojsmerné viazanie údajov

AngularJS automaticky synchronizuje údaje medzi modelom a zobrazením prostredníctvom viazania údajov. Model sa považuje za jediný zdroj pravdy pre vaše aplikačné údaje. Pohľad je projekcia modelu za všetkých okolností. Akonáhle sa model zmení, pohľad sa zmení a naopak. Toto sa nazýva obojsmerná väzba. Dosahuje sa to prostredníctvom živého kompilácie šablóny do prehliadača.

  • smerovanie

AngularJS aplikácie sú jednostránkové aplikácie (SPA), veľa sa kladie na smerovanie medzi stránkami. AngularJS má robustný smerovací mechanizmus, ktorý robí párovanie adries URL zo zoznamu trás špecifikovaných v smerovači spojenom s komponentom. To znamená, že vždy, keď prehliadač požaduje adresu URL, sa priradený podradený komponent vykreslí skôr ako celá stránka.

  • služby

Ovládač je spojený s výhľadom. To znamená, že je dobrým zvykom zapisovať do kontroléra iba ten kód, ktorý je z jeho pohľadu logicky užitočný. Logiku nezávislú od pohľadu je možné presunúť inde, takže ju môžu znovu použiť aj iné radiče.

Tu prichádzajú služby do činnosti. Služby oddeľujú opakovane použiteľnú obchodnú logiku od logiky špecifickej pre zobrazenie. Logika špecifická pre zobrazenie sa potom nachádza vo vnútri konkrétnych radičov, zatiaľ čo spoločnú obchodnú logiku zdieľajú všetky radiče.

Spravidla sa v službách napíše aj kód na prístup k údajom typu backend.

  • Vstrekovanie závislosti

Ako sme teraz presúvali logiku nezávislú od pohľadu na zdieľané miesto, ako riadime povolenia na prístup k zdieľaným službám? To sa deje pomocou Dependency Injection (DI). Dependency Injection je vzor návrhu softvéru, ktorý sa zaoberá tým, ako sa vytvárajú objekty a ako sa zmocňujú svojich závislostí. Všetko v AngularJS, od smerníc, cez kontroléry až po služby a skoro všetko, je zapojené cez DI.

Zábavná skutočnosť architektúry AngularJS

AngularJS bol pomenovaný ako AngularJS kvôli uhlovým zátvorkám v značkách HTML. Projekt bol navrhnutý tak, aby bol HTML dynamickejší a ústretovejší pre údaje, a preto sa vývojári rozhodli pomenovať ho podľa hranatých zátvoriek v HTML.

Záver - AngularJS Architecture

Článok pokrýva všetky dôležité pojmy architektúry AngularJS. Toto je dobrý úvod k pochopeniu fungovania rôznych prvkov vašej aplikácie AngularJS. Ďalším krokom je vytvorenie plne funkčnej aplikácie s viacerými regulátormi AngularJS, ktorá tiež načíta údaje zo koncového zariadenia. Takto získate dobrú praktickú prax týkajúcu sa konceptov AngularJS.

Odporúčané články

Toto je sprievodca architektúrou AngularJS. Tu diskutujeme architektúru, MVC v angularjs a koncepčný prehľad. Viac informácií nájdete aj v ďalších navrhovaných článkoch -

  1. Kariéra v AngularJS
  2. AngularJS Interview Otázky
  3. Čo je Backbone.js?
  4. Softvér na dolovanie dát

Kategórie:

Vývoj softvéru