| Version 46 (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/. Kuvan ideana on esittää MVC-mallin toimintaa yleisellä tasolla. Kontrolleri eli ohjain määrää aina sen, minkälaista dataa mallista (model) haetaan ja laitetaan näkymään (viewiin) tulostumaan. MVC-mallin ansiosta AngularJS -sovellukset ovat luonnostaan hyvin modulaarisia ja helposti ylläpidettäviä. Wikin myöhemmissä luvuissa esitellään entiteetit tarkemmin.
AngularJS tarjoaa DOM-manipuloinnin avuksi jqLiten, joka on eräänlainen miniversio jquerystä, jota on mahdollista käyttää rinnan jqueryn kanssa. Lisäksi AngularJS:stä löytyy yksikkötestaamisen avuksi erilaisia sisäänrakennettuja työkaluja, joista lisätietoja voi katsoa mm. täältä.
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-osuuteen)
<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>
<h1>AngularJS esimerkki</h1>
<input type="text" data-ng-model="name"/>{{name}}
<br/>
<script src="angular.min.js"></script>
</body>
</html>
