From 12310fa380f20e70d6924cf2b3bd85afad8675f2 Mon Sep 17 00:00:00 2001
From: Arti Zirk <arti.zirk@gmail.com>
Date: Wed, 7 Jun 2017 11:45:11 +0300
Subject: [PATCH] Add readme

---
 README.md | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e4637c1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,123 @@
+Angular
+
+Kloonige https://bitbucket.org/mkalmo/i399exng2 repo ja importige see IDE-sse.
+
+1. Käivitage rakendus arenduse serveris:
+
+   a) Laadige teegid:
+      > npm install
+   
+   b) Käivitage server:
+      > npm run serve  # rakendus on nüüd kättesaadav aadressilt http://localhost:3001
+
+2. Lisage komponenti (app/app.cmp.ts) väli "items" ja pange vaade (app/app.html) seda 
+   välja näitama:
+
+   items = [1, 2, 3];
+   
+   ja
+   
+   <div *ngFor='let item of items'>
+    {{ item }}
+   </div>
+
+3. Lisage lehele andmete sisestuse võimalus:
+   a) Lisage sisestuse kast: <input [(ngModel)]="newTaskTitle"/>
+   b) Lisage nupp sisestamiseks: <button (click)="addNewTask()">Lisa</button >
+   c) Lisage kontrollerisse väli, mis hoiab uue elemendi infot ja väli, 
+      mis hoiab kõiki sisestatud elemente. 
+      
+      newTaskTitle: string;
+      tasks: string[] = [];      
+
+   d) Lisage kontrollerisse meetod, mis sisestuse väljale kirjutatu listi lisab. 
+      addNewTask(): void {
+          this.tasks.push(this.newTaskTitle);
+      }
+
+4. 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.
+      
+      Selleks võite teha eraldi klassi:
+      
+      export class Task {
+         done: boolean = false;
+        
+         constructor(public title : string) {};
+      }
+   
+   b) Lisage komponendile (@Component annotatsiooni parameetrina) viide 
+      stiilile: styleUrls: ['app/list/list.css']
+      
+   c) Lisage märgistamise kast ja stiili muutmise kood.
+      
+      <span [class]="task.done ? 'done' : ''">{{ task.title }}</span>
+      <input type="checkbox" [(ngModel)]="task.done"/>
+
+5. Näidake andmeid, mis tulevad väliselt veebiteenuselt.
+   
+   a) Käivitage andmete veebiteenus:
+      > npm run back-end # teenus on nüüd kättesaadav aadressilt http://localhost:3000
+                         # sellele on tehtud proxi ka aadressilt http://localhost:3001
+                         # (webpack.config.js rida 31)
+   
+   b) Lisage komponendi konstruktorisse parameeter http:
+      constructor(private http: Http) {}
+      
+   c) Tehke päring teenusele ja näidake teenuselt saadud andmeid:
+      
+      updateTasks() {
+          return this.http
+              .get('api/tasks')
+              .toPromise()
+              .then(response => this.tasks = response.json());
+      }
+
+6. Tehke nii, et andmete sisestamisel saadetakse need veebiteenusele:
+
+   saveTask(task: Task) {
+       return this.http
+           .post('api/tasks', new Task(this.newTaskTitle))
+           .toPromise()
+           .then(() => {
+                this.updateTasks();
+                this.newTaskTitle = '';
+            });
+   }
+
+7. Kasutage veebiteenusega suhtlemiseks teenust TaskService (app/task.srv.ts).
+   Lisage mooduli (app/app.module.ts) providers listi TaskService ja
+   süstige see komponenti: constructor(private taskService: TaskService) {}
+
+8. Lisage ühe elemendi vaatamise võimalus. Vaatamiseks on eraldi aadress.
+        
+    a) Lisage mooduli (app/app.module.ts) imports listi ruuteri moodul
+       RouterModule.forRoot(routes, { useHash: true })
+       konfiguratsioon on välises failis:
+       import { routes } from "./routes";
+ 
+       Komponentidest on toorikud olemas app/list/list.cmp.ts ja
+       app/view/view.cmp.ts
+ 
+    b) Lisage peakomponendi vaatesse (app/app.html) koht alamkomponentide 
+       näitamiseks: <router-outlet></router-outlet>
+       
+    c) Lisage link vaatesse navigeerimiseks:
+       <a routerLink="/view/{{ task._id }}">{{ task.title }}</a>
+       
+    d) Parameetri (id) saate: 
+       const id = parseInt(this.route.snapshot.paramMap.get('id'));
+ 
+    e) Tagasi navigeerimiseks: this.router.navigateByUrl('/list');
+ 
+9. Paketeerige rakendus
+   > npm run build
+   tekkis build kataloog
+   
+   Laadige rakendus aadressilt: http://localhost:3000
+   Ehk staatiliselt, läbi "json-server"-i.
+
+Lahendused: https://youtu.be/s3-R0RuO3aM
+