AngularJS-riglyne
Met AngularJS kan u HTML uitbrei met nuwe eienskappe genaamd Directions .
AngularJS het 'n stel ingeboude riglyne wat funksionaliteit aan jou toepassings bied.
AngularJS laat jou ook jou eie riglyne definieer.
AngularJS-riglyne
AngularJS-aanwysings is uitgebreide HTML-kenmerke met die voorvoegsel ng-.
Die ng-appopdrag inisialiseer 'n AngularJS-toepassing.
Die ng-initopdrag inisialiseer toepassingsdata.
Die ng-modelopdrag bind die waarde van HTML-kontroles (invoer, kies, teksarea) aan toepassingsdata.
Lees meer oor alle AngularJS-aanwysings in ons AngularJS-aanwysingsverwysing .
Voorbeeld
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Die ng-appopdrag sê ook aan AngularJS dat die <div>-element die "eienaar" van die AngularJS-toepassing is.
Databinding
Die {{ firstName }}uitdrukking, in die voorbeeld hierbo, is 'n AngularJS-databindende uitdrukking.
Databinding in AngularJS bind AngularJS-uitdrukkings met AngularJS-data.
{{ firstName }}is gebind met ng-model="firstName".
In die volgende voorbeeld word twee teksvelde saamgebind met twee ng-model-aanwysings:
Voorbeeld
<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>
Gebruik ng-initis nie baie algemeen nie. Jy sal leer hoe om data te inisialiseer in die hoofstuk oor beheerders.
Herhalende HTML-elemente
Die ng-repeatopdrag herhaal 'n HTML-element:
Voorbeeld
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Die ng-repeatrichtlijn kloon eintlik HTML-elemente
een keer vir elke item in 'n versameling.
Die ng-repeataanwysing wat op 'n verskeidenheid voorwerpe gebruik word:
Voorbeeld
<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 is perfek vir databasis CRUD (Create Read Update Delete) toepassings.
Stel jou net voor of hierdie voorwerpe rekords van 'n databasis was.
Die inprogram-richtlijn
Die ng-apprichtlijn definieer die wortelelement van 'n AngularJS-toepassing.
Die ng-appinstruksie sal die toepassing outomaties selflaai (outomaties inisialiseer) wanneer 'n webblad gelaai word.
Die hitte-voorskrif
Die ng-initrichtlijn definieer aanvanklike waardes vir 'n AngularJS-toepassing.
Normaalweg sal jy nie ng-init gebruik nie. Jy sal eerder 'n kontroleerder of module gebruik.
Jy sal later meer oor beheerders en modules leer.
Die modelleringsrichtlijn
Die ng-modelopdrag bind die waarde van HTML-kontroles (invoer, kies, teksarea) aan toepassingsdata.
Die ng-modelopdrag kan ook:
- Verskaf tipe validering vir aansoekdata (nommer, e-pos, vereis).
- Verskaf status vir toepassingsdata (ongeldig, vuil, aangeraak, fout).
- Verskaf CSS-klasse vir HTML-elemente.
- Bind HTML-elemente aan HTML-vorms.
Lees meer oor die ng-modelopdrag in die volgende hoofstuk.
Skep nuwe riglyne
Benewens al die ingeboude AngularJS-aanwysings, kan u u eie aanwysings skep.
Nuwe aanwysings word geskep deur die .directivefunksie te gebruik.
Om die nuwe aanwysing op te roep, maak 'n HTML-element met dieselfde merkernaam as die nuwe aanwysing.
Wanneer u 'n opdrag benoem, moet u 'n kameelkasnaam gebruik
w3TestDirective, maar wanneer u dit aanroep, moet u -geskeide naam gebruik, w3-test-directive:
Voorbeeld
<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>
U kan 'n opdrag oproep deur:
- Element naam
- Eienskap
- Klas
- Lewer kommentaar
Die voorbeelde hieronder sal almal dieselfde resultaat lewer:
Element naam
<w3-test-directive></w3-test-directive>
Eienskap
<div w3-test-directive></div>
Klas
<div class="w3-test-directive"></div>
Lewer kommentaar
<!-- directive: w3-test-directive -->
Beperkings
U kan u riglyne beperk om slegs deur sommige van die metodes opgeroep te word.
Voorbeeld
Deur 'n restricteiendom met die waarde by te voeg "A", kan die aanwysing slegs opgeroep word deur eienskappe:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Die wetlike beperkingswaardes is:
Evir Element naamAvir EienskapCvir KlasMvir kommentaar
By verstek is die waarde EA, wat beteken dat beide elementname en kenmerkname die opdrag kan oproep.