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):

   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', ); 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