Obecná definice

Základní myšlenkou MVC architektury je oddělení logiky od výstupu. Řeší tedy problém tzv. "špagetového kódu", kdy máme v jednom souboru (třídě) logické operace a zároveň renderování výstupu. Soubor tedy obsahuje databázové dotazy, logiku (např. PHP operace) a různě poházené HTML tagy. Vše je zamotané do sebe jako špagety.

Kód se samozřejmě špatně udržuje, natož rozšiřuje. Je špatně highlightovaný, protože si s ním IDE neví rady, HTML není správně naformátováno, ztrácíme se v jeho stromové struktuře. Naším cílem je, aby zdrojový kód s logikou vypadal jako zdrojový kód (např. PHP) a výstup vypadal jako HTML stránka s co nejmenší příměsí dalšího kódu.

Části MVC - komponenty

MVC je zkratka tří slov: Model, View a Controller, které jsou níže probrány z pohledu TypeScriptu uvnitř Angularu, tedy tak jak jsou využívány. Jedná se o základní použití, proto se lze setkat (zřídka) i s rozdíly v závislosti na verzi Angularu nebo použitých knihovnách.

Zjednodušeně lze říci:

View = to co uživatel vidí a s čím interaguje

Model = struktura dat se kterou pracujeme v Angularu

Controller = logika aplikace, to co poslouchá a ovládá view (vložení dat, kliknutí na tlačítka uvnitř View)

Model

Z pohledu Frontendu v Angularu

Jedná většinou o pouhý interface - strukturu klíčů a datových týpů pro našeptávač. Může se však jednat i o class, type nebo jiné datové struktury.

Níže je uvedena ukázka jak by mohl vypadat Model právě jednoho Country, tedy jedné země v jazyku TypeScript.

<aside> ☝ Interface je vysvětlen v OOP TypeScript uvnitř sekce ‣

</aside>

<aside> 💡 Interface nemusí sloužit jen jako předpis pro class, ale lze jej využít jako předpis obecné struktury.

</aside>

export interface Country {
  area: number;
  cca2: string;
  name: CountryName
}

export interface CountryName {
  common: string;
  official: string;
}

Používá se pak třeba v proměnných a lze jej chápat jako vlastní datový typ.

const country: Country = {...}

Z pohledu Backendu

Se jedná o zaslání dat přes HTTP protokol ve nejčastěji ve formátu JSON. Tedy říkáme, že API komunikuje ve formátu REST API. Jak se o věci v modelu stará frontned, je vždy na daném frameworku/nástroji. Například používá výše zmíněné interface.

<aside> 💡 V případě, že by data se vracela z backendu (API) jako XML - SOAP API je dobré zjistit jestli API neumí vracet i data v REST, tedy v JSON. Mnohdy stačí nastavit jenom HTTP hlavičku místo 'Content-Type'=>'application/xml' na 'Content-Type'=>'application/json' avšak, tuto techniku musí podporovat Backendová technologie - tedy API!

</aside>

View