Danes bi vsi že slišali za "Aplikacije na eni strani". Mnoga znana spletna mesta, kot je Gmail, uporabljajo koncept enotnih strani (SPA).
SPA je koncept, v katerem uporabnik, ko zahteva drugo stran, ne bo prišel do te strani, temveč bo prikazal pogled nove strani znotraj same strani.
Uporabniku daje občutek, da sploh ni nikoli zapustil strani. Enako je mogoče doseči v Angularju s pomočjo pogledov v povezavi s potmi.
V tej vadnici boste izvedeli-
- Kaj je pogled?
- ng-view direktiva v AngularJS
- Primer ng-pogleda
Kaj je pogled?
Pogled je vsebina, ki je prikazana uporabniku. V bistvu to, kar želi uporabnik videti, bo uporabniku prikazan tudi ta prikaz aplikacije.
Kombinacija pogledov in poti pomaga razdeliti aplikacijo na logične poglede in povezati različne poglede s krmilniki.
Razdelitev aplikacije na različne poglede in uporaba usmerjanja za nalaganje različnih delov aplikacije pomaga logično razdeliti aplikacijo in jo narediti bolj obvladljivo.
Predpostavimo, da imamo aplikacijo za naročanje, v kateri si lahko kupec ogleda naročila in odda nova.
Spodnji diagram in nadaljnja razlaga prikazujeta, kako narediti to aplikacijo kot enostransko.
Zdaj, namesto da bi imeli dve različni spletni strani, eno za »Ogled naročil« in drugo za »Nova naročila«, bi v AngularJS namesto tega ustvarili dva različna pogleda, imenovana »Ogled naročil« in »Nova naročila« na isti strani.
V naši aplikaciji bomo imeli tudi 2 referenčni povezavi, imenovani #show in #new.
- Torej, ko aplikacija preide na MyApp / # show, bo prikazala pogled Ogled naročil, hkrati pa ne bo zapustila strani. Samo odsek obstoječe strani bo osvežil z informacijami »Ogled naročil«. Enako velja za pogled "Nova naročila".
Tako na ta način preprosto ločimo aplikacijo na različne poglede, da postane bolj obvladljiva in enostavna za spremembe, kadar koli je to potrebno.
In vsak pogled bo imel ustrezen krmilnik za nadzor poslovne logike za to funkcionalnost.
ng-view direktiva v AngularJS
"NgView" je direktiva, ki dopolnjuje storitev $ route z vključitvijo upodobljene predloge trenutne poti v datoteko glavne postavitve (index.html).
Vsakič, ko se trenutna pot spremeni, je pogled vključeval spremembe glede na konfiguracijo storitve $ route, ne da bi spremenil samo stran.
V naslednjem poglavju bomo obravnavali poti, zaenkrat se bomo osredotočili na dodajanje več pogledov v našo aplikacijo.
Spodaj je celoten diagram poteka, kako deluje celoten postopek. Podrobno bomo preučili vsak postopek v spodnjem primeru.
Primer ng-pogleda
Oglejmo si primer, kako lahko izvajamo poglede.
V našem primeru bomo uporabniku predstavili dve možnosti,
- Eno je prikazati »dogodek«, drugo pa dodati »dogodek«.
- Ko uporabnik klikne povezavo Dodaj dogodek, se mu prikaže pogled za »Dodaj dogodek« in enako velja za »Prikaz dogodka«.
Sledite spodnjim korakom, da dobite ta primer.
Korak 1) Vključite datoteko kotne poti kot sklic na skript.
Ta datoteka poti je potrebna, da se izkoristijo funkcije več poti in pogledov. To datoteko lahko prenesete s spletnega mesta angularJS.
Korak 2) V tem koraku
- Dodajte oznake href, ki bodo predstavljale povezave do "Dodajanje novega dogodka" in "Prikaz dogodka".
- Dodajte tudi oznako div z direktivo ng-view, ki bo predstavljala pogled.
To bo omogočilo vbrizganje ustreznega pogleda vsakič, ko uporabnik klikne bodisi povezavo »Dodaj nov dogodek« bodisi povezavo »Prikaži dogodek«.
Korak 3) V oznako skripta za Angular JS dodajte naslednjo kodo.
Ne skrbite za usmerjanje, za zdaj bomo to videli v naslednjem poglavju. Za zdaj si oglejmo samo kodo pogledov.
- Ta odsek kode pomeni, da ko uporabnik klikne na oznako href "NewEvent", ki je bila prej definirana v oznaki div. Odprl bo spletno stran add_event.html in od tam vzel kodo in jo vbrizgal v pogled. Drugič, za obdelavo poslovne logike za ta pogled pojdite na "AddEventController".
- Ta odsek kode pomeni, da ko uporabnik klikne na oznako href "DisplayEvent", ki je bila prej definirana v oznaki div. Odprl bo spletno stran show_event.html, od tam vzel kodo in jo vbrizgal v pogled. Drugič, za obdelavo poslovne logike za ta pogled pojdite na "ShowDisplayController".
- Ta odsek kode pomeni, da je privzeti pogled, prikazan uporabniku, pogled DisplayEvent
Korak 4) Naslednji je dodajanje krmilnikov za obdelavo poslovne logike tako za funkcijo "DisplayEvent" kot za "Add New Event".
Preprosto dodajamo spremenljivko sporočila vsakemu objektu obsega za vsak krmilnik. To sporočilo se bo prikazalo, ko bo uporabniku prikazan ustrezen pogled.
Event Registration Guru99 Global Event
5. korak) Ustvarite strani z imenom add_event.html in show_event.html. Naj bodo strani preproste, kot je prikazano spodaj.
V našem primeru bo stran add_event.html imela oznako glave skupaj z besedilom "Dodaj nov dogodek" in izraz za prikaz sporočila "To je dodajanje novega dogodka".
Podobno bo imela stran show_event.html tudi oznako glave, ki bo vsebovala besedilo »Pokaži dogodek«, prav tako pa bo imel izraz sporočila za prikaz sporočila »To je prikaz dogodka«.
Vrednost spremenljivke sporočila se vbrizga na podlagi krmilnika, ki je pritrjen na pogled.
Za vsako stran bomo dodali spremenljivko sporočila, ki jo bo vbrizgal vsak posamezni krmilnik.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Iz izhoda lahko opazimo dve stvari
- V naslovni vrstici bo prikazan trenutni prikaz. Ker je torej privzeti pogled prikaz zaslona Show Event, naslovna vrstica prikazuje naslov "DisplayEvent".
- Ta razdelek je pogled, ki se ustvari sproti. Ker je privzeti pogled Show Event one, se to prikaže uporabniku.
Zdaj na prikazani strani kliknite povezavo Dodaj nov dogodek. Zdaj boste dobili spodnji izhod.
Izhod:
- V naslovni vrstici bo zdaj prikazano, da je trenutni pogled zdaj pogled "Dodaj nov dogodek". Upoštevajte, da boste še vedno na isti strani s prijavo. Ne boste usmerjeni na novo stran s prijavo.
- Ta razdelek je Pogled in zdaj se bo spremenil, da bo prikazal HTML za funkcijo "Dodaj nov dogodek". Zdaj je v tem razdelku uporabniku prikazana oznaka glave "Dodaj nov dogodek" in besedilo "To je dodajanje novega dogodka".