sobota 8. srpna 2015

AngularJS: provázání HTML s JS (two way data binding)

Provázání HTML s JS

Angular umí fantastickou věc: oboustranné provázání (two way data binding) mezi HTML a JS. Celá krása je v tom, že Angular automaticky reaguje na změnu hodnoty proměnné (záležitost JS kódu) a tuto změnu okamžitě vizuálně promítne do HTML.

Proměnná v HTML a v JS

Proměnnou máme deklarovanou v controlleru, v JS části naší aplikace. Můžeme jí přiřadit výchozí hodnotu či ji ponechat bez hodnoty. Obsah proměnné pak zobrazujeme ve vizuální části naší aplikace, tj. v HTML kódu - zapsáním do dvojitých složených závorek.

Díky Angularu se obsah proměnné promítne z JS do HTML. Ovšem, Angular toho umí mnohem víc. Pokud se hodnota proměnné změní v HTML části (např. vstupem uživatele), Angular zajistí zobrazení její aktualizované hodnoty všude tam, kde je tato proměnná v HTML kódu použita.

Mějme v HTML části dva inputy; jeden pro vložení jména a druhý pro vložení příjmení. Přidáme k nim direktivu ng-model, která definuje název proměnné; obsah proměnné pak vypíšeme ve dvojitých složených závorkách.

V controlleru (v JS části) tyto dvě proměnné nadeklarujeme a přiřadíme jim výchozí hodnoty.

Všechno objasní následující video (bez zvuku).







Žádné komentáře:

Okomentovat