Add readme

This commit is contained in:
Arti Zirk 2017-06-07 11:45:11 +03:00
parent 1c37bfd535
commit 12310fa380

123
README.md Normal file
View File

@ -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