wiki:2014/angularjs/part1
Last modified 5 years ago Last modified on 2014-03-12 21:12:14

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.

http://www.jansipke.nl/wp-content/uploads/mvc.png

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>

Alkuun Seuraava luku