Angulari juhised
Samm 1 / 32
Installi Angulari command line interface:
cli.angular.io
Sulge command prompt, et saaksid Angulari (ng) CLI'd kasutama hakata
Ava uus command prompt aken
Kirjuta kontrolliks "ng", nägemaks kõiki Angulari käske
Uue projekti tegemiseks kasuta käsku: ng new PROJEKTI-NIMI
Jah, las Angular genereerib meile routing faili ja impordid valmis
Kasutame kujunduseks CSS-i
Ava projekti kaust (kus sa ng new käsu tegid) Visual Studio Code's
e2e kaust on sisseehitatud end to end testide jaoks (Protractor Seleniumi baasil)
node_modules kausta sees on kõik dependency'd (@angular kaust on põhiline)
Tänase päeva jooksul muudame vaid src kausta
Mina olen lisanud endale Angular ikoonide teema "Philip Kief poolt"
Soovi korral (et oleks samasugune vaade) võite selle extensions alt lisada
Pange projekt käima käsu "ng serve" abil
ng serve käsk tuleb teha projekti kausta (seal kus on angular.json fail)
Angular läheb nüüd käima pordil localhost:4200
Kui tahta, et projekt kohe pärast kompileerimist chromes lahti tuleks või kasutada käsku: "ng serve --open" (lühend "ng s -o")
Kui mitmes aknas "ng serve" kirjutada, siis on port hõivatud ja tuleb kirjutada "ng serve --port", mis genereerib juhusliku pordi
Teeme app.component.html placeholderist tühjaks ja jätame vaid router-outlet'i
Genereeri uued componendid "ng generate component COMPONENDI_NIMI" käsuga (lühend ng g c NIMI)
Teeme 3 componenti: listi näitamiseks, muutmiseks, ostukorviks
Iga component on nelik: "HTML, CSS, TS ja SPEC (Unit test)" failidest
Kõik componendid deklareeritakse app.module's (vt ka command promptis UPDATE rida lisaks CREATE ridadele)
App-routingu failis saame tähistada mis pathil mis componenti näidatakse
Tühi path ("") tähendab, et kui localhost:4200-le midagi ei järgne
Koolon tähistab muutujat
Kontrolli, et oleksid üleval componentide impordid ja et objektide massiivis oleksid elemendid eraldatud komaga
Kui server käima panna (ng serve), siis pealehel on "item-list works" ja item/MUUTUJA pathil "item-edit works"
Componentide vahel ei saa andmeid saata.
Andmete saatmiseks ühest componendist teise tuleb kasutada Service't.
Genereerime uue Service'i käsuga "ng generate service item" (ng g s item)
Täidame Service'i mock andmetega: võta siit kood -> pastebin
Mine ebay.com ja sisesta midagi otsingusse (nt "xbox")
Ava konsool, kleebi sinna pastebin koodijupp ja kopeeri tagastatud esemete massiiv
Tee Service sees uus privaatne muutuja ja kleebi kopeeritud kood muutuja väärtuseks
Tee valmis sobivad funktsioonid
Selleks, et Service-i sisu kasutada, tuleb Service klassi konstruktorisse lisada (Dependency Injection)
Service-i seest saame kõik esemed kätte "getItems()"" funktsiooniga, paneme selle funktsiooni tagastuse "items" muutuja sisse
for tsükliga kuva kõik tooted
ng on Angulari direktiiv (seda võimaldab kasutada CommonsModule, mis on injectitud läbi BrowserModule-i app.module.ts'st)
Kui "ng serve" käib, siis on võimalik näha tooteid järgneval kujul:
Lisa järgmised klassid HTML faili:
Lisa järgmine header ja nüüd peaksid localhost:4200 peal olema nii tooted kui ka menüü
Eseme muutmiseks tekita esiteks nupp, mis vahetab URLi, pannes eseme järjekorranumbri muutujana kaasa
Lisa muutuja itemId, kuhu sisse tahame saada ID, mis on URL aadressiribas
Muutujate kätte saamiseks URL-st on vajalik ActivatedRoute klass @angular/router-st
Kutsume selle klassi seest välja muutuja "params", mille külge subscribime
Muutuv väärtus on "param", mis on objekt - selle küljest küsime id (me ise panime app-routingusse :id)
Teeme üles muutuja "item", kuhu soovime muudetavat eset
Konstruktorisse lisame dependency ItemService, kust saame eseme kätte
Kutsume muutuja kaudu välja funktsiooni, mis tagastab üksiku eseme
Vormi tuleb väärtusi süstida. Selleks peame alustama vormi .ts failist
Teeme üles muutuja, kuhu paneme terve vormi sisse
ngOnInit sees täidame muutuja
Teeme valmis funktsiooni, kui me vormi HTMLis submitime.
Kutsume ItemService kaudu välja editItem funktsiooni
HTMLi sisse teeme Angulari ReactiveFormi
Tavalisele HTMLile on need atribuudid tundmatud, seega peame vastavad Module-d lisama (vt järgmist lehte)
Lisame HTMLis eelmiste atribuutide kasutamiseks vajalikud moodulid
Angular võib vajada "ng serve" katkestamist ja uuesti käima panemist muutuste sisselugemiseks
Täidame vormi input ja label väljadega
formControlName seob input väljad vormiga
Lisame sobivad CSS klassid
Muutmine toimib (kui "muuda" nuppu vajutada ja brauseri tagasi nuppu vajutada)
Pärast vormi sisestamist võiks leht meid tagasi esilehele viia
Selleks kasutame Router klassi omadusi ja navigateByUrl
Iseseisev töö:
Tee uus URL path CartComponendile. Kontrolli, kas "cart work" tuleb kui see path sisestada.
Lisa menüüs olevale PILDILE routerLink pealehele minemiseks, OSTUKORVILE routerLink äsja lisatud pathile minemiseks
Genereeri CartService, sisse tee muutuja, mille väärtus tühi massiiv
CartService alla lisa funktsioon, millega on võimalik ühte eset ülalolevasse massiivi lisada
ItemList.ts sisse lisa CartService konstruktorisse (+ import)
ItemList.ts failis FUNKTSIOON(item) seest kutsu välja CartService-sse tehtud funktsioon
ItemList.html lisa nupp, mille sisse seekord routerLink asemel koodilõik (click)="FUNKTSIOON(item)"
Cart.html seest tee for-tsükkel esemete välja printimiseks
Cart sisse planeeritud CSS klassid on järgmised:
