AngularJS ohjeet

AngularJS sallii käyttää sitä kutsuttua ”OhjeUusi ominaisuus ”

AngularJS sisältää joukon sisäänrakennettuja ohjeita, jotka voivat tarjota sovelluksellenne toiminnallisuuksia.

AngularJS sallii myös omien ohjeiden määrittämisen.

AngularJS ohjeet

AngularJS-ohjeet ovat HTML-ominaisuuksien laajennuksia, joilla on etuliite ng-.

ng-app Ohje alustaa AngularJS-sovelluksen.

ng-init Ohje alustaa sovelluksen tiedot.

ng-model Ohjeet sidottavat HTML-kontrollin (input, select, textarea) arvon sovellusdataan.

Lue lisää kaikista AngularJS-ohjeista AngularJS-instruktioiden referenssistä.

esimerkki

<div ng-app="" ng-init="etunimi='Bill'">
<p>Nimi: <input type="text" ng-model="etunimi"></p>
<p>Sinut kirjoitit: {{ etunimi }}</p>
</div>

Kokeile itse

ng-app ohje kertoo AngularJS:lle, että <div>-elementti on AngularJS-sovelluksen ‘omistaja’.

data-sidottaminen

Esimerkissä {{ etunimi }} Lauseke on AngularJS-data-sidottamisen lauseke.

AngularJS:n data-sidottaminen yhdistää AngularJS-lausekkeen ja AngularJS-tiedot.

{{ etunimi }} ja ng-model="etunimi" sidotaan yhteen.

Seuraavassa esimerkissä kaksi tekstikenttää sidotaan yhteen kahden ng-model-ohjeen avulla:

esimerkki

<div ng-app="" ng-init="määrä=1;hinta=5">
Määrä: <input type="number" ng-model="määrä">
Kustannukset:    <input type="number" ng-model="hinta">
Yhteensä dollareissa: {{ määrä * hinta }}
</div>

Kokeile itse

Käytä ng-init on harvinaista. Opit tietojen alustamisen ohjeista kontrollereissa.

Toistaminen HTML-elementtejä

ng-repeat Ohjeen toistaminen HTML-elementtejä:

esimerkki

<div ng-app="" ng-init="nimet=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Kokeile itse

ng-repeat ohjeessa käsitellään todellisuudessa jokaisenHTML-elementin kloonaukseen.

käytetään objekti-taulukoiden ng-repeat Ohje:

esimerkki

<div ng-app="" ng-init="nimet=[
{nimi:'Jani',maa:'Norja'},
{nimi:'Hege',maa:'Ruotsi'},
{name:'Kai',country:'Denmark'}]
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Kokeile itse

AngularJS sopii hyvin tietokannan CRUD (luo, lue, päivitä, poista) -sovelluksiin.

Kuvitellaan, jos nämä objektit ovat tietokannasta saatuja tietueita.

ng-app ohje

ng-app Ohje määrittelee AngularJS-sovelluksenJuuri-elementti.

Kun ladataan sivung-app Ohje asettaaAutomaattinen käynnistysautomaattisesti (自动初始化) sovellus.

ng-init ohje

ng-init Ohje määrittelee AngularJS-sovelluksenAlkuperäinen arvo.

Yleensä et käytä ng-init. Käytät sen sijaan ohjainta tai mallia.

Tutustut pian lisää ohjelmointityökaluihin ja malleihin.

ng-model ohje

ng-model Ohjeet sidottavat HTML-kontrollin (input, select, textarea) arvon sovellusdataan.

ng-model Ohjeet voivat myös:

  • Tarjoa sovellusdatalle tyyppivarmistuksen (luku, sähköposti, pakollinen)
  • Tarjoa sovellusdatalle tilan (epäkelpo, likainen, kosketettu, virhe)
  • Tarjoa HTML-elementille CSS-luokan
  • Liitä HTML-elementti HTML-lomakkeeseen

Lue lisää seuraavasta luvusta ng-model Ohjeen tiedot.

Luo uusi ohje

Lisäksi kaikki sisäänrakennetut AngularJS-ohjeet, voit luoda omia ohjeitasi.

Uudet ohjeet luodaan käyttämällä .directive Funktiolla luodut.

Luo uusi ohje HTML-elementin, jolla on sama merkki nimi.

Nimeä ohjeita kuten kapitalisoitu alaviivaotsikkow3TestDirectivemutta sitä kutsuttaessa, käyttääväsi nimi täytyy olla erottelun välillä -w3-test-directive:

esimerkki

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

Kokeile itse

Voit kutsua ohjeen seuraavilla tavoilla:

  • Elementin nimi
  • Atribuutti
  • Luokka
  • Kommentti

Kaikki seuraavat esimerkit tuottavat saman tuloksen:

Elementin nimi

<w3-test-directive></w3-test-directive>

Kokeile itse

Atribuutti

<div w3-test-directive></div>

Kokeile itse

Luokka

<div class="w3-test-directive"></div>

Kokeile itse

Kommentti

<!-- directive: w3-test-directive -->

Kokeile itse

Rajoitukset

Voit rajoittaa ohjeesi kutsua vain tiettyjä menetelmiä käyttämällä.

esimerkki

Lisäämällä arvon "A" nimi restrict Ominaisuus, joka antaa ohjeen kutsua vain ominaisuuden kautta:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Made by a directive!</h1>"
  });
});

Kokeile itse

Lailliset restrict-arvot ovat:

  • E Merkitsee elementin nimeä
  • A Merkitsee ominaisuutta
  • C Merkitsee luokkaa
  • M Merkitsee huomautusta

Oletuksena arvo on EATämä tarkoittaa, että elementin nimi ja ominaisuuden nimi voidaan kutsua ohjeena.