U današnje vrijeme svi bi čuli za "Aplikacije s jednom stranicom". Mnoge poznate web stranice poput Gmaila koriste koncept aplikacija s jednom stranicom (SPA).
SPA-ovi su koncept u kojem kada korisnik zatraži drugu stranicu, aplikacija neće prijeći na tu stranicu, već će prikazati prikaz nove stranice unutar same postojeće stranice.
Korisniku daje osjećaj da uopće nije napustio stranicu. Isto se može postići u Kutnom uz pomoć Prikaza zajedno s Rutama.
U ovom vodiču naučit ćete-
- Što je pogled?
- ng-view direktiva u AngularJS
- Primjer ng-pregleda
Što je pogled?
Pogled je sadržaj koji se prikazuje korisniku. U osnovi ono što korisnik želi vidjeti, u skladu s tim taj će se prikaz aplikacije prikazati korisniku.
Kombinacija pogleda i ruta pomaže u razdvajanju aplikacije u logičkim prikazima i povezivanju različitih pogleda s kontrolerima.
Podjela aplikacije na različite poglede i korištenje usmjeravanja za učitavanje različitih dijelova aplikacije pomaže u logičnoj podjeli aplikacije i čineći je upravljivijom.
Pretpostavimo da imamo aplikaciju za narudžbu u kojoj kupac može pregledavati narudžbe i stavljati nove.
Dijagram u nastavku i objašnjenje u nastavku pokazuju kako napraviti ovu aplikaciju kao aplikaciju na jednoj stranici.
Sada, umjesto da imate dvije različite web stranice, jednu za "Pregled narudžbi" i drugu za "Nove narudžbe", u AngularJS-u biste umjesto toga stvorili dva različita pogleda pod nazivom "Pregled narudžbi" i "Novi narudžbe" na istoj stranici.
U našoj ćemo aplikaciji također imati 2 referentne poveznice pod nazivom #show i #new.
- Dakle, kada aplikacija pređe na MyApp / # show, prikazat će se pogled Pregled narudžbi, a istodobno neće napustiti stranicu. Samo će osvježiti odjeljak postojeće stranice informacijama "Pregled narudžbi". Isto vrijedi i za prikaz "Nove narudžbe".
Tako na ovaj način aplikacija postaje jednostavnije razdvojiti na različite poglede kako bi se učinilo upravljivijim i jednostavnijim za unošenje promjena kad god je to potrebno.
I svaki će prikaz imati odgovarajući kontroler za upravljanje poslovnom logikom za tu funkcionalnost.
ng-view direktiva u AngularJS
"NgView" je direktiva koja nadopunjuje uslugu $ route uključivanjem prikazanog predloška trenutne rute u datoteku glavnog izgleda (index.html).
Svaki put kad se trenutna ruta promijeni, prikaz je uključivao promjene u skladu s konfiguracijom usluge $ route bez promjene same stranice.
Rute ćemo obrađivati u kasnijem poglavlju, zasad ćemo se usredotočiti na dodavanje više pogleda u našu aplikaciju.
Ispod je cjelokupna shema tijeka kako funkcionira cijeli postupak. Detaljno ćemo proći za svaki postupak u našem primjeru prikazanom u nastavku.
Primjer ng-pregleda
Pogledajmo primjer kako možemo implementirati stavove.
U našem primjeru predstavit ćemo korisniku dvije mogućnosti,
- Jedno je prikazivanje "događaja", a drugo dodavanje "događaja".
- Kada korisnik klikne na vezu Dodaj događaj, prikazat će mu se prikaz za "Dodaj događaj", a isto vrijedi i za "Prikaz događaja".
Slijedite korake u nastavku da biste postavili ovaj primjer na mjesto.
Korak 1) Uključite datoteku kutne rute kao referencu skripte.
Ova datoteka rute potrebna je kako bi se iskoristile funkcije više ruta i pogleda. Ovu datoteku možete preuzeti s web stranice angularJS.
Korak 2) U ovom koraku,
- Dodajte href oznake koje će predstavljati poveznice na "Dodavanje novog događaja" i "Prikazivanje događaja".
- Također, dodajte div oznaku s ng-view direktivom koja će predstavljati pogled.
To će omogućiti ubrizgavanje odgovarajućeg prikaza svaki put kada korisnik klikne na "Dodaj novi događaj" ili "Prikaži događaj".
Korak 3) U oznaku skripte za Angular JS dodajte sljedeći kod.
Ne brinimo o usmjeravanju, zasad ćemo to vidjeti u kasnijem poglavlju. Pogledajmo zasad kod za preglede.
- Ovaj odjeljak koda znači da kada korisnik klikne na href oznaku "NewEvent" koja je ranije definirana u div oznaci. Otvorit će web stranicu add_event.html i odatle će uzeti kôd i ubrizgati ga u prikaz. Drugo za obradu poslovne logike za ovaj prikaz, idite na "AddEventController".
- Ovaj odjeljak koda znači da kada korisnik klikne na href oznaku "DisplayEvent" koja je ranije definirana u div oznaci. Otići će na web stranicu show_event.html, uzeti kôd odatle i ubrizgati ga u prikaz. Drugo, za obradu poslovne logike za ovaj prikaz, idite na "ShowDisplayController".
- Ovaj odjeljak koda znači da je zadani prikaz koji se prikazuje korisniku prikaz DisplayEvent
Korak 4) Slijedi dodavanje kontrolera za obradu poslovne logike i za funkcije "DisplayEvent" i "Add New Event".
Jednostavno dodajemo varijablu poruke u svaki objekt opsega za svaki kontroler. Ova će se poruka prikazati kada se korisniku prikaže odgovarajući prikaz.
Event Registration Guru99 Global Event
Korak 5) Izradite stranice nazvane add_event.html i show_event.html. Neka stranice budu jednostavne kako je prikazano u nastavku.
U našem slučaju, stranica add_event.html imat će zaglavlje zajedno s tekstom "Dodaj novi događaj" i izraz koji će prikazati poruku "Ovo je dodavanje novog događaja".
Slično tome, stranica show_event.html također će imati oznaku zaglavlja koja sadrži tekst "Prikaži događaj", a također će imati izraz poruke za prikaz poruke "Ovo je za prikaz događaja".
Vrijednost varijable poruke ubrizgat će se na temelju kontrolera koji je priključen na prikaz.
Za svaku ćemo stranicu dodati varijablu poruke koja će se ubrizgavati iz svakog odgovarajućeg kontrolera.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata možemo primijetiti dvije stvari
- Adresna traka odražavat će trenutni prikaz koji se prikazuje. Dakle, budući da je zadani prikaz prikazivanje zaslona Show Event, adresna traka prikazuje adresu za "DisplayEvent".
- Ovaj je odjeljak Pogled koji se stvara u hodu. Budući da je zadani prikaz Show Event one, to je ono što se prikazuje korisniku.
Sada kliknite vezu Dodaj novi događaj na prikazanoj stranici. Sada ćete dobiti donji izlaz.
Izlaz:
- Adresna traka sada će odražavati da je trenutni prikaz sada prikaz "Dodaj novi događaj". Primijetite da ćete i dalje biti na istoj stranici prijave. Nećete biti usmjereni na novu stranicu prijave.
- Ovaj je odjeljak Prikaz, a sada će se promijeniti kako bi se prikazao HTML za funkciju "Dodaj novi događaj". Dakle, sada se u ovom odjeljku korisniku prikazuje oznaka zaglavlja "Dodaj novi događaj" i tekst "Ovo je dodavanje novog događaja".