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