Add readme
This commit is contained in:
parent
886bc1676b
commit
31d19224c2
69
README.md
Normal file
69
README.md
Normal 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
|
Loading…
Reference in New Issue
Block a user