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

   {{ item }}

3. Lisage lehele andmete sisestuse võimalus: a) Lisage sisestuse kast: <input [(ngModel)]="newTaskTitle"/> b) Lisage nupp sisestamiseks: <button (click)="addNewTask()">Lisa 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 }} <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:

   c) Lisage link vaatesse navigeerimiseks: {{ task.title }}

   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