You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
Arti Zirk 12310fa380 Add readme 4 years ago
app removed blank expressions 4 years ago
data done state 4 years ago
.gitignore done state 4 years ago
README.md Add readme 4 years ago
index.html done state 4 years ago
package.json removed: @types/es6-promise 4 years ago
tsconfig.json done state 4 years ago
webpack.config.js done state 4 years ago

README.md

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