UI:Nurgelised Kassid: erinevus redaktsioonide vahel
| (ei näidata sama kasutaja üht vahepealset redaktsiooni) | |||
| 8. rida: | 8. rida: | ||
* Mallide <nowiki>{{}}</nowiki> avaldiste kasutamine. | * Mallide <nowiki>{{}}</nowiki> avaldiste kasutamine. | ||
* Tab-ide implementeerimine. | * Tab-ide implementeerimine. | ||
* Tekstivälja (input type=text) info kuvamine avaldise abil. | * Tekstivälja (input type=text) info kuvamine avaldise abil. (See on harjutusena tore, aga lõpptulemuses seda vägisi pole mõtet kajastada) | ||
* Kontrollerist nimekirja esitamine | * Kontrollerist nimekirja esitamine | ||
* Vormi abil kontrollerisse nimekirja info lisamine | * Vormi abil kontrollerisse nimekirja info lisamine | ||
| 16. rida: | 16. rida: | ||
Kassi kohta salvestage: | Kassi kohta salvestage: | ||
* Nimi | * Nimi | ||
* | * Sünniaasta | ||
Kasside nimekiri salvesta kontrolleris. | Kasside nimekiri salvesta kontrolleris. | ||
Viimane redaktsioon: 22. veebruar 2017, kell 12:55
| Leht kuulub aine Kasutajaliidesed juurde. |
Harjutuse eesmärgiks on Angular.js käima ajada ja sellega veidi tutvuda.
Ülesanne
Lahendage ülesanne angular.js meetotidega. Selle harjutamiseks sobib järgmiste alamülesannete lahendamine angular.js abil:
- Mallide {{}} avaldiste kasutamine.
- Tab-ide implementeerimine.
- Tekstivälja (input type=text) info kuvamine avaldise abil. (See on harjutusena tore, aga lõpptulemuses seda vägisi pole mõtet kajastada)
- Kontrollerist nimekirja esitamine
- Vormi abil kontrollerisse nimekirja info lisamine
Kõike seda saab proovida, kui võtta ülesandeks kasside arvepidamise rakendus ja see Angularis implementeerida. Rakenduse vaates oleks kaks tab-i: "Nimekiri" ja "Lisa kass". Sellest kõrgemal h1 pealkirjas ütleb, mis tab parajasti on valitud.
Kassi kohta salvestage:
- Nimi
- Sünniaasta
Kasside nimekiri salvesta kontrolleris.
Vormiväljal lisatud kass lisa nimekirja lõppu (või sordi aastaarvude või eesnimede järgi).
Reaalset, reloadi üleelavat salvestust ärge implementeerige.
Boonus
Kui oskate Angulari piisavalt, et ülesanne tundub igav, võite võistelda ajaliselt, kes esimesena lahenduse postkasti saab, lahendada mõni kodutöö rakenduse alamülesanne või siis lihtsalt õppejõudu veenda oma angularivõimekuses. Lisaks võite kasutada ka teisi analoogseid mudelvaatega liidese kirjeldamise teeke.
Lisainfo
- Angularjs.org
- Angulari kasutusjuhend
- Angular Cheat sheet - siit on hea direktiive ja filtreid piiluda
Esitamine
- Salvestage töö arvutiklassi W: kettale või veebi.
- Saatke e-post jaagup.irve@ttu.ee aadressil, mille teemarida on "UI:Nurgelised Kassid" (mis on oluline, sest sortimine!), ning milles on teie töö aadress.
NB: Arvutiklasside veebiketastel leiduv on nähtav aadressil: http://www.tud.ttu.ee/web/Teie.Kasutajanimi/ ja vajab index.html faili (ning ärge unustage suuri tähti). Hindamise sissekandmisel on kasu ka ka autorite nimedest!