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