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.
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).
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