AngularJS ng-view példával: A nézet megvalósítása
James Hartman
Manapság mindenki hallott volna az „egyoldalas alkalmazásokról”. Sok jól ismert webhely, például a Gmail használja az egyoldalas alkalmazások (SPA-k) fogalmát.
Az SPA az a koncepció, amely szerint amikor a felhasználó egy másik oldalt kér, az alkalmazás nem navigál erre az oldalra, hanem magában a meglévő oldalon jeleníti meg az új oldal nézetét.
Azt az érzést kelti a felhasználóban, hogy eleve soha nem hagyta el az oldalt. Ugyanez érhető el az Angularban a Views és az Útvonalak segítségével.
Ebben az oktatóanyagban megtudhatja,
Mi az a nézet?
A nézet a felhasználó számára megjelenített tartalom. Alapvetően amit a felhasználó látni szeretne, ennek megfelelően az alkalmazás nézete jelenik meg a felhasználó számára.
A nézetek és az útvonalak kombinációja segít egy alkalmazás logikai nézetekre való felosztásában és a különböző nézetek vezérlőkhöz való kötésében.
Az alkalmazás különböző nézetekre való felosztá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.
Tételezzük fel, hogy van egy rendelési alkalmazásunk, ahol az ügyfél megtekintheti a rendeléseit é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.
Ahelyett, hogy két különböző weboldal lenne, az egyik a „Rendelések megtekintése”, a másik pedig az „Új rendelések” számára AngularJS, ehelyett két különböző nézetet kell létrehoznia ugyanazon az oldalon, „Rendelések megtekintése” és „Új rendelések” néven.
Alkalmazásunkban 2 hivatkozási hivatkozás is lesz a #show és #new néven.
- Tehát amikor az alkalmazás a MyApp/#show-ra megy, akkor a Megrendelések megtekintése nézetet fogja látni, ugyanakkor nem hagyja el az oldalt. Csak frissíti a meglévő oldal szakaszát a „Rendelések megtekintése” információval. Ugyanez vonatkozik az „Új rendelések” nézetre is.
Így ily módon csak egyszerűbbé válik az alkalmazás különböző nézetekre való szétválasztása, hogy könnyebben kezelhető legyen, és szükség esetén könnyebb legyen a változtatások végrehajtása.
Minden nézethez tartozik egy megfelelő vezérlő, amely vezérli az adott funkció üzleti logikáját.
ng-view irányelv az AngularJS-ben
Az „ngView” egy direktíva, amely kiegészíti a $route szolgáltatást azáltal, hogy belefoglalja az aktuális útvonal megjelenített sablonját a fő elrendezési (index.html) fájlba.
Minden alkalommal, amikor az aktuális útvonal megváltozik, a nézet a $route szolgáltatás konfigurációjának megfelelően változtatásokat tartalmazott anélkül, hogy maga az oldal változott volna.
Mi fogunk fedezni útvonalak egy későbbi fejezetben egyelőre arra összpontosítunk, hogy több nézetet adjunk az alkalmazásunkhoz.
Az alábbiakban az egész folyamat működését bemutató folyamatábra látható. Az alábbiakban bemutatott példánkban minden folyamatot részletesen megvizsgálunk.
Az ng-view megvalósítása az AngularJS-ben
Vessünk egy példát arra, hogyan valósíthatjuk meg az ng-view-t az AngularJS-ben. Példánkban két lehetőséget fogunk bemutatni a felhasználónak,
- Az egyik az „Esemény” megjelenítése, a másik 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 az „Esemény megjelenítése” nézetre is.
Kérjük, kövesse az alábbi lépéseket, hogy ezt a példát a helyére tegye.
Step 1) Szerelje fel az angular-route fájlt szkripthivatkozásként.
Ez az útvonalfájl szükséges a több útvonal és nézet funkcióinak kihasználásához. Ez a fájl letölthető az angularJS webhelyéről.
Step 2) Adjon hozzá href és div címkéket.
Ebben a lépésben a
- 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 címkét az ng-view direktívával, amely a nézetet képviseli. Ez lehetővé teszi a megfelelő nézet beillesztését, amikor a felhasználó az „Új esemény hozzáadása linkre” vagy az „Esemény megjelenítése hivatkozásra” kattint.
Step 3) Az Angular JS szkriptcímkéjéhez adja hozzá a következő kódot.
Ne törődjünk az útválasztással, ezt egy későbbi fejezetben fogjuk látni. Lássuk most a nézetek kódját.
- Ez a kódszakasz azt jelenti, hogy amikor a felhasználó rákattint a „NewEvent” href címkére, amelyet korábban a div címkében határoztak meg. Ez az add_event.html weboldalra fog kerülni, onnan veszi a kódot, és beilleszti a nézetbe. Másodszor a nézet üzleti logikájának feldolgozásához lépjen az „AddEventController” oldalra.
- Ez a kódszakasz azt jelenti, hogy amikor a felhasználó a „DisplayEvent” href címkére kattint, amelyet korábban a div címkében definiált. A show_event.html weboldalra fog kerülni, onnan veszi a kódot, és beilleszti a nézetbe. Másodszor, a nézet üzleti logikájának feldolgozásához lépjen a „ShowDisplayController” oldalra.
- Ez a kódrészlet azt jelenti, hogy a felhasználó számára megjelenített alapértelmezett nézet a DisplayEvent nézet
Step 4) Adjon hozzá vezérlőket az üzleti logika feldolgozásához.
A következő lépés a vezérlők hozzáadása az üzleti logika feldolgozásához mind a „DisplayEvent”, mind az „Új esemény hozzáadása” funkcióhoz.
Egyszerűen csak hozzáadunk egy üzenetváltozót minden hatókör objektumhoz minden vezérlőhöz. Ez az üzenet akkor jelenik meg, amikor a megfelelő nézet megjelenik a felhasználó számára.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
</head>
<body ng-app="sampleApp">
<h1> Guru99 Global Event</h1>
<div class="container">
<ul><li><a href="#!NewEvent"> Add New Event</a></li>
<li><a href="#!DisplayEvent"> Display Event</a></li>
</ul>
<div ng-view></div>
</div>
<script>
var app = angular.module('sampleApp',["ngRoute"]);
app.config(function($routeProvider){
$routeProvider.
when("/NewEvent",{
templateUrl : "add_event.html",
controller: "AddEventController"
}).
when("/DisplayEvent", {
templateUrl: "show_event.html",
controller: "ShowDisplayController"
}).
otherwise ({
redirectTo: '/DisplayEvent'
});
});
app.controller("AddEventController", function($scope) {
$scope.message = "This is to Add a new Event";
});
app.controller("ShowDisplayController",function($scope){
$scope.message = "This is display an Event";
});
</script>
</body>
</html>
Step 5) Hozzon létre add_event.html és show_event.html nevű oldalakat
Ezután hozza létre az 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 található az „Új esemény hozzáadása” szöveggel együtt, és egy kifejezés az „Új esemény hozzáadása” üzenet megjelenítéséhez.
Hasonlóképpen, a show_event.html oldalon is lesz egy fejléccímke, amely tartalmazza az „Esemény megjelenítése” szöveget, valamint egy üzenetkifejezés az „Esemény megjelenítése” üzenet megjelenítéséhez.
Az üzenetváltozó értéke a nézethez csatolt vezérlő alapján kerül beadásra.
Minden oldalhoz hozzáadjuk az üzenetváltozót, amelyet az egyes vezérlők injektálnak.
- add_event.html
<h2>Add New Event</h2>
{{message}}
- show_event.html
<h2>Show Event</h2>
{{message}}
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A kimenetből 2 dolgot vehetünk észre
- A címsor tükrözi az aktuális nézetet. Tehát mivel az alapértelmezett nézet az Esemény megjelenítése képernyőt mutatja, a címsor a „DisplayEvent” címét mutatja.
- 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 az Új esemény hozzáadása hivatkozásra a megjelenő oldalon. Most megkapja az alábbi kimenetet.
output:
- A címsor most azt mutatja, hogy az aktuális nézet az „Új esemény hozzáadása” nézet. Figyelje meg, hogy továbbra is ugyanazon a jelentkezési oldalon lesz. Nem lesz átirányítva új jelentkezési oldalra.
- Ez a rész a Nézet, és most megváltozik, hogy megjelenítse a HTML az „Új esemény hozzáadása” funkcióhoz. Tehát most ebben a részben 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.
