AngularJS esimerkit

Kokeile itse

Voit muokata esimerkkiä verkossa ja sitten napsauttaa painiketta nähdäksesi tuloksen.

AngularJS esimerkit

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

Kokeile itse

AngularJS-perusteet

• Ensimmäinen AngularJS-ohjeeni
• Ensimmäinen AngularJS-ohjeeni (sopii HTML5-standardiin)
• Ensimmäinen AngularJS-ilmaukseni
• Yksinkertainen AngularJS-ilmaus, käyttäen muuttujia
• Ensimmäinen AngularJS-kontrollerini

Perus AngularJS-esittely

AngularJS ilmentymät

• Yksinkertainen ilmaus
• ng-app: ilman ilmauksia
• Luvun sisältävät ilmaukset
• Käytä ng-bind -ohjetta luvun sitomiseen
• Merkkijonon sisältävät ilmaukset
• Käytä ng-bind -ohjetta merkkijonon sitomiseen
• Objektin sisältävät ilmaukset
• Käytä ng-bind -ohjetta objektin sitomiseen
• Taulukon sisältävät ilmaukset
• Käytä ng-bind -ohjetta taulukon sitomiseen

Ilmauksen esittely

AngularJS moduulit

• AngularJS ohjaimet
• Moduulit ja kontrollerit tiedostossa
• Milloin ladata AngularJS

Moduulin esittely

AngularJS ohjeet

• AngularJS ohjeet
• ng-model ohje
• ng-repeat ohje (käytettävissä taulukoissa)
• ng-repeat ohje (käytettävissä objekteissa)
• Luo uusi ohje
• Käytä uutta ohjetta elementtinä
• Käytä uutta ohjetta ominaisuutena
• Käytä uutta ohjetta luokkana
• Käytä uutta ohjetta kommenttina
• Rajoitetut ohjeet

Ohjeen esittely

AngularJS mallit

• AngularJS mallit
• Kaksisuuntaisesti sidotut mallit
• Vahvistetut mallit
• Lomake ja sen nykyinen vahvistustila
• Aseta CSS-luokka, kun kenttä on epävirheellinen

Mallin esittely

AngularJS ohjaimet

• AngularJS ohjaimet
• Ohjaimen ominaisuudet
• Ohjaimen funktiot
• Ohjaimet JavaScript-tiedostossa I
• Ohjaimet JavaScript-tiedostossa II

Ohjaimen esittely

AngularJS kontekstit

• AngularJS kontekstit
• Kontekstit ovat synkronoituja
• Eri kontekstit
• Juuri-konteksti

Kontekstin esittely

AngularJS suodattimet

• Ilmentymäsuodatin uppercase
• Ilmentymäsuodatin lowercase
• Ilmentymäsuodatin currency
• Ohjeet-suodatin orderBy
• Syöttösuodatin

Suodattimen esittely

AngularJS XMLHttpRequest

• Lue staattinen JSON-tiedosto

XMLHttpRequest esittely