AngularJS útválasztási példa paraméterekkel

Mielőtt megismernénk, hogyan működik az útválasztás az Angularban, lássunk egy gyors áttekintést az egyoldalas alkalmazásokról.

Mik azok az egyoldalas alkalmazások?

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

Mi az a Routing az AngularJS-ben?

Útválasztás AngularJS-ben egy olyan módszer, amely lehetővé teszi egyoldalas alkalmazások létrehozását. Lehetővé teszi különböző URL-ek létrehozását a webalkalmazások különböző tartalmaihoz. Az AngularJS útválasztás több tartalom megjelenítését is segíti a kiválasztott útvonaltól függően. Az URL-ben a # jel után van megadva.

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

Ezen az oldalon adná meg jelentkezése főoldalát. Tegyük fel, hogy az alkalmazás egy Eseményt szervez, és meg akarja nézni, hogy melyek a megjelenített különféle események, vagy egy adott esemény részleteit szeretné látni, vagy törölni akar egy eseményt. Egyoldalas alkalmazásban, ha az útválasztás engedélyezve van, mindezek a funkciók elérhetők lesznek a következő hivatkozásokon keresztül

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 használjuk (ShowEvent, DisplayEvent és DeleteEvent).

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

Vegye figyelembe, hogy a fő URL változatlan marad.

AngularJS Route hozzáadása a $routeProvider használatával

Tehát amint azt korábban megbeszéltük, az útvonalak AngularJS arra szolgálnak, hogy a felhasználót az alkalmazás egy másik nézetébe irányítsák. És ez az útválasztás ugyanazon a HTML oldalon történik, hogy a felhasználónak legyen olyan élménye, 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, tetszőleges sorrendben.

Hivatkozás az angular-route.js fájlra. Ez egy JavaForgatókönyv a Google által kifejlesztett fájl, amely rendelkezik az útválasztás összes funkciójával. Ezt el kell helyezni az alkalmazásban, hogy hivatkozni tudjon az útválasztáshoz szükséges összes fő modulra.
A következő fontos lépés az ngRoute modul függőségének hozzáadása az alkalmazáson belül. Ez a függőség szükséges ahhoz, hogy az útválasztási funkciókat az alkalmazáson belül lehessen használni. Ha ezt a függőséget nem adjuk hozzá, akkor az angular.JS alkalmazáson belüli útválasztás nem használható.

Az alábbiakban ennek az állításnak az általános szintaxisa látható. Ez csak egy normál deklaráció egy modulnak az ngRoute kulcsszó belefoglalásával.

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

A következő lépés a $routeProvider konfigurálása. Ez szükséges a különféle útvonalak megadásához az alkalmazásban. Az alábbiakban az utasítás általános szintaxisa látható, amely nagyon magától értetődő. Csak azt írja ki, 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)

Az útvonalra mutató hivatkozások a HTML-oldalon belül. A HTML-oldalán hivatkozásokat ad hozzá az alkalmazásban elérhető különböző útvonalakhoz.

<a href="#/route1">Route 1</a><br/>

Végül bekerülne a ng-view direktíva, ami általában egy div címkében lenne. Ezt használnák a nézet tartalmának beillesztésére a megfelelő útvonal kiválasztásakor.

AngularJS útvonalválasztási példa

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

A paraméterekkel ellátott AngularJS útválasztási példánkban,

2 linket mutatunk be a felhasználónak,

Az egyik a témakörök megjelenítése egy Szög JS persze, a másik pedig a node.js Persze.
Amikor a felhasználó bármelyik linkre kattint, megjelennek az adott kurzus témái.

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 angular.JS webhelyről.

Step 2) Adjon hozzá href címkéket, amelyek az „Angular JS Topics” és a „Node JS Topics” hivatkozásokat képviselik.

Step 3) 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 „Angular JS Topics” vagy a „Node JS Topics” elemre kattint.

Step 4) Az AngularJS szkriptcímkéjéhez adja hozzá az „ngRoute module” és a „$routeProvider” szolgáltatást.

Kód magyarázata:

Az első lépés az „ngRoute modul” beépítése. Ha ez a helyén van, az Angular automatikusan kezeli az útválasztást az alkalmazásban. A Google által kifejlesztett ngRoute modul rendelkezik minden olyan funkcióval, 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.
A $routeprovider egy olyan szolgáltatás, amelyet az Angular arra használ, hogy a háttérben figyelje a hívott útvonalakat. Tehát amikor a felhasználó rákattint egy linkre, az AngularJS útvonalszolgáltatója észleli ezt, majd eldönti, melyik útvonalat választja.
Hozzon létre egy útvonalat az Angular linkhez – Ez a blokk azt jelenti, hogy amikor az Angular linkre kattintanak, illessze be az Angular.html fájlt, és használja az „AngularController” vezérlőt bármilyen üzleti logika feldolgozásához.
Hozzon létre egy útvonalat a csomópont hivatkozáshoz – Ez a blokk azt jelenti, hogy amikor a csomópont hivatkozásra kattint, beilleszti a Node.html fájlt, és használja a „NodeController” vezérlőt bármilyen üzleti logika feldolgozásához.

Step 5) A következő lépés vezérlők hozzáadása az AngularController és a NodeController üzleti logikájának feldolgozásához.

Mindegyik vezérlőben kulcs-érték párokat hozunk létre, hogy tároljuk az egyes kurzusokhoz tartozó témaneveket és leírásokat. A „tutorial” tömbváltozó hozzáadódik minden vezérlő hatókör objektumához.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
</head>
<body ng-app="sampleApp">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#Angular">Angular JS Topics</a></li>
        <li><a href="#Node.html">Node JS Topics</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.config(['$routeProvider',

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

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]
    });

    sampleApp.controller('NodeController',function($scope){

        $scope.tutorial = [
            {Name:"Promises",Description :"Power of Promises"},
            {Name:"Event",Description :"Event of Node.js"},
            {Name:"Modules",Description :"Modules in Node.js"}
            ]
    });

</script>
</body>
</html>

Step 6) Hozzon létre Angular.html és Node.html nevű oldalakat. Minden oldal esetében az alábbi lépéseket hajtjuk végre.

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

Az ng-repeat direktíva használata az oktatói változóban meghatározott minden kulcs-érték páron keresztül.
Minden kulcs-érték pár nevének és leírásának megjelenítése.

Szögletes.html

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

Node.html

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

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

A kimenet egyértelműen mutatja, hogy

Amikor az „Angular JS Topics” hivatkozásra kattint, a kódunkban deklarált routeProvider úgy dönt, hogy az Angular.html kódot kell beadni.
Ezt a kódot a „div” címkébe kell beilleszteni, amely tartalmazza az ng-view direktívát. Ezenkívül a kurzusleírás tartalma az „oktatóváltozóból” származik, amely az AngularControllerben meghatározott hatókör objektum része volt.
Amikor az ember rákattint a node.js Témák, ugyanaz az eredmény fog megtörténni, és a Node.js témakörök nézete megjelenik.
Figyelje meg azt is, hogy az oldal URL-je változatlan marad, csak a # címke utáni útvonal változik. És ez az egyoldalas alkalmazások koncepciója. Az URL-ben található #hash címke egy elválasztó, amely elválasztja az útvonalat (amely esetünkben a fenti képen látható "szögletes") és a fő HTML-oldalt (Sample.html)

Alapértelmezett útvonal létrehozása az AngularJS-ben

Az AngularJS-ben az útválasztás az alapértelmezett útvonal beállítását is lehetővé teszi. Ez az az útvonal, amely akkor kerül kiválasztásra, ha nincs megfelelő 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 meghatározásakor.

Az alábbi szintaxis egyszerűen azt jelenti, hogy át kell irányítani egy másik oldalra, ha a meglévő útvonalak valamelyike nem egyezik.

otherwise ({
    redirectTo: 'page'
});

Használjuk 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ázata:

Itt ugyanazt a kódot használjuk, mint fent, azzal a különbséggel, hogy az egyébként utasítást és a „redirectTo” opciót használjuk annak meghatározására, hogy melyik nézetet kell betölteni, ha nincs megadva útvonal. Esetünkben azt szeretnénk, hogy a '/szögletes' nézet jelenjen meg.

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,

Jól látható, hogy az alapértelmezett nézet a szögletes JS nézet.
Ennek az az oka, hogy az oldal betöltésekor a $routeProvider függvény 'egyébként' opciójára lép, és betölti a '/Angular' nézetet.

Paraméterek elérése az AngularJS útvonalból

Az Angular azt a funkciót is biztosítja, hogy paramétereket biztosítson az útválasztás során. A paraméterek az útvonal végére kerülnek az URL-ben, például http://guru99/index.html#/Angular/1. Ebben a szöges útválasztási példában

, http://guru99/index.html a fő alkalmazásunk URL-je
A # szimbólum az alkalmazás fő URL-címe és az útvonal közötti elválasztó.
A szögletes a mi utunk
És végül az '1' az a paraméter, amelyet az útvonalunkhoz adunk

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

HTMLPage#/útvonal/paraméter

Itt észreveszi, hogy a paraméter az útvonal után kerül átadásra az URL-ben.

Tehát a fenti AngularJS útvonalak példájában az Angular JS témakörökhöz átadhatunk egy paramétert az alábbiak szerint

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

Itt az 1-es, 2-es és 3-as paraméterek tulajdonképpen a topicid-t jelenthetik.

Nézzük meg részletesen, hogyan valósíthatjuk meg az Angular route paramétert:

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

Adjon hozzá egy táblázatot, amely az Angular JS tanfolyam összes témáját megjeleníti a felhasználó számára
Adjon hozzá egy táblázatsort a „Controllers” témakör megjelenítéséhez. Ebben a sorban módosítsa a href címkét „Szög/1”-re, ami azt jelenti, hogy amikor a felhasználó erre a témára kattint, az 1-es paraméter átadásra kerül az URL-ben az útvonallal együtt.
Adjon hozzá egy táblázatsort a „Modellek” témakör megjelenítéséhez. Ebben a sorban módosítsa a href címkét „Szög/2”-re, ami azt jelenti, hogy amikor a felhasználó erre a témára kattint, a 2-es paraméter átadásra kerül az URL-ben az útvonallal együtt.
Adjon hozzá egy táblázatsort az „Irányelvek” témakör megjelenítéséhez. Ebben a sorban módosítsa a href címkét „Szög/3”-ra, ami azt jelenti, hogy amikor a felhasználó erre a témára kattint, a 3-as paraméter átadásra kerül az URL-ben az útvonallal együtt.

2. lépés) Adja hozzá a témaazonosítót a Routeprovider szolgáltatás funkcióhoz
A routeprovider service függvényben adja hozzá a:topicId értéket annak jelzésére, hogy az útvonal után az URL-ben átadott bármely paramétert a topicId változóhoz kell rendelni.

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

Győződjön meg arról, hogy először a „$routeParams” paramétert adja hozzá a vezérlő funkciójának meghatározásakor. Ez a paraméter hozzáfér az URL-ben átadott összes útvonalparaméterhez.
A „routeParams” paraméter hivatkozik a topicId objektumra, amely útvonalparaméterként kerül átadásra. Itt csatoljuk a '$routeParams.topicId' változót a hatókör objektumunkhoz '$scope.tutitalid' változóként. Ez azért történik, hogy nézetünk szerint hivatkozni lehessen rá a tutorialid változón keresztül.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

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

<h2>Anguler</h2>

<br><br>{{tutorialid}}

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

A kimeneti képernyőn

Ha az első témakörnél a Téma részletei hivatkozásra kattint, az 1-es szám hozzá lesz fűzve az URL-hez.
Ezt a számot az Angular.JS útvonalszolgáltató szolgáltatás „routeparam” argumentumként veszi fel, majd a vezérlőnk elérheti.

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 akkor érhető el paraméterként, ha a funkció definiálva van a vezérlőben. Az alábbiakban látható annak általános szintaxisa, hogy a $route paraméter hogyan érhető el a vezérlőtől;

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

A myApp az alkalmazásaihoz definiált angular.JS modul
A MyController az alkalmazáshoz meghatározott vezérlő neve
Csakúgy, mint a $scope változó elérhetővé válik az alkalmazás számára, amely arra szolgál, hogy információkat továbbítson a vezérlőtől a nézetbe. 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étre fogunk hozni egy egyszerű egyéni változót „mytext” néven, amely tartalmazza a „This is angular” karakterláncot.
Ezt a változót csatoljuk az útvonalunkhoz. Később pedig elérjük ezt a karakterláncot a vezérlőnkről a $route szolgáltatás segítségével, majd ezt követően a hatókör objektumot használjuk, hogy ezt a nézetünkben megjelenítsük.

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

Step 1) Adjon hozzá egyéni kulcs-érték párt az útvonalhoz. Itt hozzáadunk egy „mytext” nevű kulcsot, és hozzárendeljük a „Ez szögletes” értéket.

Step 2) Adja hozzá a megfelelő kódot a vezérlőhöz

Adja hozzá a $route paramétert a vezérlő függvényhez. A $route paraméter az angular-ban definiált kulcsparaméter, amely lehetővé teszi az útvonal tulajdonságainak elérését.
Az útvonalban definiált „mytext” változó a $route.current hivatkozáson keresztül érhető el. Ez azután hozzá van rendelve a hatókör objektum "text" változójához. A szöveges változó ezután ennek megfelelően elérhető a nézetből.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                mytext:"This is angular",
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        }]);

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId;
        $scope.text=$route.current.mytext;

    });
</script>
</body>
</html>

Step 3) Adjon hozzá egy hivatkozást a szövegváltozóra a hatókör objektumból kifejezésként. Ez felkerül az Angular.html oldalunkra az alábbiak szerint.

Ennek hatására a „Ez szögletes” szöveg kerül a nézetbe. Az {{oktatóanyag}} kifejezés megegyezik az előző témakörben látottal, és ez az '1' számot fogja megjeleníteni.

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

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,

Láthatjuk, hogy az „Ez szögletes” szöveg is megjelenik, ha a táblázatban található hivatkozások bármelyikére kattintunk. A téma azonosítója is megjelenik a szöveggel egy időben.

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. Így az útválasztási URL-ek HTML5-útválasztás használatakor az alábbiak szerint jelennek meg

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Ezt a koncepciót általában szép URL-ként ismerik a felhasználó számára.

A HTML2-útválasztáshoz 5 fő lépést kell végrehajtani.

$locationProvider konfigurálása
A relatív hivatkozások bázisának beállítása

Nézzük meg a fenti példánkban a fent említett lépések végrehajtásának részleteit

Step 1) Adja hozzá a megfelelő kódot a szögmodulhoz

Adjon hozzá egy baseURL-állandót az alkalmazáshoz – Ez szükséges a HTML5-útválasztáshoz, hogy az alkalmazás tudja, mi az alkalmazás alaphelye.
Adja hozzá a $locationProvider szolgáltatásokat. Ez a szolgáltatás lehetővé teszi a html5Mode meghatározását.
Állítsa igazra a $locationProvider szolgáltatás html5Mode értékét.

Step 2) Távolítsa el az összes #címkét a linkeknél ('Szög/1', 'Szög/2', 'Szög/3'), hogy könnyen olvasható URL-t hozzon létre.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.constant("baseUrl","http://localhost:63342/untitled/Sample.html/Angular");

    sampleApp.config(
        function($routeProvider,$locationProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

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,

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

Összegzésként

Az útválasztás arra szolgál, hogy ugyanazon a weboldalon különböző nézeteket mutasson be a felhasználónak. Alapvetően ezt a koncepciót használják az egyoldalas alkalmazásokban, amelyeket szinte minden modern webalkalmazáshoz implementálnak
A szögletes.JS-útválasztáshoz alapértelmezett útvonal is beállítható. Arra szolgál, hogy meghatározza, mi legyen a felhasználó számára megjelenítendő alapértelmezett nézet
A paraméterek átadhatók az útvonalnak az URL-en keresztül útvonalparaméterként. Ezek a paraméterek ezután a vezérlő $routeParams paraméterével érhetők el
A $route szolgáltatás használható egyéni kulcs-érték párok meghatározására az útvonalon, amelyek ezután a nézetből elérhetők
A HTML5-útválasztás a #tag eltávolítására szolgál az útválasztási URL-ből szögletesen, hogy szép URL-t képezzen

Talán tetszene:

Mik azok az egyoldalas alkalmazások?

Mi az a Routing az AngularJS-ben?

AngularJS Route hozzáadása a $routeProvider használatával

KAPCSOLÓDÓ CIKKEK

AngularJS útvonalválasztási példa

Alapértelmezett útvonal létrehozása az AngularJS-ben

Paraméterek elérése az AngularJS útvonalból

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

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

Összegzésként