AngularJS útválasztás paraméterekkel: Egyoldalas alkalmazáspélda

Mielőtt elkezdenénk az útválasztást, legyen egy rövid áttekintés az egyoldalas alkalmazásokról.

Mi az egyoldalas alkalmazások?

Az egyoldalas alkalmazások vagy (SPA) olyan webalkalmazások, amelyek egyetlen HTML-oldalt töltenek be, és dinamikusan frissítik az oldalt a webalkalmazás felhasználói interakciói alapján.

Mi az útválasztás az AngularJS-ben?

Az AngularJS-ben az útválasztás teszi lehetővé az egyoldalas alkalmazások létrehozását.

• Az AngularJS útvonalak segítségével különböző URL-eket hozhat létre az alkalmazás különböző tartalmaihoz.
• Az AngularJS útvonalak lehetővé teszik az egyik számára, hogy több tartalmat jelenítsen meg a választott útvonaltól függően.
• Az URL-ben a # jel után egy útvonal van megadva.

Vegyünk egy példát egy olyan webhelyre, amelyet a http://example.com/index.html URL- címen tárolnak .

Ezen az oldalon tárolja az alkalmazás főoldalát. Tegyük fel, hogy ha az alkalmazás Eseményt szervezett, és meg akarta tudni, hogy melyek a bemutatott különféle események, vagy egy adott esemény részleteit szeretné látni, vagy törölni szeretne egy eseményt. Egyoldalas alkalmazásban, ha az útválasztás engedélyezve van, ez a funkció az alábbi linkeken keresztül érhető el

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

A # szimbólumot a különböző útvonalakkal együtt kell használni (ShowEvent, DisplayEvent és DeleteEvent).

• Tehát ha a felhasználó meg szeretné tekinteni az összes eseményt, akkor a linkre irányítja őket ( http://example.com/index.html#ShowEvent ),
• Ha csak egy adott eseményt akarnak látni, akkor átirányítják őket a linkre ( http://example.com/index.html#DisplayEvent ) vagy
• Ha törölni szeretnének egy eseményt, a http://example.com/index.html#DeleteEvent linkre irányítják őket .

Vegye figyelembe, hogy a fő URL ugyanaz marad.

Ebben az oktatóanyagban megtanulja-

• Szögletes útvonal hozzáadása ($ routeProvider)
• Alapértelmezett útvonal létrehozása
• Paraméterek elérése az útvonalról
• Az Angular $ route szolgáltatás használata
• HTML5-útválasztás engedélyezése

Szögletes útvonal hozzáadása ($ routeProvider)

Tehát, amint arról korábban tárgyaltunk, az AngularJS-ben található útvonalakat használjuk arra, hogy a felhasználót az alkalmazás másik nézetébe irányítsuk. És ez az útválasztás ugyanazon a HTML oldalon történik, hogy a felhasználó megtapasztalja, hogy nem hagyta el az oldalt.

Az útválasztás megvalósításához a következő fő lépéseket kell végrehajtani az alkalmazásban, bármilyen sorrendben.

1. Hivatkozás az angular-route.js fájlra. Ez a Google által kifejlesztett JavaScript fájl, amely az útválasztás minden funkciójával rendelkezik. Ezt az alkalmazásban kell elhelyeznie, hogy az az útválasztáshoz szükséges összes fő modulra hivatkozhasson.

2. A következő fontos lépés egy függőség hozzáadása az ngRoute modulhoz az alkalmazáson belül. Erre a függőségre azért van szükség, hogy az útválasztási funkciók felhasználhatók legyenek az alkalmazáson belül. Ha ez a függőség nem kerül hozzáadásra, akkor nem lehet használni az útválasztást az angular.JS alkalmazáson belül.

   Az alábbiakban ennek az állításnak az általános szintaxisa található. Ez csak egy modul normál deklarációja, az ngRoute kulcsszó beillesztésével.

var module = angular.module("sampleApp", ['ngRoute']);

3. A következő lépés a $ routeProvider konfigurálása lenne. Erre az alkalmazás különböző útvonalainak megadásához van szükség.

   Az alábbiakban ennek az állításnak az általános szintaxisa van, amely nagyon magától értetődő. Csak azt állítja, hogy a megfelelő útvonal kiválasztásakor használja az útvonalat az adott nézet megjelenítéséhez a felhasználó számára.

when(path, route)

4. Linkek az útvonalra a HTML oldalon. HTML-oldalán hivatkozási linkeket ad hozzá az alkalmazásban elérhető különféle útvonalakhoz.

 1. útvonal 

5. Végül az ng-view irányelv felvétele lenne, amely általában egy div tagben lenne. Ezt a nézet tartalmának injektálására használják, ha a megfelelő útvonalat választják.

Most nézzünk meg egy példát az útválasztásra a fent említett lépésekkel.

Példánkban

2 linket mutatunk be a felhasználónak,

• Az egyik az Angular JS tanfolyam témáinak megjelenítése , a másik pedig a Node.js tanfolyam.
• Amikor a felhasználó bármelyik linkre kattint, megjelenik az adott kurzus témája.

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 angular.JS weboldalról.

2. lépés: Adjon hozzá href címkéket, amelyek az "Angular JS Topics" és a "Node JS Topics" linkeket képviselik.

3. lépés: 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 "Szögletes JS témákra" vagy a "Csomópont JS témákra" kattint.

4. lépés: Az AngularJS parancsfájl címkéjében adja hozzá az "ngRoute modult" és a "$ routeProvider" szolgáltatást.

Kód Magyarázat:

1. Az első lépés az "ngRoute modul" beépítése. Ezzel a helyén az Angular automatikusan kezeli az útválasztást az alkalmazásban. A Google által kifejlesztett ngRoute modul minden olyan funkcióval rendelkezik, amely lehetővé teszi az útválasztást. A modul hozzáadásával az alkalmazás automatikusan megérti az összes útválasztási parancsot.
2. A $ routeprovider egy olyan szolgáltatás, amelyet szögletesen használnak a háttérben meghallgatott útvonalak meghallgatására. Tehát, amikor a felhasználó rákattint egy linkre, az útválasztó észleli ezt, majd eldönti, hogy melyik útvonalat választja.
3. Hozzon létre egy útvonalat a szögletes hivatkozáshoz - Ez a blokk azt jelenti, hogy amikor a Szögletes hivatkozásra kattint, fecskendezze be az Angular.html fájlt, és az üzleti logika feldolgozásához használja az „AngularController” vezérlőt is.
4. Hozzon létre egy útvonalat a Csomópont hivatkozáshoz - Ez a blokk azt jelenti, hogy amikor a Csomópont hivatkozásra kattint, adja be a Node.html fájlt, és az üzleti logika feldolgozásához használja a „NodeController” vezérlőt is.

5. lépés: Ezután vezérlőket kell hozzáadni az üzleti logika feldolgozásához mind az AngularController, mind a NodeController számára.

Mindegyik vezérlőben létrehozunk egy kulcs-érték pár tömböt az egyes tanfolyamok Témák nevének és leírásának tárolására. A 'tutorial' tömb változót hozzáadják az egyes vezérlők hatókörobjektumához.

Guru99 Global Event


Angular JS Topics
Node JS Topics

6. lépés: Hozzon létre Angular.html és Node.html nevű oldalakat. Minden oldalon elvégezzük az alábbi lépéseket.

Ezek a lépések biztosítják, hogy a tömb összes kulcsérték-párja megjelenjen minden oldalon.

1. Az ng-repeat direktíva használatával végigjárhatja az oktatói változóban definiált kulcs-érték párokat.
2. Az egyes kulcs-érték párok nevének és leírásának megjelenítése.

• Szögletes.html

Anguler

Course : {{ptutor.Name}} - {{ptutor.Description}}

• Node.html

Node

Course : {{ptutor.Name}} - {{ptutor.Description}}

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:

Ha az AngularJS Topics linkre kattint, az alábbi kimenet jelenik meg.

A kimenet világosan mutatja, hogy

• Amikor az "Angular JS Topics" linkre kattint, a routeProvider, amelyet a kódunkban deklaráltunk, úgy dönt, hogy az Angular.html kódot kell beadni.
• Ezt a kódot az "ng-view" irányelvet tartalmazó "div" tagbe kell beinjektálni. Ezenkívül a tanfolyam leírásának tartalma a "tutorial változóból" származik, amely az AngularController-ben definiált hatókörobjektum része volt.
• Amikor valaki rákattint a Node.js témákra, ugyanaz az eredmény fog bekövetkezni, és megjelenik a Node.js témák nézete.
• Vegye figyelembe azt is, hogy az oldal URL-je változatlan, csak a # címke utáni útvonal változik. És ez az egyoldalas alkalmazások fogalma. Az URL-ben található #hash címke elválasztó, amely elválasztja az útvonalat (amely esetünkben „szögletes”, ahogy a fenti képen látható) és a fő HTML oldalt (Minta.html).

Alapértelmezett útvonal létrehozása

Az AngularJS-ben történő útválasztás az alapértelmezett útvonal megadását is lehetővé teszi. Ezt az útvonalat választják, ha nincs egyezés a meglévő útvonalhoz.

Az alapértelmezett útvonal a következő feltétel hozzáadásával jön létre a $ routeProvider szolgáltatás definiálásakor.

Az alábbi szintaxis egyszerűen azt jelenti, hogy átirányítunk egy másik oldalra, ha a meglévő útvonalak bármelyike ​​nem egyezik.

otherwise ({redirectTo: 'page'});

Használjuk ugyanazt a fenti példát, és adjunk hozzá egy alapértelmezett útvonalat a $ routeProvider szolgáltatásunkhoz.

function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);

Kód Magyarázat:

1. Itt ugyanazt a kódot használjuk, mint fent, az egyetlen különbség az, hogy az egyébként utasítást és a "redirectTo" opciót használjuk annak megadásához, hogy mely nézetet kell betölteni, ha nincs megadva útvonal. Esetünkben azt akarjuk, hogy a '/ Szögletes' nézet megjelenjen.

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

• Jól látható, hogy az alapértelmezett nézet a szögletes JS nézet.
• Ez azért van, mert amikor az oldal betöltődik, a $ routeProvider függvény „egyébként” opciójára megy, és betölti az „/ szögletes” nézetet.

Paraméterek elérése az útvonalról

Az Angular funkcióval is rendelkezik, hogy paramétereket biztosítson az útválasztás során. A paraméterek hozzáadódnak az URL útvonalának végéhez, például: http: //guru99/index.html#/Angular/1 . Ebben a példában

1. , a http: //guru99/index.html a fő alkalmazás URL
2. A # szimbólum az elválasztó az alkalmazás fő URL-je és az útvonal között.
3. Szögletes az utunk
4. És végül '1' az a paraméter, amely hozzáadódik az útvonalunkhoz

A paraméterek URL-ben való megjelenésének szintaxisa az alábbiakban látható:

HTMLPage # / útvonal / paraméter

Itt észreveheti, hogy a paramétert az URL-ben szereplő útvonal után adják át.

Tehát a fenti, a szögletes JS témákra vonatkozó példánkban átadhatunk egy paramétert az alábbiak szerint

Minta.html # / Szögletes / 1

Minta.html # / Szögletes / 2

Minta.html # / Szögletes / 3

Itt az 1, 2 és 3 paraméterei valóban képviselhetik a topicidet.

Nézzük meg részletesen, hogyan tudjuk ezt megvalósítani.

1. lépés: Adja hozzá a következő kódot a nézetéhez

1. Tegyen fel egy táblázatot, amely megmutatja az Angular JS tanfolyam összes témáját a felhasználó számára

2. Adjon hozzá egy táblázatsort a "Vezérlők" témakör megjelenítéséhez. Ebben a sorban változtassa meg a href címkét "Szögletes / 1" értékre, ami azt jelenti, hogy amikor a felhasználó rákattint erre a témára, akkor az 1. paraméter az útvonal mellett meg lesz adva az URL-ben.

3. Adjon hozzá egy táblázatsort a "Modellek" témakör megjelenítéséhez. Ebben a sorban változtassa meg a href címkét "Szögletes / 2" értékre, ami azt jelenti, hogy amikor a felhasználó rákattint erre a témára, akkor a 2. paraméter az útvonal mellett meg lesz adva az URL-ben.

4. Adjon hozzá egy táblázatsort az "Irányelvek" témakör megjelenítéséhez. Ebben a sorban változtassa meg a href címkét "Szögletes / 3" értékre, ami azt jelenti, hogy amikor a felhasználó rákattint erre a témára, akkor a 3. paraméter az útvonal mellett meg lesz adva az URL-ben.

2. lépés: A routeprovider szolgáltatás függvényében adja hozzá a: topicId kifejezést annak jelzésére, hogy az URL-ben az útvonal után megadott bármely paramétert hozzá kell rendelni a topicId változóhoz.

3. lépés: Adja hozzá a szükséges kódot a vezérlőhöz

1. A vezérlő funkció definiálásakor először adja meg paraméterként a "$ routeParams" elemet. Ez a paraméter hozzáférhet az URL-ben megadott útvonal összes paraméteréhez.
2. Az "routeParams" paraméter hivatkozik a topicId objektumra, amelyet útvonali paraméterként továbbítanak. Itt a '$ routeParams.topicId' változót csatoljuk a hatókör-objektumunkhoz, mint '$ scope.tutotialid' változót. Ez azért történik, hogy nézetünkben hivatkozni lehessen a tutorialid változón keresztül.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

4. lépés: Adja hozzá a kifejezést a tutorialid változó megjelenítéséhez az Angular.html oldalon.

Anguler


{{tutorialid}}

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 kimeneti képernyőn

• Ha az első témához a Téma részletei linkre kattint, az 1-es szám az URL-hez kerül.
• Ezt a számot az "Angol.JS routeprovider" szolgáltatás "routeparam" argumentumnak tekinti, majd vezérlőnk hozzá férhet hozzá.

Az Angular $ route szolgáltatás használata

A $ route szolgáltatás lehetővé teszi az útvonal tulajdonságainak elérését. A $ route szolgáltatás paraméterként érhető el, ha a funkciót a vezérlő definiálja. Az alábbiakban látható az általános szintaxis arról, hogy a $ route paraméter hogyan érhető el a vezérlőtől;

myApp.controller('MyController',function($scope,$route)

1. A myApp az alkalmazásokhoz definiált angular.JS modul
2. A MyController az alkalmazáshoz definiált vezérlő neve
3. Csakúgy, mint a $ scope változó elérhetővé válik az alkalmazás számára, amelyet arra használnak, hogy információkat továbbítson a vezérlőtől a nézethez. A $ route paraméter az útvonal tulajdonságainak elérésére szolgál.

Nézzük meg, hogyan használhatjuk a $ route szolgáltatást.

Ebben a példában

• Létrehozunk egy egyszerű "mytext" nevű egyéni változót, amely tartalmazza a "This is Angular" karakterláncot.
• Ezt a változót az útvonalunkhoz fogjuk csatolni. Később ezt a karakterláncot fogjuk elérni a vezérlőnktől a $ route szolgáltatás segítségével, majd ezt követően felhasználjuk a hatókör objektumot, hogy ezt megjelenítsük nézetünkben.

Lássuk tehát azokat a lépéseket, amelyeket ennek elérése érdekében meg kell tennünk.

1. lépés: Adjon hozzá egy egyedi kulcs-érték párost az útvonalhoz. Itt hozzáadunk egy "mytext" nevű kulcsot, és hozzáadjuk a "This is Angular" értéket.

2. lépés: Adja hozzá a megfelelő kódot a vezérlőhöz

1. Adja hozzá a $ route paramétert a vezérlő funkcióhoz. A $ route paraméter egy szögben definiált kulcsparaméter, amely lehetővé teszi az útvonal tulajdonságainak elérését.
2. Az útvonalban definiált "mytext" változó a $ route.current hivatkozáson keresztül érhető el. Ezt követően hozzárendelik a hatókör objektum 'text' változójához. A szöveges változó ezután a nézetből ennek megfelelően érhető el.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

3. lépés: Adjon hozzá hivatkozást a hatókörobjektum szövegváltozójához kifejezésként. Ezt az alábbiak szerint hozzáadjuk az Angular.html oldalunkhoz.

Ennek hatására az "Ez szögletes" szöveg kerül beillesztésre a nézetbe. A {{tutorialid}} kifejezés megegyezik az előző témában láthatóval, és ez az '1' számot jeleníti meg.

Anguler


{{text}}

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

• Láthatjuk, hogy az "Ez szögletes" szöveg akkor is megjelenik, amikor a táblázat bármelyik linkjére kattintunk. A téma azonosítója a szöveggel egy időben jelenik meg.

HTML5-útválasztás engedélyezése

A HTML5 útválasztást alapvetően tiszta URL létrehozására használják. Ez a hashtag eltávolítását jelenti az URL-ből. Tehát az útválasztási URL-ek HTML5-útválasztás használata esetén az alábbiak szerint jelennek meg

Minta.html / Szögletes / 1

Minta.html / Szögletes / 2

Minta.html / Szögletes / 3

Ez a fogalom általában úgy ismert, hogy szép URL-t mutat be a felhasználó számára.

Két fő lépést kell végrehajtani a HTML5 útválasztáshoz.

1. A $ locationProvider konfigurálása
2. Bázisunk beállítása a relatív linkekre

Vizsgáljuk meg a fenti példánkban a fenti lépések végrehajtásának részleteit

1. lépés: Adja hozzá a megfelelő kódot a szögletes modulhoz

1. Adjon hozzá egy baseURL konstansot az alkalmazáshoz - Erre a HTML5-útválasztáshoz van szükség, hogy az alkalmazás tudja, mi az alkalmazás alaphelye.
2. Adja hozzá a $ locationProvider szolgáltatásokat. Ez a szolgáltatás lehetővé teszi a html5Mode meghatározását.
3. Állítsa a $ locationProvider szolgáltatás html5Mode értékét true értékre.

2. lépés: Távolítsa el az összes # címkét a linkekről („Szögletes / 1”, „Szögletes / 2”, „Szögletes / 3”), hogy könnyen olvasható URL-t hozzon létre.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

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

• Az alkalmazás elérésekor láthatja, hogy a # címke nincs meg.

Összegzés

• Az útválasztás arra szolgál, hogy különböző nézeteket mutasson a felhasználónak ugyanazon a weboldalon. Alapvetően ez a koncepció az egyoldalas alkalmazásokban, amelyeket szinte az összes modern webalkalmazás megvalósít
• Alapértelmezett útvonal állítható be az angular.JS útválasztáshoz. Meghatározzák, hogy mi lesz az alapértelmezett nézet, amelyet a felhasználónak meg kell mutatni
• A paraméterek átadhatók az útvonalnak az URL-en keresztül, mint útvonal-paraméterek. Ezeket a paramétereket ezután a vezérlő $ routeParams paraméterének használatával lehet elérni
• A $ route szolgáltatás felhasználható egyedi kulcs-érték párok definiálására az útvonalon, amelyekhez később hozzá lehet férni a nézeten belül
• A HTML5-útválasztással a #tag eltávolítható az útválasztási URL-ből szögletes formában, hogy szép URL-t alkosson