70 lines
2.3 KiB
Markdown
70 lines
2.3 KiB
Markdown
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
|