You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
Arti Zirk 31d19224c2 Add readme 3 years ago
app Finished 3 years ago
img done state 3 years ago
.gitignore done state 3 years ago
README.md Add readme 3 years ago
gulpfile.js done state 3 years ago
index.html Finished 3 years ago
package.json done state 3 years ago
styles.css done state 3 years ago

README.md

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