wiki:2014/angularjs/part1

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.

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

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>