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. <body ng-controller="C1 as vm">
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:
<button ng-click="vm.increase()">Increase</button>
4. Lisage lehele andmete sisestuse võimalus.
a) lisage sisestuse kast: <input ng-model="vm.newItem"></input>
b) lisage nupp sisestamiseks: <button ng-click="vm.addItem()">Add</button>
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.
<div ng-repeat="item in vm.items">{{ item }}</div>
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.
<span ng-class="{ done: item.done }">{{ item.title }}</span>
<input type="checkbox" ng-model="item.done"></input>
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: <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
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: <div ng-view></div>
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: <a href ng-click="vm.removeTask(task._id)">X</a>
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
