diff --git a/README.txt b/README.txt new file mode 100644 index 0000000..8a8e2e1 --- /dev/null +++ b/README.txt @@ -0,0 +1,110 @@ +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: + + +4. Lisage lehele andmete sisestuse võimalus. + a) lisage sisestuse kast: + b) lisage nupp sisestamiseks: + 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 +