AngularJS by Sander Leetus

8/15/2019 AngularJS by Sander Leetus

1/28

Tallinna Ülikool

Digitehnoloogiate Insituut

AngularJS raamistiku õppematerjal

Seminaritöö

Autor: Sander Leetus

Juhendaja: Jaagup Kippar

Tallinn 20 !


2/28

Autorideklaratsioon

Deklareerin" et k#esole$ seminaritöö on minu töö tulemus ja seda ei ole kellegi teise poolt $arem

kaitsmisele esitatud% K&ik töö koostamisel kasutatud teiste autorite tööd" olulised seisukohad"

kirjandusallikatest ja mujalt p#rine$ad andmed on $iidatud%

%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%'kuup#e$( 'autor(


3/28

Sisukord

Sissejuhatus%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Angulari &petused%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

% Angulari dokumentatsioon%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%2 *+s,hools%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+ Tutorialspoint%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

2 Angular%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%2% A$aldised%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%2%2 Andmete sidumine%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%2%+ Direktii$id%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%2%) Kontrollerid%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%2%! iltrid%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%2%- 1ttp%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%2% Ta3elid%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%2%. 4ormid%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%2%/ Animatsioonid%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

+ Angulari komponentide kood%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+% Juhend Angulari 5lesseadmiseks%%%%%%%%%%%%%%%%%%%%%%%%%%%%+%2 A$aldised%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+%+ Andmete sidumine%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+%) Direktii$id%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+%! Kontroller%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+%- iltrid%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+% 1ttp%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+%. Ta3elid%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+%/ 4ormid%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+% 0 Animatsioonid%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

) Ülesanded%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%)% 6#itamine ja ar$utamine%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%)%2 Ta3eli n#itamine ja peitmine%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

Kokku$&te%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%Kasutatud kirjandus%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

+


4/28

SissejuhatusK#esole$a seminaritöö eesm#rgiks on luua AngularJS 'edasipidi Angular( $ee3iraamistiku

&ppematerjal% Angular on loodud d5naamiliste $ee3irakenduste jaoks" mis mallina kasuta3

1T7Li ning $&imalda3 selle s5ntaksit laiendada $asta$alt rakenduse $ajadusele%

Autor on moti$eeritud Angulari teemal kirjutama" kuna puudu3 eesti keeles &ppematerjali

olemasolu ning looda3 suurendada sellega Angulari populaarsust%

8ppematerjal on eelk&ige loodud &pilastele" kellel puudu3 kokkupuude Angulari raamistikuga%

9elduseks &ppematerjali l#3imiseks oleksid 1T7L ja SS tundmine heal tasemel ning

Ja$aS,ripti tundmine rahulda$al tasemel%

Autori ar$ates on &ppematerjalis k&ige olulisemad Angulari komponendid" mida l#he3 $aja" etalustada Angulari rakenduse loomisega% Samuti on k&ik töös ole$ad koodin#ited 5lesse pandud"

autori poolt loodud $ee3ilehelehttp:;;***%tlu%ee;


5/28

1 Angulari õpetused

Angulari kohta on mitmeid inglise keelseid &petusi sealhulgas ka raamatuid ja kogukonna poolt

modi=itseerituid koodilahendusi% 8ppematerjali loomise k#igus kasutan peamiselt kolme

$ee3ip&hist Angulari &petust" nendeks on Angulari oma dokumentatsioon" *+s,hools jaTutorialspoint% Angulari oma dokumentatsioon on $#ga h#sti loodud" kus on komponendid" mille

kohta k&ige t#psema lahenduse leia3 just sealt%

1.1 Angulari dokumentatsioon

Angulari dokumentatsioon on h#sti loodud% Dokumentatsioon on lahti löödud moodulitesse" mis

koosne$ad eri komponentidest% Komponentide kasutus$&imalused on dokumentatsioonis" koos

koodin#idetega" h#sti $#lja toodud% Dokumentatsioonis on olemas isegi &peta$ juhend" kus saa3

paljusid komponente kasutada ja &ppida selle a3il% Angulari lehel on ka $&imalik koodi muuta ja

kohe n#ha" mis kood tee3 >9dit in ?lunker@ nupu a3il% Lehel on olemas ka arendaja juhend" kus

asu$ad olulisemad Angulari komponendid '$t joonis (%

!

Joonis 1: Arendaja juhend


6/28

Angulari &petus koonse3 j#rgne$atest peat5kitest '$t joonis 2(%

Angulari juhendit kasutades $&i3 tekkida raskusi" kuna selle kasutamiseks l#he3 $aja algteadmisi

kuidas kasutada it $ersiooni s5steemi ja selle k#ske% Koodin#ited ei pruugi ka k&ige lihtsamad

olla" samas on need $#ga h#sti #ra seletatud% 9i soo$ita koodin#idetega siit alustada" kuidAngulari komponentide kohta lugemiseks on $#ga hea koht%

1.2 w3schools

*+s,hools 'edasipidi B+( on eriti hea $ee3ip&hine &petus" kuna peale selle" et see sisalda3

n#iteid Angulari kohta on seal ka >TrC it Coursel=@ nupp" kus saa3 koheselt koodin#ite tööle

panna ja modi=itseerida seda kohapeal%

B+ lehel on loodud j#rgne$ad &petused ja nende kohta n#ited '$t joonis +(%

https:;;git s,m%,om;

-

Joonis 2: Angulari õpetus


7/28

B+ lehel on $#ga algsed ja lihtsad koodin#ited% Seletused on $#ga lihtsustatud" ei ole kasutatud

liigseid $#ljendeid% Iga peat5ki juures on $#ga palju n#iteid ja k&iki on $&imalik muuta ja n#hamis tee$ad '$t joonis )(% 4&imalik" et antud kolmest &petusest k&ige parem leht koodin#idete

jaoks%

Samas kuna koodin#ited ja nende seletused on h#sti lihtsustatud" siis j##3 antud lehest ar$ata$asti

$#heseks" et iga mooduli kohta piisa$alt in=ot saada%

Joonis 3: W3 õpetus

Joonis 4: W3 Koodinäite muutmise leht


8/28

1.3 Tutorialspoint

Sarnane3 B+ &petusega" kuid pikemad koodin#iteid ja seletusi"

samas koodin#ited on ka keerukamad" mis on h#sti osadeks

seletatud ja 5lesehitus on parem% Tutorialspointis on sarnaselt

B+ koodin#ite redigeerimis $&imalus >TrC it@ nupu a3il '$t

joonis -(% Samuti on peat5ki l&pus ka koodin#ite tulemus

olemas" kus saa3 koheselt proo$ida mida rakendus tee3%

4&imalik" et parim &petust antud kolmest" kuna on olemas

p&hjalikud koodin#ited" mis on peat5ki sees lahti $&etud ja #ra

seletatud ning peat5ki l&pus on olemas ter$e koodil&ik koos

rakendusega olemas% Samas lehepeal on $&imalik antud koodlahti $&tta ja muuta ning koheselt ka tulemust n#ha%

.

Joonis 5: Tutorialspoint õpetus

Joonis 6: Tutorialspointi oodinäite muutmise leht


9/28

2 AngularAngular on struktuurne raamistik" mis on loodud d5naamiliste $ee3irakenduste jaoks% Antud

raamistik $&imalda3 kasutada 1T7L malli ja laiendada 1T7L i s5ntaksit" mis $#ljenda3

rakenduse komponente selgelt ja l5hidalt% K&ik toimu3 $ee3ilehitseja sees" mis tee3 Angularist

ideaalse partneri iga $&imaliku ser$eritehnoloogiaga% Angulari rakenduses mallide t#itmise töö

in=oga liigutatakse ser$erilt kliendile" mille tagaj#rel on s5steem paremini struktureeritud% All on

p&hi=unktsioonid $#lja toodud" mida selleks kasutada%

Angulari loomisega alustati aastal 200/ kahe arendaja poolt" 7isko 1e$erC ja Adam A3rons%

Algselt oli antud kahe arendaja projekt nimetatudGetAngular " mis pidi olema $ahend" et

$ee3idisainerid saaksid suhelda samaaegselt frontend- ja backend iga% 1e$erC alustas töötamist

projektiga Google Feedback koos ooglega% Koos kahe teise arendajaga kirjutasid - kuu

perioodiga nad 000 rida koodi% Kuna kood oli nii$&rd pikk ja tekkis raskusi testmisega ja

muutmisega" siis 1e$erC tegi kihl$eo" et suuda3 rakenduse 5m3erkirjutada" kasutades

GetAngular " seda kahe n#dalaga% 1e$erC k5ll kaotas selle kihl$eo" kuna kulus tal aega + n#dalat"

kuid ta oli $&imaline koodi l5hendama 000 realt !00 reale% T#nu 1e$erC edule hakkas

Angulari arendus ka kiirenema% 'Austin(

2.1 Avaldised

Angulari a$aldised on Ja$aS,ripti sarnades koodil&igud" mis on pandud loogelistesse sulgudesse

{{ avaldis }} % Angulari a$aldised on sarnased Ja$aS,ripti omadega" j#rgne$ate

erine$ustega ' oogle" kuup#e$ puudu3(%

• Kontekst: Ja$aS,riptis a$aldise $##rtus leitakse glo3aalsewindow $astu% Angularis

kasutatakse selleks scope o3jekti%• Andesta$: Kui Ja$aS,ript 5rita3 hinnata de=ineerimata omadusi" genereeri3 see

ReferenceError $&iTypeError % Angularis samas on see lihtsalt kasundefined $&inull %

• ?uudu$ad k#su$oo laused: 9i ole $&imalik kasutada tingimuslauseid" silmuseid ning

erindeid%

• ?uudu$ad =unktsioonide deklareerimised: 9i ole $&imalik deklareerida =unktsioone

/


10/28

a$aldistes" isegi mitteng-init direktii$is%

• Ja$aS,ripti a$aldised: 9i ole $&imalik kasutada Ja$aS,ripti a$aldisi Angulari a$aldistes%

• 9i komasid egavoid operaatoreid: 9i saa kasutada " $&ivoid Angulari a$aldises%

•

iltrid: iltreid on $&imalik kasutada a$aldiste sees" et $ormistada in=o enne selleku$amist%

Kui on soo$ jooksutada keerulist Ja$aS,ript koodi" peaks

kontroller tegema selle meetodiks ja kutsuma selle $aatest%

Samas kui on soo$eval() Angulari a$aldist ise" saa3 ka

kasutada$eval() meetodit% ' oogle" kuup#e$ puudu3(

2.2 Andmete sidumine

Andmete sidumine on Angulari rakendustes in=o automatiseeritud s5nkroniseerimine mudeli ja

$aate komponentide $ahel% Angulari moodus andmete sidumist rakendada lase3 sul mudelit

k#sitleda" kui single-source-of-trut sinu rakenduses% 4aade on koguaeg mudeli projektsioon" kui

$aade muutu3" muutu3 ka mudel ja $astupidi% ' oogle" kuup#e$ puudu3(

9namik malle sidu$ad andmeid $aid 5hes suunas" nad 5henda$ad mallide ja mudelitekomponendid kokku $aatesse% ?eale 5hendamist ei ole mudeli muutumisi $&imalik automaatselt

$aates uuendada '$t joonis .(% See t#henda3" et arendaja pea3 kirjutama koodi" mis koguaeg

s5nkroniseeri3 $aate mudeliga ja mudeli $aatega% ' oogle" kuup#e$ puudu3(

Angulari mallid tööta$ad" aga teistmoodi% K&igepealt mall" mis on 1T7L koos t#ienda$ate

direktii$idega on kompileeritud $ee3ilehitsejasse ' oogle" kuup#e$ puudu3(% K&ik muudatused

$aates on koheselt peegeldatud mudelis ja $astupidi '$t joonis /(%

0

Joonis !: Kõi i a"aldisi oosasutades

Joonis #: $hte pidi andmetesidumine

Joonis %: Kahte pidi andmetesidumine


11/28

2.3 Direktiivid

Direktii$id ' !irectives ( on markerid dokumendi o3jekti

mudeli 'edaspidi DE7( elemendis" mille hulka kuulu$ad

atri3uudid" elemendi nimed" kommentaarid $&i SS klass"

mis anna$ad Angulari 1T7L kompileerijale teada" et

lisada ettem##ratud k#itumine DE7 elemendile%

Direktii$id lase$ad Angularil laiendada 1T7L i"

eesliitega ng-" L#hemalt on kirjas m&ne direktii$i kohta

allpool koodin#idete juures% ' oogle" kuup#e$ puudu3(

2. !ontrollerid

Angulari rakendus tugine3 kontrolleritel" mis juhi$ad andme$oogu rakenduses% Kontrollerid

de=ineeritakse direktii$ing-controller a3iga% Kontrolleril $&i$ad olla ka meetodid" =unktsioon

muutujana% Kontrolleri klass sisalda3 rakenduse tege$use loogikat" mis lisa3 scope o3jekti

=unktsioonid ja $##rtused% Suuremates rakendustes hoitakse kontrollereid ta$aliselt eraldi

=ailides% '*+s,hools" kuup#e$ puudu3(

7&lemad koodin#ited 'koodin#ide ja 2( anna$ad sama tulemuse" kuid koodin#ites 2 on

kasutatud =unktsiooni t#isnime saa$utamisel% Koodin#ites on t#isnimi lihtsalt a$aldise a3il

saa$utatud 'Joonis (%

Joonis 1&: 'elja dire tii"i asutusoodinäites

Joonis 11: (simese ja teise ontrollerioodinäide

Joonis 12: Kontrolleri )ailieraldi sisse lugemine ja selle

asutamine


12/28

2." #iltrid

iltrid loo$ad $ormingu a$aldise $##rtusest" mis ku$atakse kasutajale% iltreid saa3 kasutada

a$aldistes $&i direktii$ides kasutades F 'p5stkriipsu( s5m3olit%

J#rgne$ad =iltrid on enim kasutatud 'Tutorialspoint" kuup#e$ puudu3(%• uppercase G Kon$erdi3 teksti suurt#htedeks '$t joonis )(%

• lowercase G Kon$erdi3'muuda3( teksti $#iket#htedeks%

• currency G 7uuda3 teksti $aluuta $ormingusse%

• filter G iltreeri3 massii$ist $asted" $asta$alt kriteeriumile '$t joonis +(%

• order#y G ?ane3 massii$i j#rjekorda" $asta$alt kriteeriumile '$t joonis !(%

7idagi koodis m##ramata oska3 rakendus =iltreerida" nii nime kui ka $anust ja seda 5he ainult

5hte input $#lja kasutades '$t joonis -" (%

2.$ %ttp

Angular on ka $arustatud Hhttp kontrolliga" mis tööta3 teenusena" et lugeda andmeid ser$erist%

Ser$er k5si3 andme3aasist $ajalikud andmed% Töötamiseks pea3 in=o j&udma Angularini JSE6

=ormaadis 'Tutorialspoint" kuup#e$ puudu3(% Angulari http kasutades on puudusi" kuna Angular

2

Joonis 14: *iltriupper+ase asutus

Joonis 15: *iltri order,-asutus Joonis 13: *iltri )ilter asutus

Joonis 16: *iltri )ilter asutus Joonis 1!: *iltri )ilter asutus


13/28

ei oska midagi sellega teha" kui in=o ei j&ua JSE6 =ormaadis rakendusse% Seega kui on soo$

muus =ormaadis =aile lugeda pea3 selleks %uery a3i kasutama%

2.& Ta'elid

Ta3elite andmed on ta$aliselt kordu$ad" seegang-repeat direktii$i kasutamine $&imalda3ta3eleid luua kergelt%

iltri peat5kis kasutatudorder#y =iltrit on kasutatud ka siin '$t joonis /(%

+

Joonis 1#: .ttp a/il )aililugemine ja listi loomine

Joonis 2&: Ta/eliloomine

Joonis 1%: Ta/eliloomine ja selle)iltreerimine order,-)iltriga


14/28

2.( )ormid

4ormide a3il on $&imalik kasutajal sisestada andmeid% Sisestatud andmeid on $&imalik ka

sal$estada massii$i '$t joonis 2 (% 4ormid paku$ad $alideerimisteenust" mis t#henda3" et

kasutajale on $&imalik teada anda $alest sisendist ' resolin" 20 !(% See paku3 paremat kasutaja

kogemust" kui ainult ser$eripoolne $alideermine" kuna kasutaja saa3 kohest tagasisidet" kuidas

$iga parandada% Samas seda $&idakse kergesti #ra kasutada" seega ser$eripoolne $alideerimine

on siiski $ajalik%

)

Joonis 21: 0ormi loomine ja andmete sal"estaminemassii"i


15/28

2.* Animatsioonid

Angular on $aikimisi animatsioonid $#lja l5litanud" nende kasutamiseks tule3 teek rakendusse

lisada ning see ka moodulisse laadida% 'n gAni&ate moodul toeta3 SS 3aasil animatsioone ning

Ja$aS,ript 3aasil animatsioone(% Animatsioonid Angularis p&hine$ad t#ielikult SS klassidel"

kui $ee3ilehel on SS klass on 1T7L elemendi k5lge kinnitatud on sellele $&imalik

animatsiooni lisada%

!

Joonis 22: Animatsiooni a/iga nähta"

Joonis 23: Animatsioonia/iga nähtamatu


16/28

3 Angulari komponentide kood

3.1 Juhend Angulari +lesseadmiseks

K&igepealt tule3 luua uus 1T7L =ail" kuhu kirjutatakse kogu koodiosa '$t koodin#ide (%

"ulari #$etus

!oodin,ide 1. %T- /aili loomine.

J#rgmiseks tule3 lisada ead tagide sisse Angularilibrary '$t koodin#ide 2(%

!oodin,ide 2. Angulari +lesseadmine

3.2 AvaldisedPasta1ate hi d 1 11u, {{ summa 2 1 11u }}3!oodin,ide 3. Avaldise a'il t,isarvude korrutise leidmine

Tere {{isi1 imi 4 ' ' 4 isi1 $ere1 a imi}}!!oodin,ide . Avaldise a'il stringide kokku liitmine

5a us, {{isi1 va us}}!oodin,ide ". Avaldise a'il o'jekti k,tte saamine

Pu 1tid6T7 , {{$u 1tid9:;}}!oodin,ide $. Avaldise a'il massivist tulemuse k,tte saamine

Pasta1ate hi d 1 11u, {{ summa 2 1 11u }}3Tere {{isi1 imi 4 ' ' 4 isi1 $ere1 a imi}}!5a us, {{isi1 va us}}Pu 1tid6matemaati1a , {{$u 1tid9:;}}

-

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.jshttps://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.jshttps://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.jshttps://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js


17/28

!oodin,ide &. 0elnevalt mainitud avaldised korraga kasutuses

3.3 Andmete sidumine

Ees imi, {{isi1 ees imi}}Pere1 a imi, "us, Tere? {{ ees imi }}!7si1ute list,


18/28

• Antud koodisng-app l#htesta3 $aikimisi Angulari rakenduse%ng-app anna3 Angularile ka

teada" et element on rakenduse omanik%

• ng-init l#htesta3 rakenduse algandmed" antud n#ites kasutame JSE6 s5ntaksit" et

de=ineerida isikute massii$%

• ng-&odel direktii$ m##ra3 kasutata$ad mudelid $&i muutujad" antud juhulinput rakenduse andmega'antud juhul on de=ineeritud mudel nimega >eesnimi@(%

• ng-repeat loo3 kordus ar$ 1T7L elemente" $asta$alt sellele kui palju andmeid massii$is

on%

3." !ontroller• Angulari rakendus on de=ineeritudng-app='uusApp' %

• Kontroller on de=ineeritudng-controller' uus trl direktii$iga% uus trl on *ava+cript =unktsioon%

• Angular toesta3 kontrolleri$scope o3jektiga% Angularis$scope on rakenduse o3jekt" mis

oma3 rakenduse muutujaid ja =unktsioone%

Ees imi,

THis imi, {{ isi1 ees imi 4 ' ' 4 isi1 $ere imi }}

var a$$ = a "ular m dule6'uus $$'? 9;a$$ c tr ller6'uusCtrl'? fu cti 6Isc $e {

Isc $e isi1 = {ees imi, ' u1u'?$ere imi, 'Tamm'

}}

!oodin,ide 11. !ontrolleri loomine ja rakenduses kasutamine

J#rgmises n#ites loome =unktsiooni nimega taisnimi o3jekti$scope"isik " mille töö on tagastada

t#isnimi" seej#rel kasutame loodud =unktsiooni a$aldises '$t koodin#ide 2(%

.


19/28

Ees imi, THis imi, {{ isi1 tais imi6 }}

var a$$ = a "ular m dule6'uus $$'? 9;a$$ c tr ller6'uusCtrl'? fu cti 6Isc $e {

Isc $e isi1 = {ees imi, ' u1u'?$ere imi, 'Tamm'?tais imi, fu cti 6 {

var isi1O&+e1tisi1O&+e1t = Isc $e isi1retur isi1O&+e1t ees imi 4 ) ) 4

isi1O&+e1t $ere imi

}}}

!oodin,ide 12. !ontrolleris /unktsiooni loomine ja kasutus rakenduses

J#rgmiseks loome uue kontrolleri =aili" mida hiljem kasutame ka =iltrite peat5kis '$t koodin#ide

+(%

a "ular m dule6'mi u $$'? 9; c tr ller6' imedCtrl'?fu cti 6Isc $e {

Isc $e imed = 9{ imi, ' u1u'? va us, /}?{ imi, ' alle'? va us, .A}?{ imi, ' uha '? va us, B/}

;;!oodin,ide 13. !ontrolleri /ail salvestada nimega nimed!ontroller.js

Kasutame tehtud kontrolleri =aili rakenduses" mis siis loe3 =ailist andmed ja k#tte saadud

andmete a3il loo3 listi '$t koodin#ide )(%


20/28

3.$ #iltrid

Kasutame eelmises peat5kis loodud kontrollerit uus trl ning rakendame sellele =iltriuppercase'$t koodin#ide !(%

Gimi {{ isi1 ees imi F u$$ercase}}

!oodin,ide 1". #iltri kasutamine avaldises

Antud kood muuda3 uus trlis ole$a eesnime suurteks t#htedeks" samamoodi saa3 ka kasutada

lowercase % iltritcurrency sai kasutatud andmete sidumise peat5kis '$t koodin#ide /(%

iltri kasutamine on ka $&imalik direktii$ides" kui eelmises peat5kis sai kasutatud direktii$ing-

repeat " siis saa3 sinna juurde lisadaorder#y =iltri% J#rgmise n#ite juures kasutame kontrollerit

nimed trl '$t koodin#ide -(%


21/28

3.& %ttp

J#rgmises n#ites loeme ,ttp a3il teisest =ailist andmeid% Sellejaoks" aga peame uue teksti=aili

looma ning andmed sinna JSE6 =ormaadis kirja panema% Loome =aili nimega angular%t t '$t

koodin#ide .(%

{)tude "id),9 { )Gimi) , ) u1u)? )5a us) , .8? )Kii1) , )Eesti) }?

{ )Gimi) , ) uha )? )5a us) , ./? )Kii1) , )Eesti) }? { )Gimi) , )T# u)? )5a us) , .B? )Kii1) , )Eesti) }? { )Gimi) , ) evi )? )5a us) , B.? )Kii1) , )Eesti) };}!oodin,ide 1(. Angular.t4t /aili sisu

?eale =aili loomist kasutame j#rgmist koodijuppi" et sealt in=o k#tte saada%$ ttp"get a3il loeme

=aili ja &nnestumise korral kirjutatakse andmed Hs,ope%nimed o3jekti% Seej#rel saame nimed

o3jektist lihtsalt andmed $#lja ku$ada listi '$t koodin#ide /(%


22/28

a$$ c tr ller6'tude "idCtrl'? fu cti 6Isc $e? Ihtt$ {Ihtt$ "et6' a "ular t*t '

success6fu cti 6res$ se {Isc $e imed = res$ se tude "id

}

}!oodin,ide 1*. %ttp a'il teisest /ailist andmete lugemine

3.( Ta'elid

Ta3eli koostamisel kasutameng-repeat direktii$i% Samuti kasutame eelmises peat5kis http a3il

k#tte saadud andmeid" mille paneme listi asemel n55d hoopis ta3elisse '$t koodin#ide 20(%

{{ i Gimi }}{{ i 5a us }}{{ i Kii1 }}

!oodin,ide 21. )anuse j,rgi /iltreeritud ta'el

22

http://www.tlu.ee/~sander12/angular.txthttp://www.tlu.ee/~sander12/angular.txt


23/28

3.* )ormid

4ormide koodin#ites olen $#lja toonud mitu erine$at sisestust55pi ja seej#rel need kontrolleri

a3il o3jekti sal$estanud ning *+ . =ormaadis $#lja ku$anud" kasutades pre m#rgendeid '$t

koodin#ide 22(%

Gimi, 5alue, {{ 1asuta+a email }}

LKM, 5alue, {{ 1asuta+a $assN rd }}

Gum&er, 5alue,{{ 1asuta+a te*tarea }}

asuta+a = {{ 1asuta+a F +s }} alvestatud = {{ salvestatud F +s }}

var a$$ = a "ular m dule6'uus $$'? 9;a$$ c tr ller6'v rmiCtrl'? fu cti 6Isc $e {

Isc $e salvestatud = {}Isc $e uue da = fu cti 61asuta+a {

Isc $e salvestatud = a "ular c $(61asuta+a}

Isc $e reset = fu cti 6 {

Isc $e user = a "ular c $(6Isc $e salvestatud}

Isc $e reset6}

!oodin,ide 22. )ormi loomine ja selle andmete salvestamine o'jekti

2+


24/28

3.1 Animatsioonid

Angulari animatsioonide kasutamiseks tule3 esmalt juurde lisada animatsioonide teek% Selleks

tule3 j#rgne$ koodil&ikead tagidesse lisada '$t koodin#ide 2+(%

!oodin,ide 23. Animatsioonide teeki +lesseadmine

Animatsioonide koodin#ites olen loonud lihtsadiv m#rgendites ole$a o3jekti n#htamatuks

muutmise" kui kastist linnuke #ra $&ta '$t koodin#ide 2)(%

7s 5isi&le


25/28

lesanded

.1 5,itamine ja arvutamine

Luua $ee3ileht" kus on $&imalik direktii$ing-&odel a3il ter$itada" mida on l#3iinput $#lja

muuta" algselt oninput $#ljas kirjas >/orld @% Samuti teha" et tulem oleks suurte t#htedega%

J#rgmiseks lisada juurde kaksinput $#lja" kuhu saa3 ainult num3reid kirjutada ning mis

liidetakse kokku oma$ahel% Kolmandaks luua kontroller eraldi =ailina" kus on kirjas isikud ja

nende nimed" $anused" elukoht ja sugu% aili andmete p&hjal luua list" mis on nimede j#rgi

j#rjestatud%

2!

http://www.tlu.ee/~sander12/angular


26/28

.2 Ta'eli n,itamine ja peitmine

Teise 5lesandena kasutada eelmise 5lesande kontrollerit $&i $&i3 luua ka uue" uute andmetega%

Selle p&hjal luua ta3el" mida on animatsioone kasutades $&imalik n#htamatuks muuta%

6#htamatuks tegemisel saa3 kasutada animatsioonide peat5kis ole$at koodin#idet '$t koodin#ide

2)(%

2-

http://www.tlu.ee/~sander12/angular/


27/28

!okkuvõteK#esole$a seminaritöö l#htus pro3leemist" et puudu$ad eesti keelsed Angulari &ppematerjalid%

9esm#rgiks oli luua &ppematerjal" mis koosne3 koodin#idetest ja 5lesannetest" mida &pilane

$&iks l#3ida &ppematerjaliga tut$umisel% K&iki Angulari komponente &ppematerjal ei sisalda

kuid autori ar$ates on t#htsamad komponendid olemas" mida $&iks tar$is minna Angulari

rakenduse loomise k#igus%

9smalt kirjuta3 autor $ajamine$atest oskustest" mis $&iks &pilasel ju3a omandatud olla% Seej#rel

on kirjas olemasole$atest &petustest" mida on töö loomisel kasutatud ning l5hidalt Angularist

endast ja selle ajaloost%

Igast komponendist" mille kohta töös kirjas on juurde lisatud n#idiskood ja n#idiskoodi tulemus%Samuti on k&ik n#ited" mida seminaritöös on kasutatud" 5le$al autori poolt loodud $ee3ilehel

http:;;***%tlu%ee;


28/28

!asutatud kirjandus*+s,hools% 'kuup#e$ puudu3(% Angular*+ Tutorial" Loetud aadressil

http:;;***%*+s,hools%,om;angular;de=ault%asp

Tutorialspoint% 'kuup#e$ puudu3(% Angular*+ Tutorial" Loetud aadressil

http:;;***%tutorialspoint%,om;angularjs;inde %htm

oogle% 'kuup#e$ puudu3(% Angular*+ % Loetud aadressilhttps:;;angularjs%org;

resolin" A% '20 !(% Angular*+ ,ub e0a&ples" Loetud aadressil

http:;;***%angularjshu3%,om;e amples;

Austin" A% 'kuup#e$ puudu3(% An verview of Angular*+ for 1anagers" Loetud aadressil

http:;;andre*austin%,om;an o$er$ie* o= angularjs =or managers;

2.
http://www.w3schools.com/angular/default.asphttp://www.tutorialspoint.com/angularjs/index.htmhttps://angularjs.org/http://www.angularjshub.com/examples/http://andrewaustin.com/an-overview-of-angularjs-for-managers/http://www.w3schools.com/angular/default.asphttp://www.tutorialspoint.com/angularjs/index.htmhttps://angularjs.org/http://www.angularjshub.com/examples/http://andrewaustin.com/an-overview-of-angularjs-for-managers/

Documents

AngularJS by Sander Leetus