Směrnice AngularJS
AngularJS vám umožňuje rozšířit HTML o nové atributy zvané Direktivy .
AngularJS má sadu vestavěných direktiv, které nabízejí funkčnost vašim aplikacím.
AngularJS vám také umožňuje definovat vlastní direktivy.
Směrnice AngularJS
Direktivy AngularJS jsou rozšířené atributy HTML s předponou ng-.
Direktiva ng-appinicializuje aplikaci AngularJS.
Direktiva ng-initinicializuje data aplikace.
Direktiva ng-modelváže hodnotu ovládacích prvků HTML (vstup, výběr, textarea) s daty aplikace.
Přečtěte si o všech direktivách AngularJS v našem odkazu na direktivy AngularJS .
Příklad
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Direktiva ng-apptaké říká AngularJS, že prvek <div> je „vlastníkem“ aplikace AngularJS.
Vazba dat
Výraz {{ firstName }}ve výše uvedeném příkladu je výraz vazby dat AngularJS.
Datová vazba v AngularJS spojuje výrazy AngularJS s daty AngularJS.
{{ firstName }}je svázán s ng-model="firstName".
V dalším příkladu jsou dvě textová pole svázána pomocí dvou direktiv ng-model:
Příklad
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
Používání ng-initnení příliš běžné. Jak inicializovat data se dozvíte v kapitole o regulátorech.
Opakující se prvky HTML
Direktiva ng-repeatopakuje element HTML:
Příklad
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Direktiva ng-repeatve skutečnosti klonuje prvky HTML
jednou pro každou položku v kolekci.
Direktiva ng-repeatpoužitá u řady objektů:
Příklad
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS je ideální pro databázové aplikace CRUD (Create Read Update Delete).
Jen si představte, že by tyto objekty byly záznamy z databáze.
Směrnice v aplikaci
Direktiva ng-appdefinuje kořenový prvek aplikace AngularJS.
Direktiva automatickyng-app spustí (automaticky inicializuje) aplikaci při načtení webové stránky.
Směrnice o teple
Direktiva ng-initdefinuje počáteční hodnoty pro aplikaci AngularJS.
Normálně nebudete používat ng-init. Místo toho použijete ovladač nebo modul.
Více o ovladačích a modulech se dozvíte později.
Směrnice o modelování
Direktiva ng-modelváže hodnotu ovládacích prvků HTML (vstup, výběr, textarea) s daty aplikace.
Směrnice ng-modelmůže také:
- Poskytněte ověření typu pro data aplikace (číslo, e-mail, povinné).
- Uveďte stav dat aplikace (neplatná, špinavá, dotyková, chyba).
- Poskytněte třídy CSS pro prvky HTML.
- Svázat prvky HTML s formuláři HTML.
Přečtěte si více o ng-modelsměrnici v další kapitole.
Vytvořte nové směrnice
Kromě všech vestavěných direktiv AngularJS můžete vytvářet vlastní direktivy.
Pomocí funkce se vytvářejí nové direktivy .directive.
Chcete-li vyvolat novou direktivu, vytvořte prvek HTML se stejným názvem značky, jako má nová direktiva.
Při pojmenování direktivy musíte použít název případu velblouda
w3TestDirective, ale při jeho vyvolání musíte použít -samostatný název, w3-test-directive:
Příklad
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Direktivu můžete vyvolat pomocí:
- Název prvku
- Atribut
- Třída
- Komentář
Všechny příklady níže poskytnou stejný výsledek:
Název prvku
<w3-test-directive></w3-test-directive>
Atribut
<div w3-test-directive></div>
Třída
<div class="w3-test-directive"></div>
Komentář
<!-- directive: w3-test-directive -->
Omezení
Své direktivy můžete omezit tak, aby byly vyvolány pouze některými metodami.
Příklad
Přidáním restrictvlastnosti s hodnotou "A"lze direktivu vyvolat pouze pomocí atributů:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Právní omezení hodnot jsou:
Epro název prvkuApro atributCpro tříduMpro komentář
Ve výchozím nastavení je hodnota EA, což znamená, že jak názvy prvků, tak názvy atributů mohou vyvolat direktivu.