Přehled AngularJS Architecture

AngularJS je rámec navržený tak, aby rozšířil možnosti HTML z jednoduchého statického jazyka na dynamičtější jazyk pro intuitivní data na straně klienta. AngularJS je 100% JavaScript. Pomáhá psát spravovanější kód na straně klienta. Poskytuje vývojáři větší kontrolu nad kódem a manipulaci s daty na samotné straně klienta. Aby toho bylo dosaženo, má AngularJS správný návrhový vzor. Tomu se říká vzor MVC. Podívejme se na to více v další části. V tomto tématu se budeme učit o AngularJS Architecture .

Architektura

AngularJS je postaven na návrhovém vzoru MVC. Principy architektury MVC jsou v AngularJS velmi dobře začleněny. Jeden mohl vědět, že MVC je robustní architektura pro mnoho jazyků na straně serveru. AngularJS sloučil také MVC vzor na straně klienta.

MVC - Model, Pohled, Řadič

Vzor MVC je zkratkou vzoru Model View Controller.

  • Modelka

Je to nejnižší úroveň architektury. Je zodpovědný za uchovávání a údržbu dat aplikace. Data jsou udržována po celou dobu životnosti stránky a někdy i mezi stránkami. Model se aktualizuje na základě pokynů obdržených od kontroléru.

  • Pohled

Pohled je přední strana aplikace. Je to prezentační vrstva architektury zodpovědná za zobrazování dat uživateli. Obsahuje kompletní kód pro stránky uživatelského rozhraní v libovolném jazyce kompatibilním s prohlížečem, obvykle HTML. Pohled je spouštěn příslušným ovladačem. Pohled odešle požadavky do svého řadiče na základě interakce uživatele s aplikací. Řadič poté regeneruje pohled na základě odpovědi přijaté ze serveru.

  • Ovladač

Řadič je zpracovatelský mozek za pohledem a modelem. Rozhodnutí se generuje, regeneruje nebo ničí pohled a model. Všechny obchodní operace a logika kódů jsou zapsány uvnitř řadiče. (Někteří vývojáři dávají přednost psaní obchodní logiky do samotného modelu). Řadič je také zodpovědný za odesílání požadavků na server a přijímání odpovědi. Poté aktualizuje zobrazení a model na základě odpovědi. Stručně řečeno, ovladač řídí vše.

Architektura MVC může být graficky znázorněna pomocí obrázku níže.

MVC je robustní, protože je založeno na principu vývoje softwaru Separation of Concerns. Existuje několik řadičů, které provozují konkrétní sady dat a spravují příslušné pohledy a modely. Logika aplikace je tedy oddělena od vrstvy uživatelského rozhraní.

MVC v AngularJS

Všechno to bylo o MVC a jeho principech. Jak jsou tyto zásady implementovány v AngularJS? Pojďme to pochopit.

  • Scope - Scope je model, který obsahuje aplikační data. Proměnné rozsahu jsou připojeny k DOMu a vlastnosti proměnných jsou přístupné prostřednictvím vazeb.
  • HTML s vázáním dat - Pohled v AngularJS není normální HTML. Jedná se o datově vázaný HTML. Vazba dat pomáhá vykreslit dynamická data ve značkách HTML. Tímto způsobem model pravidelně aktualizuje DOM.
  • ngController - Směrnice ngController odpovídá za spolupráci mezi modelem, pohledem a obchodní logikou. Třída řadiče určená směrnicí ngController řídí rozsah a pohled.

Koncepční přehled

Dobře, takže nyní chápeme, že AngularJS je postaven na architektuře MVC. Je to všechno? Není ve hře nic jiného? Samozřejmě, že ano.

Existuje několik důležitých konceptů, které je třeba pochopit, abychom pochopili chování aplikací AngularJS. Pojďme jim rozumět.

  • Šablony

Šablony jsou prvky HTML a prvky a atributy specifické pro AngularJS. Dynamiky v aplikacích AngularJS je dosaženo kombinací šablony s daty z modelu a řídicí jednotky.

  • Směrnice

Směrnice jsou atributy nebo prvky, které představují opakovaně použitelnou komponentu DOM. Směrnice přímo manipulují s podkladovým HTML DOM, aby vykreslily dynamické zobrazení. Tím se vývojář zbavuje starostí o nativní prvky HTML a atributy.

  • Obousměrné vázání dat

AngularJS automaticky synchronizuje data mezi modelem a pohledem prostřednictvím vazby dat. Model je považován za jediný zdroj pravdy pro vaše aplikační data. Pohled je projekcí modelu za všech okolností. Jakmile se model změní, pohled se změní a naopak. Toto se nazývá obousměrná vazba. To je dosaženo živým kompilací šablony do prohlížeče.

  • Směrování

AngularJS aplikace jsou jednostránkové aplikace (SPA), hodně se zaměřuje na směrování mezi stránkami. AngularJS má robustní směrovací mechanismus, který provádí porovnávání URL ze seznamu tras specifikovaných ve směrovači asociovaném s komponentou. To znamená, že kdykoli prohlížeč požaduje adresu URL, přidružená podřízená komponenta se vykreslí spíše než celá stránka.

  • Služby

Řadič je spojen s pohledem. To znamená, že je dobrým zvykem psát pouze ten kód uvnitř kontroléru, který je pro jeho zobrazení logicky užitečný. Logiku nezávislou na pohledu lze přesunout jinde, takže ji lze znovu použít i jiné ovladače.

Zde přicházejí Služby v akci. Služby oddělují opakovaně použitelnou obchodní logiku od logiky specifické pro zobrazení. Logika specifická pro pohled se potom nachází uvnitř konkrétních řadičů, zatímco společná obchodní logika je sdílena všemi řadiči.

Obecně platí, že kód pro přístup k datům backendu je také zapsán ve službách.

  • Vstřikování závislosti

Jak jsme nyní přesunuli logiku nezávislou na pohledu do sdíleného umístění, jak ovládáme oprávnění pro přístup ke sdíleným službám? To se provádí pomocí Dependency Injection (DI). Dependency Injection je softwarový návrhový vzorec, který se zabývá tím, jak jsou vytvářeny objekty a jak získávají své závislosti. Všechno v AngularJS, od směrnic přes ovladače až po služby a téměř všechno, je zapojeno přes DI.

Fun Fact of AngularJS Architecture

AngularJS byl pojmenován jako AngularJS kvůli úhlovým závorkám ve značkách HTML. Projekt byl navržen tak, aby byl HTML dynamičtější a vstřícnější k datům, a proto se vývojáři rozhodli pojmenovat ho podle hranatých závorek v HTML.

Závěr - AngularJS Architecture

Článek pokrývá všechny důležité pojmy architektury AngularJS. Toto je dobrý úvod k pochopení fungování různých prvků vaší aplikace AngularJS. Dalším krokem je vytvoření plně funkční multi-řadičové aplikace AngularJS, která také stahuje data z backendu. To by vám zajistilo dobrou praktickou praxi v koncepcích AngularJS.

Doporučené články

Toto je průvodce architekturou AngularJS. Zde diskutujeme architekturu, MVC v angularjs a koncepční přehled. Další informace naleznete také v dalších navrhovaných článcích -

  1. Kariéra v AngularJS
  2. AngularJS Interview Otázky
  3. Co je Backbone.js?
  4. Software pro dolování dat

Kategorie:

Vývoj softwaru