Je Angular 2+ MVVM?

Lukas Marx
December 06, 2016

Angular

Teď jsem o tom četl na různých místech: „Angular je MVVM“ nebo „Angular je MVC“. Huh, je to tak? Já si to nemyslím.

Vlastně na tu otázku nelze odpovědět prostým ano nebo ne. Za prvé, angular 2+ není MVC! Upřímně řečeno, nevím, jak na to lidi občas přijdou.

Toto je partnerský odkaz. Za nákupy uskutečněné prostřednictvím tohoto odkazu můžeme získat provizi.

Místo toho se řídí komponentově orientovanou architekturou. Není to tedy ani MVVM. Angular však implementuje mnoho konceptů MVVM. Takže pokud potřebujete, můžete říci, že angular se řídí principem MVVM. Abychom viděli podobnosti, podíváme se na princip blíže v kontextu komponent angularu.

„Moc hezké… ale co je to MVVM?“

MVVM je zkratka pro Model, View, ViewModel. Je to vzor pro navrhování softwaru a má zvýšit čitelnost a udržovatelnost zdrojového kódu tím, že kód rozdělí na 3 již zmíněné části. Jak to tedy vypadá v jazyce angular?

Model

Model je kontejner definující strukturu entity podle principu objektové orientace. Je definován vaším obsahem. Pokud tedy chcete použít Model pro uživatele, může vypadat takto:

class User { name:string; email:string; address:string;}

V angularu obvykle používáme k definici modelu třídy nebo rozhraní Typescript. Modely jsou však jen obyčejné staré objekty Javascriptu.

View

View je vizuální vrstva aplikace, která zahrnuje všechny vizuální prvky zobrazené na obrazovce uživatele. V případě systému Angular 2 je zobrazení definováno v šabloně. Tyto šablony jsou napsány v jazycích HTML a CSS, ale obsahují také specifické prvky jazyka Angular. Tyto šablony a propojeny s ViewModelem prostřednictvím data-binding. Šablony jsou vždy součástí komponenty.

ViewModel

ViewModel je abstraktní součástí View, která spravuje modely a vlastnosti, jež se mají zobrazit na obrazovce. Obsahuje veškerou logiku pro danou stránku. View a ViewModel jsou často propojeny pomocí datové vazby. To znamená, že změny ve ViewModelu, například ve vlastnostech, se okamžitě aplikují do pohledu a změní např. text zobrazený na obrazovce. V systému angular je ViewModel reprezentován částí komponenty Typescript.

Zjistili jsme tedy, že komponenta angular se skládá ze dvou částí. Šablony (View) a třídy (ViewModel). Zde je přehled komponent angular.

Komponenty angular

Základní komponenta v angularu se skládá ze dvou částí. První částí je definice komponenty. Ta je obklopena znakem @Component({}). Uvnitř této definice můžeme specifikovat vlastnosti této komponenty jako selektor, který nám umožní umístit naši komponentu prostřednictvím HTML.

V tomto bloku také definujeme pohled. Můžeme tak učinit přidáním html inline nebo použít další soubor. Obvykle dávám přednost druhé možnosti kvůli lepší čitelnosti a jasnému oddělení těchto dvou prvků. Takto by tedy mohla tato část vypadat:

@Component({ selector:"nav-bar", templateUrl:"./component.html", styleUrls: })

Druhou částí je odpovídající třída pro implementaci logiky. Tato třída je umístěna ve stejném souboru hned pod definicí. Je to v podstatě normální typová třída, takže si v ní můžete dělat, co chcete.

export class NavBar{}

Pro zobrazení naší komponenty na obrazovce ji musíme připojit k již zobrazenému html pohledu. Výchozím bodem je soubor app.component.html. Takže zápisem

<nav-bar></nav-bar>

je naše komponenta přidána do zobrazení. V Angularu tam komponenty nemohou být samy o sobě, ale musí být vždy přidány do modulu. K tomu stačí přidat naši komponentu do sekce deklarací nadřazeného modulu. Rodičovský modul je uvnitř souboru app.module.ts

@NgModule({ declarations: })

Vše, co je definováno v html souboru komponenty, bude umístěno uvnitř selector-tagu komponenty, a proto se zobrazí na obrazovce.

Toto je partnerský odkaz. Za nákupy uskutečněné prostřednictvím tohoto odkazu můžeme obdržet provizi.

Chcete-li se o komponentách dozvědět více, přečtěte si mého podrobného průvodce komponentami v jazyce angular.