Add readme

2017-04-20 08:47:07 +03:00 · 2017-04-20 08:47:07 +03:00 · dfbf47ff2d
parent 8af01584e3
commit dfbf47ff2d
1 changed files with 110 additions and 0 deletions
--- a/README.txt
+++ 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. <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
+