AngularJS

Kloonige https://bitbucket.org/mkalmo/i399exng1 repo ja importige see IDE-sse.

1. Seadistage Angulari raamistik, et see töötleks lehel olevat märget {{ 1 + 2 }}. a) looge uus angulari rakendus (moodul): angular.module('app', []) b) lisage html elemendile atribuut ng-app="app"

2. Lisage rakendusele kontroller, mille andmeid lehel välja näidatakse. a) registreerige kontroller: angular.module('app').controller('C1', function () { this.myVar = 1; }); b) siduge kontroller mõne elemendiga. nt.

3. Lisage lehele nupp, millele vajutades suurendatakse myVar väärtust. a) lisage kontrollerile meetod: this.increase = function () { this.myVar++; } b) lisage lehele nupp, mis funktsiooni välja kutsub: Increase

4. Lisage lehele andmete sisestuse võimalus. a) lisage sisestuse kast: b) lisage nupp sisestamiseks: Add c) lisage kontrollerisse väli, mis hoiab uue elemendi infot ja väli, mis hoiab kõiki sisestatud elemente. d) lisage kontrollerisse meetod, mis sisestuse väljale kirjutatu listi lisab. this.addItem = function () { this.items.push(this.newItem); }

5. Tehke nii, et igat sisestatud elementi näidatakse eraldi real.

   {{ item }}

6. Lisage iga sisestatud elemendi järgi märgistamise kast. Märgistades peaks muutuma elemendi stiil. a) uus element peaks olema järgmise struktuuriga: { title: 'Hello', done: false }. ehk väljanäidatavale osale lisandub veel lipuke, kus hoitaks infot täidetuse kohta. b) lisage märgistamise kast ja stiili muutmise kood. {{ item.title }}

7. Viige kood index.html failist eraldi faili, millele viidatakse index.html-ist.

8. Näidake andmeid, mis tulevad väliselt veebiteenuselt. a) laadige teegid

   npm install b) käivitage server npm start # rakendus on nüüd kättesaadav aadressilt http://localhost:3000 c) lisage kontrolleri konstruktorisse parameeter $http d) tehke kontrollerisse muutuja vm, mis viitab this väärtusele. var vm = this; e) tehke päring teenusele ja näidake teenuselt saadud andmeid $http.get('api/tasks').then(function (result) { vm.items = result.data; });

   $http teenuse kasutamiseks tuleb see kontrollerise süstida ehk lisada kontrolleri konstruktorile sellise nimega argument.

9. Tehke nii, et andmete sisestamisel saadetakse need veebiteenusele. a) sisestamise meetodis konstrueerige uus element var newItem = { title: vm.newItem, added: new Date() }; b) saatke uus element veebiteenusele $http.post('api/tasks', newItem).then(function () { // tehke uus get päring, et vaade uueneks. });

10. Lisage ühe elemendi vaatamise võimalus. Vaatamiseks on eraldi aadress. a) lisage index.html-i viide: b) lisage deklareerige rakendusele sõltuvust ruuteri moodulist: angular.module('app', ['ngRoute']); c) lisage rakendusele ruuteri konfiguratsioon (asub failis app/routes.js) d) jagage rakenduse html eraldi mallidele (app/list.html ja app/details.html) e) malli näitamiseks tuleb vastav koht märgistada atribuudiga ng-view:

    f) jagage kontroller kaheks (ListCtrl ja DetailsCtrl) g) url-ilt parameetri saamiseks on $routeParams.id h) vaate vahetamiseks on $location.path('/list');

    $routeParams ja $location kasutamiseks tuleb need kontrollerise süstida ehk lisada kontrolleri konstruktorile sellise nimega argumendid.

    i) detailide lehe kontrolleris peaks vastava id-ga kirje lugema ja selle seejärel välja näitama.

    Kirje lugemiseks on: $http.get('api/tasks/' + $routeParams.id).then(function (result) { vm.task = result.data; });

    Kellaaja formaatimiseks: {{ vm.task.added | date : 'HH:mm' }}

11. Lisage kirjete kustutamise võimalus. a) iga kirje järel on nupp kustutamiseks: X b) enne kustutamist küsida kinnitust modalService.confirm() modalService on eraldi failis (app/modal.srv.js) ja sellele peaks index.html-ist viitama. c) pärast kinnitust teha kustutamine: modalService.confirm() .then(function () { return $http.delete('api/tasks/' + id); }).then(init);

Lahendused: https://youtu.be/Tpfab1vFVec