Manapság mindenki hallott volna az "Egyoldalas alkalmazásokról". Számos olyan jól ismert webhely, például a Gmail használja az Single Page Applications (SPA) fogalmát.
A SPA-k az a fogalom, hogy amikor a felhasználó egy másik oldalt kér, akkor az alkalmazás nem navigál arra az oldalra, hanem maga a meglévő oldalon jeleníti meg az új oldal nézetét.
A felhasználó számára azt az érzést kelti, hogy eleve nem hagyta el az oldalt. Ugyanez érhető el a Szögletben a Nézetek segítségével az Útvonalakkal együtt.
Ebben az oktatóanyagban megtanulja-
- Mi a nézet?
- ng-view irányelv AngularJS-ben
- ng-view példa
Mi a nézet?
A nézet az a tartalom, amelyet a felhasználó megmutat. Alapvetően, amit a felhasználó látni akar, ennek megfelelően az alkalmazásnak ez a nézete jelenik meg a felhasználó számára.
A nézetek és az Útvonalak kombinációja segít abban, hogy az alkalmazás fel legyen osztva a logikai nézetekben, és különböző nézeteket kössön a vezérlőkhöz.
Az alkalmazás különböző nézetekre bontása és az Útválasztás használata az alkalmazás különböző részeinek betöltéséhez segít az alkalmazás logikus felosztásában és kezelhetőbbé tételében.
Tegyük fel, hogy rendelkezünk rendelési alkalmazással, ahol az ügyfél megtekintheti a megrendeléseket és újakat adhat le.
Az alábbi ábra és az azt követő magyarázat bemutatja, hogyan lehet ezt az alkalmazást egyoldalas alkalmazásként elkészíteni.
Most ahelyett, hogy két különböző weboldala lenne, az egyik a "Megrendelések megtekintése", a másik pedig az "Új megrendelések", az AngularJS-ben, akkor két különböző nézetet hozna létre, úgynevezett "Megrendelések megtekintése" és "Új megrendelések" néven ugyanazon az oldalon.
Alkalmazásunkban két referencia link is lesz, a # show és a # new nevű.
- Tehát, amikor az alkalmazás a MyApp / # show-ra megy, megmutatja a Nézetrendelések nézetét, ugyanakkor nem hagyja el az oldalt. Csak frissíti a meglévő oldal szakaszát a "Megrendelések megtekintése" információval. Ugyanez vonatkozik az "Új megrendelések" nézetre is.
Így ily módon egyszerűen egyszerűbb az alkalmazást különböző nézetekre bontani, hogy könnyebben kezelhetővé és könnyebbé váljon, amikor szükséges.
És mindegyik nézetnek lesz egy megfelelő vezérlője, amely vezérli az adott funkcionalitás üzleti logikáját.
ng-view irányelv AngularJS-ben
Az "ngView" olyan irányelv, amely kiegészíti a $ route szolgáltatást azzal, hogy az aktuális útvonal renderelt sablonját belefoglalja a fő elrendezési (index.html) fájlba.
Valahányszor az aktuális útvonal változik, a nézet a $ route szolgáltatás konfigurációjának megfelelően változtatja meg, anélkül, hogy magát az oldalt megváltoztatná.
Az útvonalakat egy későbbi fejezetben tárgyaljuk, egyelőre arra összpontosítunk, hogy több nézetet adjunk alkalmazásunkhoz.
Az alábbiakban bemutatjuk a teljes folyamat működésének teljes folyamatábráját. Az alábbiakban bemutatott példánkban minden folyamatot részletesen át fogunk nézni.
ng-view példa
Nézzünk meg egy példát arra, hogyan tudjuk megvalósítani a nézeteket.
Példánkban két lehetőséget mutatunk be a felhasználónak,
- Az egyik az "Esemény" megjelenítése, a másik pedig az "Esemény" hozzáadása.
- Amikor a felhasználó az Esemény hozzáadása linkre kattint, megjelenik az „Esemény hozzáadása” nézet, és ugyanez vonatkozik a „Kijelzőesemény” elemre is.
Kérjük, kövesse az alábbi lépéseket a példa megvalósításához.
1. lépés: Írja be az angular-route fájlt szkript referenciaként.
Ez az útvonalfájl a több útvonal és nézet funkcióinak kihasználásához szükséges. Ez a fájl letölthető az angularJS weboldalról.
2. lépés) Ebben a lépésben
- Adjon hozzá href címkéket, amelyek az "Új esemény hozzáadása" és az "Esemény megjelenítése" linkeket képviselik.
- Ezenkívül adjon hozzá egy div tag-et az ng-view irányelvhez, amely a nézetet képviseli.
Ez lehetővé teszi a megfelelő nézet injektálását, amikor a felhasználó az "Új esemény hozzáadása" linkre vagy az "Esemény megjelenítése linkre" kattint.
3. lépés: Az Angular JS szkript címkéjéhez adja hozzá a következő kódot.
Ne aggódjunk az útválasztás miatt, most ezt egy későbbi fejezetben láthatjuk. Most nézzük csak meg a nézetek kódját.
- Ez a kódrész azt jelenti, hogy amikor a felhasználó rákattint a "NewEvent" href címkére, amelyet a div tag korábban definiált. Ez az add_event.html weboldalra megy, és onnan veszi a kódot, és befecskendezi a nézetbe. Másodszor ennek a nézetnek az üzleti logikájának feldolgozásához keresse fel az "AddEventController" oldalt.
- Ez a kódrész azt jelenti, hogy amikor a felhasználó rákattint a korábban a div tagben definiált "DisplayEvent" href címkére. Ez a show_event.html weboldalra megy, onnan veszi a kódot, és befecskendezi a nézetbe. Másodszor, a nézet üzleti logikájának feldolgozásához lépjen a "ShowDisplayController" -re.
- Ez a kódrész azt jelenti, hogy a felhasználó számára megjelenített alapértelmezett nézet a DisplayEvent nézet
4. lépés: Ezután vezérlőket kell hozzáadni az üzleti logika feldolgozásához mind a "DisplayEvent", mind az "Új esemény hozzáadása" funkcióhoz.
Csak egyszerűen hozzáadunk egy üzenetváltozót minden vezérlő minden hatókör-objektumához. Ez az üzenet akkor jelenik meg, ha a megfelelő nézet megjelenik a felhasználó számára.
Event Registration Guru99 Global Event
5. lépés: Hozzon létre add_event.html és show_event.html nevű oldalakat. Legyen az oldalak egyszerűek az alábbiak szerint.
Esetünkben az add_event.html oldalon egy fejléccímke lesz az "Új esemény hozzáadása" szöveggel együtt, és egy kifejezéssel megjeleníti az "Ez egy új esemény hozzáadása" üzenetet.
Ehhez hasonlóan a show_event.html oldalon is lesz egy fejléccímke, amely az "Esemény megjelenítése" szöveget fogja tárolni, és egy üzenetkifejezéssel is rendelkezik, amely az "Ez egy esemény megjelenítéséhez" üzenetet jeleníti meg.
Az üzenetváltozó értékét a nézethez csatolt vezérlő alapján injektáljuk.
Minden oldalhoz hozzáadjuk az üzenetváltozót, amelyet az egyes vezérlők injektálnak.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből 2 dolgot észlelhetünk
- A címsor tükrözi a jelenleg megjelenített nézetet. Tehát mivel az alapértelmezett nézet az Esemény megjelenítése képernyő megjelenítése, a címsor mutatja a "DisplayEvent" címét.
- Ez a szakasz a Nézet, amely menet közben jön létre. Mivel az alapértelmezett nézet az Esemény megjelenítése, ez jelenik meg a felhasználó számára.
Most kattintson a megjelenő oldalon az Új esemény hozzáadása linkre. Most megkapja az alábbi kimenetet.
Kimenet:
- A címsáv most azt tükrözi, hogy az aktuális nézet most az "Új esemény hozzáadása" nézet. Figyelje meg, hogy továbbra is ugyanazon az alkalmazás oldalon lesz. Nem kerül új alkalmazásoldalra.
- Ez a szakasz a Nézet, és ez most megváltozik, és megjeleníti az "Új esemény hozzáadása" funkció HTML-jét. Tehát ebben a szakaszban az "Új esemény hozzáadása" fejléc és az "Új esemény hozzáadása" szöveg jelenik meg a felhasználó számára.