Version 35 (modified by japekall, 8 years ago) (diff) |
---|
1. AngularJS:n esittely ja työkalun asentaminen
1.1 Yleisesittely
Tällä wikisivulla olisi tarkoitus yleisesitellä Googlen kehittämä AngularJS -niminen frameworkki, jota on maailmalla mainostettu monin superlatiivein ja ylistyssanoin. Kuten frameworkin nimestä voidaan päätellä, AngularJS keskittyy lähinnä javascriptiin, se mahdollistaa periaatteessa vain yhden javascript-kirjaston avulla hyvinkin monipuolisia toimintoja ja tehtäviä voitavan suorittaa asiakaspäässä, selaimessa. AngularJS:n käyttö tarjoaa yksittäisen javascript-kirjastonsa ansiosta helpotusta sovelluskehittäjille, sillä nykysovelluskehityksessä on ja on ollut tavanomaista käyttää hyvinkin monia, useita javascript-plugineja suorittamaan tiettyjä tehtäviä.
AngularJS:llä kehitettävät sovellukset ovat luonteeltaan ns. yksisivupohjaisia sovelluksia (Single Page Applications), mikä lyhyesti ilmaistuna tarkoittaa sitä, että sovelluksessa toimii yksi yksittäinen sivu, jolle ladataan sisältöjä eri reittejä pitkin Angular-ohjaimen ohjaamana. Reitit ja ohjaimet tulevat myöhemmin käsittelyyn.
AngularJS toinen vahvuus liittyy ns. Model View Controller MVC -mallin hyödyntämiseen, jonka avulla voidaan sovelluksen näkymät (views), logiikka (model) ja ohjaus (controller) erottaa toisistaan. Oheinen kuva havainnollistaa MVC-mallin toimintaperiaatetta.
Kuva osoitteesta http://www.jansipke.nl/model-view-controller-mvc-with-jsp-and-jstl/
MVC-mallin ansiosta AngularJS -sovellukset on luonnostaan hyvin modulaarisia ja helposti ylläpidettäviä. Mallin kutakin osaa käsitellään wikisivulla myöhemmin.
1.2 Työkalun asentaminen
Tarvittavan javascript-kirjaston saat ladattua menemällä osoitteeseen http://angularjs.org/
Valitse sieltä kohta Download ja valitse mieleisesi asennuspaketti.
Tämän jälkeen, kun luot uuden html-dokumentin, saat angular.min.js kirjaston käyttöön sisällyttämällä html-dokumentin mielellään loppuosaan (optimaalisempaa kuin dokumentin head-osuudessa)
<script src="angular.min.js"></script>
tagin.
Seuraavassa yksinkertainen esimerkki angularJS:iä käyttävästä html-dokumentista.
<!DOCTYPE html> <html ng-app> <head>First App</head> <body data-ng-init="customers=[ {name:'Janne Kalliokulju',city:'Imatra'}, {name:'Svantte Meltola',city:'Helsinki'} ]"> <br/> <input type="text" data-ng-model="nameText" /> <ul> <li ng-repeat="cust in customers | filter:nameText | orderBy:'city'"> {{cust.name | uppercase}} - {{cust.city | lowercase}} </li> </ul> <script src="angular.min.js"></script> </body> </html>