Tänapäeval oleks kõik kuulnud "ühe lehe rakendustest". Paljud tuntud veebisaidid, näiteks Gmail, kasutavad ühe lehe rakenduste (SPA) mõistet.
SPA-d on mõiste, mille korral, kui kasutaja taotleb erinevat lehte, ei liigu rakendus sellele lehele, vaid kuvab uue lehe vaate olemasolevas lehes endas.
See annab kasutajale tunde, et ta ei lahkunud lehelt kunagi. Sama saab saavutada ka nurkade abil, kasutades vaateid koos marsruutidega.
Selles õpetuses saate teada
- Mis on vaade?
- ng-view direktiiv AngularJS-is
- ng-view näide
Mis on vaade?
Vaade on sisu, mida kasutajale näidatakse. Põhimõtteliselt see, mida kasutaja näha soovib, kuvatakse kasutajale seda rakenduse vaadet.
Vaadete ja marsruutide kombinatsioon aitab jagada rakenduse loogilistes vaadetes ja siduda erinevad vaated kontrolleritega.
Rakenduse jagamine erinevateks vaadeteks ja marsruudi kasutamine rakenduse eri osade laadimiseks aitab rakendust loogiliselt jagada ja selle paremini hallatavaks muuta.
Oletame, et meil on tellimisrakendus, kus klient saab tellimusi vaadata ja uusi esitada.
Allolev skeem ja järgnevad selgitused näitavad, kuidas seda rakendust ühe lehena rakendada.
Nüüd, selle asemel, et teil oleks AngularJS-is kaks erinevat veebilehte, üks "Tellimuste kuvamine" ja teine "Uute tellimuste" jaoks, looksite samal lehel kaks erinevat vaadet nimega "Kuva tellimused" ja "Uued tellimused".
Samuti on meie rakenduses kaks viitelinki nimega #show ja #new.
- Nii et kui rakendus läheb MyApp / # show-sse, näitab see View Orders vaate, samal ajal ei lahku see lehelt. See värskendab lihtsalt olemasoleva lehe jaotist "Kuva tellimuste" teabega. Sama kehtib ka vaate "Uued tellimused" kohta.
Nii muutub sel viisil rakenduse eraldamine erinevateks vaadeteks lihtsamaks, et muuta see vajaduse korral hõlpsamini hallatavaks ja hõlpsasti muudatuste tegemiseks.
Ja igal vaatel on selle funktsionaalsuse äriloogika juhtimiseks vastav kontroller.
ng-view direktiiv AngularJS-is
"NgView" on direktiiv, mis täiendab teenust $ route, lisades praeguse marsruudi renderdatud malli põhifaili (index.html).
Iga kord, kui praegune marsruut muutub, hõlmas vaade selle muutmist vastavalt marsruudi teenuse $ konfiguratsioonile ilma lehte ennast muutmata.
Käsitleme marsruute hilisemas peatükis, praegu keskendume rakendusele mitme vaate lisamisele.
Allpool on toodud kogu protsessi töö vooskeem. Allpool toodud näites vaatame üksikasjalikult läbi iga protsessi.
ng-view näide
Vaatame näite, kuidas vaateid rakendada.
Meie näites tutvustame kasutajale kahte võimalust,
- Üks on "Sündmuse" kuvamine ja teine "Sündmuse" lisamine.
- Kui kasutaja klõpsab lingil Sündmuse lisamine, kuvatakse talle vaade „Lisa sündmus” ja sama kehtib ka kuvasündmuse kohta.
Selle näite saamiseks toimige järgmiselt.
1. samm. Lisage skripti viiteks nurga marsruudi fail.
See marsruudifail on vajalik mitme marsruudi ja vaate funktsionaalsuse kasutamiseks. Selle faili saab alla laadida angularJS veebisaidilt.
2. samm. Selles etapis
- Lisage hrefi sildid, mis tähistavad linke linkidele "Uue sündmuse lisamine" ja "Sündmuse kuvamine".
- Samuti lisage ng-view direktiiviga div silt, mis esindab vaadet.
See võimaldab vastava vaate sisestada alati, kui kasutaja klõpsab linki "Lisa uus sündmus" või "Kuva sündmuse link".
Samm 3) Lisage oma Angular JS-i skripti märgendisse järgmine kood.
Ärme muretsege marsruutimise pärast, praegu näeme seda hilisemas peatükis. Vaatame praegu vaid vaadete koodi.
- See koodilõik tähendab, et kui kasutaja klõpsab href-märgendil "NewEvent", mis oli varem div-märgendis määratletud. See läheb veebilehele add_event.html ja võtab sealt koodi ning süstib selle vaate sisse. Teiseks minge selle vaate äriloogika töötlemiseks "AddEventController" -sse.
- See koodilõik tähendab seda, et kui kasutaja klõpsab varem märgendis div määratletud href-märgendil "DisplayEvent". See läheb veebilehele show_event.html, võtab sealt koodi ja süstib selle vaate sisse. Teiseks minge selle vaate äriloogika töötlemiseks jaotisse "ShowDisplayController".
- See koodilõik tähendab, et kasutajale kuvatav vaikevaade on vaade DisplayEvent
Samm 4) Järgmine on kontrollerite lisamine, et töödelda nii funktsioonide "DisplayEvent" kui ka "Lisa uus sündmus" äriloogikat.
Lisame lihtsalt iga kontrolleri igale ulatusobjektile sõnumimuutuja. See teade kuvatakse siis, kui kasutajale kuvatakse sobiv vaade.
Event Registration Guru99 Global Event
5. samm. Looge lehed nimega add_event.html ja show_event.html. Hoidke lehed lihtsad, nagu allpool näidatud.
Meie puhul on lehel add_event.html päise silt koos tekstiga "Lisa uus sündmus" ja avaldis, mis kuvab sõnumi "See on uue sündmuse lisamine".
Sarnaselt on lehel show_event.html ka päisemärgend teksti "Kuva sündmus" hoidmiseks ja sõnumi avaldis, mis kuvab teate "See on sündmuse kuvamine".
Sõnumimuutuja väärtus sisestatakse vaatele lisatud kontrolleri põhjal.
Iga lehe jaoks lisame sõnumimuutuja, mis süstitakse igast vastavast kontrollerist.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundi põhjal võime märgata kahte asja
- Aadressiriba kajastab kuvatavat vaadet. Nii et kuna vaikevaates kuvatakse kuva Sündmus, kuvatakse aadressiribal "DisplayEventi" aadress.
- See jaotis on vaade, mis luuakse käigu pealt. Kuna vaikevaade on Kuva sündmus, kuvatakse see kasutajale.
Nüüd klõpsake kuvatud lehel lingil Lisa uus sündmus. Nüüd saate allpool toodud väljundi.
Väljund:
- Aadressiriba kajastab nüüd, et praegune vaade on nüüd vaade "Lisa uus sündmus". Pange tähele, et olete endiselt samal rakenduse lehel. Teid ei suunata uuele rakenduse lehele.
- See jaotis on vaade ja see muutub nüüd funktsiooni "Lisa uus sündmus" HTML-i kuvamiseks. Nii et nüüd kuvatakse selles jaotises kasutajale päisesilt "Lisa uus sündmus" ja tekst "See on uue sündmuse lisamiseks".