Add readme

This commit is contained in:
Arti Zirk 2017-05-11 09:20:45 +03:00
parent 886bc1676b
commit 31d19224c2

69
README.md Normal file
View File

@ -0,0 +1,69 @@
AngularJS teenused ja komponendid
Kloonige https://bitbucket.org/mkalmo/i399exng1comp repo ja importige see IDE-sse.
Eesmärk on teha rakendus, läbi mille saab näha ja muuta seadmete olekut.
Seadmetega suhtlemise teenusest on esialgu prototüüp, mis riistvaraga ei
suhtle ja hoiab andmeid lihtsalt mälus.
1. Toorikus hoitakse seadmete olekut kontrolleris. Viige see teenusesse.
Toorik on olemas: app/board.srv.js
2. Toorikus olev meetod getBoardState() tagastab seisu sünkroonselt.
Tehke nii, et see tagastaks promise-i: $q.when(data);
3. Pange tööle teenuse setLight() meetod. Tehke lehele link valguse
sisselülitamiseks.
4. Tehke komponent, mille kaudu lülitite olekut juhtida.
Komponent näitab mingi seadme binaarset olekut ja lubab seda muuta.
Olemas on fail app/switch.cmp.js ja selle vaade app/switch.cmp.html.
Komponendi väljanägemist juhitakse css klassi "on" abil.
Komponendile klikates peaks oleku ära muutma ja sellest ümbritsevale
kontrollerile teada andma.
a) Komponendi kasutamiseks vaatest (index.html):
<switch initial="vm.state.light"
on-change="vm.lightSwitchCallback"></switch>
b) Määrake seosed, et atribuutide initial ja on-change väärtused
komponendi kontrollerisse (app/switch.cmp.js) jõuaksid:
bindings: {
isOn: '<initial',
onChange: '<'
}
Kontrollimiseks $onInit meetodis: console.log(this.isOn);
c) Lisage komponendi kontrollerile meetod toggle(), mis muudab isOn
väärtust. Selle poole pöördub app/switch.cmp.html.
d) Määrake välimises kontrolleris (app/board.ctrl.js) callback
funktsioon, mis muutusest teenust (app/board.srv.js) teavitab.
5. Muutke teenust (app/board.srv.js) nii, et olek säiliks ka lehe
värskendamisel:
sessionStorage.setItem('BOARD-STATE', <string>);
sessionStorage.getItem('BOARD-STATE');
6. Minimiseerige rakenduse kood.
Veenduge, et kõigis sõltuvuste süstimise kohtades on sobilikud märked.
nt. Ctrl.$inject = ['board'];
Installige teegid:
> npm install
Käivitage gulp skript:
> npm run build
(Tekkis kataloog "dist")
Serveerige rakendus "dist" kataloogist:
> npm run serve
Kontrollige, et rakendus töötab.
Lahendused: https://youtu.be/l7IibcbX8ow