# AngularJS 3: Data Binding a Directives V [minulém díle ](https://programujusaran.hashnode.dev/angular-2-vyrazy-cjzzzgcvq000e97s1w1ouoevs) jsme si ukázali, jak napsat výraz a nakousli jsme** Directives.** Dnes si povíme něco o** Data Bindingu** a hlouběji se podíváme na již načaté**Directives**. # Data Binding Jedna z hlavních výhod AngularJS spočívá v **Data Bindingu**. Podívejme se na příklad: ```

Jméno:

{{jmeno}}? Rádi tě tu opět vidíme!

``` Tento kód vytvoří textbox. Ve chvíli, kdy do něj začnete psát, informace se automaticky zobrazí v nadpisu

. ## Ng-model **Ng-model** je directive, která spojuje HTML element s určitou vlastností (property). V kódu výše jsme propojili výstup (input) vlastnosti nazvané *jmeno* s vlastností výrazu {{jmeno}}. Díky data bindingu můžeme automaticky synchronizovat data mezi **modelem** (model) a **view:** **view**- jedná se v podstatě o DOM, který vidí uživatel **model** - jsou data, která uživatel vidí ve view a s kterými interaguje (napíše své vlastní jméno) Data bindingem propojujeme **model** a **view**. > Data binding vždy zobrazí model ( = informace) ve view. Když se změní model, view opíše změnu a obráceně. # Directives Directives se podobají HTML atributům. Právě díky nim můžeme specifikovat chování určitých DOM elementů. ### Ng-app Tato directive určí, že se jedná o aplikaci AngularJS. Nebýt **ng-app**, kód {{ 2 + 2 }} by se v prohlížeči nezobrazil jako 4, nýbrž jako {{ 2 + 2 }}. ### Ng-model Tato directive propojí HTML element s nějakou vlastností - využívá se pro **Data binding**. ### Ng-init Tato directive zadá počáteční hodnotu ( v klasickém HTML se používá jako počáteční hodnota podobný atribut **value** - Zkusme si to předvést na příkladu. Chceme převést teplotu ze °C na Fahrenheity. Na to lze použít vzorec: **F = 1,8 °C + 32** ```

Celsius:

Fahrenheit:{{celsius*1.8 + rozdil}}

``` Pomocí **ng-init** jsme deklarovali dvě vlastnosti, **ng-model **nám pomohl k propojení input-boxu a vlastnosti *celsius* k výpočtu Fahrenheitů. ### Ng-repeat Další velmi užitečná directive je **ng-repeat**. Opakuje HTML template (= vzor) pro každou položku ve specifikovaném seznamu. Uveďme si příklad: ```

{{jmeno}}

``` > Nezapomeňte na slovíčko **in**, které spojuje název položky a název seznamu. Skvěle! Právě jste pochopili základní principy AngularJS. Jen tak dál!