Programuju s Aran

AngularJS 3: Data Binding a Directives

Programuju Aran's photo
Programuju Aran
·

0 min read

V minulém díle 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:

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="">
    <label>Jméno:</label>
    <input type="text" ng-model="jmeno" placeholder="Vaše jméno">
    <h2>{{jmeno}}? Rádi tě tu opět vidíme!</h2>
</div>
</body>
</html>

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

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 - <input type="text" name="jmeno" value="Jan Novák" >

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

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="celsius=0; rozdil=32">
    <p>Celsius:<input type=""number ng-model="celsius"</p>
    <p>Fahrenheit:{{celsius*1.8 + rozdil}}</p>
</div>
</body>
</html>

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:

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="studenti=['Petr', 'Jan', 'Pavel', 'Tomáš']">
    <ol>
        <li ng-repeat="jmeno in studenti">
            {{jmeno}}
        </li>
    </ol>
</div>
</body>
</html>

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!

Angulardirective