2.3 KiB
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.
-
Toorikus hoitakse seadmete olekut kontrolleris. Viige see teenusesse. Toorik on olemas: app/board.srv.js
-
Toorikus olev meetod getBoardState() tagastab seisu sünkroonselt. Tehke nii, et see tagastaks promise-i: $q.when(data);
-
Pange tööle teenuse setLight() meetod. Tehke lehele link valguse sisselülitamiseks.
-
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):
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.
-
Muutke teenust (app/board.srv.js) nii, et olek säiliks ka lehe värskendamisel:
sessionStorage.setItem('BOARD-STATE', ); sessionStorage.getItem('BOARD-STATE');
-
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