AngularJs útvonaltervezés paraméterekkel

Mielőtt megvizsgálnánk, hogyan működik az AngularJS-ben az útválasztás, érdemes megérteni, hogy milyen típusú alkalmazás-útválasztáshoz készült. Az alábbi szakasz ezt a kontextust határozza meg, és minden ezt követő technika erre épül.

Mik azok az egyoldalas alkalmazások?

Az egyoldalas alkalmazások, vagy SPA-k olyan webes alkalmazások, amelyek egyetlen HTML-oldalt töltenek be, majd dinamikusan frissítik azt, ahogy a felhasználó interakcióba lép vele. Ahelyett, hogy minden kattintásra friss dokumentumot kérnének a szervertől, az SPA csak az oldal megváltozott részét cseréli ki.

Ez a kialakítás egy problémát okoz. Ha a böngésző soha nem navigál új dokumentumhoz, a címsor soha nem változik, így a felhasználó nem tud könyvjelzővel megjelölni egy képernyőt, megosztani azt, vagy használni a vissza gombot. Az útvonalválasztás pontosan ezt a problémát oldja meg.

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ő alkalmazások létrehozását URLs a webes alkalmazások különböző tartalmaihoz. Az AngularJS útválasztás segít több tartalom megjelenítésében is attól függően, hogy melyik útvonalat választották. Ez a URL a # jel után.

Vegyünk egy példát egy olyan webhelyre, amelyet a következőn keresztül üzemeltetnek: URL http://example.com/index.html.

Ez az oldal az alkalmazás főképernyőjét tartalmazza. Tegyük fel, hogy az alkalmazás egy eseményt szervez, és a felhasználó listázni szeretné az eseményeket, részletesen megtekinteni vagy törölni szeretné azokat. Egy egyoldalas alkalmazásban, amelyen engedélyezve van az útvonalválasztás, mindez a következő linkeken keresztül érhető el.

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

• Az összes esemény megtekintéséhez a felhasználót a következőre irányítjuk át: http://example.com/index.html#ShowEvent
• Egy adott esemény megtekintéséhez a következőre irányítják őket: http://example.com/index.html#DisplayEvent
• Egy esemény törléséhez a következőre kell irányítani őket: http://example.com/index.html#DeleteEvent

Vegye figyelembe, hogy a fő URL ugyanaz marad. Csak a # utáni töredék változik, és az AngularJS ezt a töredéket figyeli. Miután a koncepció megvan, a következő szakasz azokat az alkatrészeket tárgyalja, amelyeket össze kell kötni, mielőtt bármi is működne.

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

Ahogy korábban tárgyaltuk, az útvonalak AngularJS a felhasználó alkalmazásod egy másik nézetére való átirányítására szolgálnak. Ez az átirányítás ugyanazon a HTML oldalon történik, így a felhasználó azt az élményt kapja, mintha nem hagyta volna el az oldalt.

Az útvonaltervezés megvalósításához a következő fő lépéseket kell megvalósítani az alkalmazásban tetszőleges sorrendben.

1. Hivatkozás az angular-route.js fájlra. JavaForgatókönyv fájl, fejlesztette: Google, tartalmazza az összes útválasztási funkciót, és bele kell foglalni, hogy az alkalmazás hivatkozni tudjon a modulok útválasztási igényeire.
2. Adj hozzá egy függőséget az ngRoute modulhoz az alkalmazásodból. E függőség nélkül az útvonalválasztás egyáltalán nem használható az AngularJS alkalmazásban.

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']);

3. Konfiguráld a $routeProvider paramétert. Ez biztosítja az alkalmazásodban található különböző útvonalakat, és a szintaxis egyszerűen azt mondja ki, hogy amikor a megfelelő útvonalat kiválasztod, az útvonalat használd az adott nézet megjelenítéséhez.

when(path, route)

4. 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/>

5. 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.

👍 Tipp: Mind az öt lépés kötelező. A hiányzó angular-route.js hivatkozás a leggyakoribb oka annak, hogy egy útvonal csendesen nem csinál semmit, mivel a $routeProvider nem létezik nélküle. A következő szakasz mind az ötöt egy működő példában mutatja be.

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,

• Az egyik link a témák megjelenítésére szolgál. AngularJS 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 ahhoz, hogy használni lehessen a több útvonal és nézet funkcióit. A fájl letölthető az AngularJS weboldaláró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.

Code Magyarázat:

1. Illeszd be az „ngRoute modult”. Ezzel az Angular automatikusan kezeli az útválasztást, és megérti az összes útválasztási parancsot.
2. A $routeProvider egy olyan szolgáltatás, amely a háttérben figyeli a meghívott útvonalakat. Amikor a felhasználó rákattint egy hivatkozásra, a szolgáltatás érzékeli ezt, és eldönti, melyik útvonalat válassza.
3. Hozz létre egy útvonalat az Angular linkhez: amikor rákattintasz, illeszd be az Angular.html fájlt, és használd az 'AngularController'-t az üzleti logikához.
4. Hozz létre egy útvonalat a Node hivatkozáshoz, amely befecskendezi a Node.html fájlt és ugyanígy használja a 'NodeController'-t.

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.

Minden vezérlőben kulcs-érték párokból álló tömböt hozunk létre, amelybe az egyes kurzusok témaköreinek neveit és leírásait tároljuk. A 'tutorial' tömbváltozót hozzáadjuk minden vezérlő hatókör objektumához.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
<ul>
<li><a href="#!/Angular">Angular JS Topics</a></li>
<li><a href="#!/Node">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"}
  ];
});

// NodeController follows the same shape with Node.js topics
sampleApp.controller('NodeController', function($scope) {
  $scope.tutorial = [{Name: "Promises", Description: "Power of Promises"}];
});
</script>
</body>
</html>

⚠️ Javítások alkalmazva. Az <title> címke belül ült <body>, chrset="UTF 8" hibásan volt elírva, a második link erre mutatott #Node.html a regisztrált útvonal helyett /Node, és a sablonútvonalak egy kezdő perjelet tartalmaztak, amely a domain gyökérből oldódott fel.

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.

1. az ng-repeat direktíva hogy végigmenjen a bemutató változóban definiált összes kulcs-érték páron.
2. Minden kulcs-érték pár nevének és leírásának megjelenítése.

• Szögletes.html

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

• Node.html — megegyezik a fenti listával, a címsort „Csomód”-ra változtatták. Mindkét sablon ugyanazt írja tutorial változó, amelyet minden vezérlő a saját hatóköréből biztosít.

⚠️ Javítás: Az eredeti Angular.html címsora így szólt: „Anguler”. A helyesírást fentebb javítottuk.

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

output:

Ha az AngularJS témák linkre kattintasz, 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.
• Azt is vedd figyelembe, hogy az oldal URL ugyanaz marad. Csak a # tag utáni útvonal változik, és ez az egyoldalas alkalmazások koncepciója. A #hash tag a URL egy elválasztójel az útvonal (ami esetünkben az 'Angular') és a fő HTML oldal (Sample.html) között.

A példa csak akkor működik, ha a felhasználó egy regisztrált útvonalnak megfelelő hivatkozásra kattint. A következő szakasz azt tárgyalja, hogy mi történjen, ha semmi sem egyezik.

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 átirányítunk egy másik oldalra, ha a meglévő útvonalak bármelyike ​​nem egyezik.

otherwise({
  redirectTo: 'page'
});

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

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

Code Magyarázat:

1. Itt ugyanazt a kódot használjuk, mint fent, azzal a különbséggel, hogy az otherwise utasítást és a „redirectTo” opciót használjuk annak megadására, hogy melyik nézetet kell betölteni, ha nincs megadva útvonal. Esetünkben az '/Angular' nézetet szeretnénk megjeleníteni.

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

output:

A kimenetből,

• Jól látható, hogy az alapértelmezett nézet az AngularJS 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.

Az alapértelmezett útvonal dönti el, hogy melyik nézet töltődik be. A következő szakasz azt tárgyalja, hogyan szolgálhat ki egyetlen útvonal több rekordot egy érték nézetben történő továbbításával. URL.

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

Az Angular emellett lehetővé teszi paraméterek átadását az útvonalválasztás során. A paraméterek az útvonal végéhez kerülnek hozzáadásra a URL, Például a http://guru99/index.html#/Angular/1. Ebben a szöges útválasztási példában

1. http://guru99/index.html a fő alkalmazásunk URL
2. A # szimbólum az elválasztó jel a fő alkalmazás és a URL és az útvonal
3. A szögletes a mi utunk
4. És végül az '1' az a paraméter, amelyet az útvonalunkhoz adunk

Az általános szintaxis az HTMLPage#/útvonal/paraméter, így a korábbi témák Sample.html#/Angular/1, #/Angular/2 és #/Angular/3 lesznek, ahol a számjegy a téma azonosítója.

Nézzük meg részletesen, hogyan tudunk paraméterrel megvalósítani egy Angular útvonalat.

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

1. Adj hozzá egy táblázatot, amely az Angular JS kurzus összes témáját megjeleníti a felhasználó számára.
2. Adjon hozzá egy táblázatsort a „Vezérlők” témakör megjelenítéséhez. Ehhez a sorhoz állítsa a href-et „#!/Angular/1”-re, így a témakörre kattintva az 1. paraméter átkerül a táblázatba. URL az útvonallal együtt.
3. Adj hozzá egy sort a „Modellek” témához, a href-et „#!/Angular/2”-re állítva, hogy a 2. paraméter a következőképpen haladjon: URL.
4. Adjon hozzá egy sort az „Irányelvek” témához, a href-et „#!/Angular/3”-ra állítva, hogy a 3-as paraméter a következőképpen haladjon: URL.

2. lépés) Témakör-azonosító hozzáadása a routeProvider szolgáltatásfüggvényben
A routeProvider szolgáltatásfüggvényben add hozzá a következőt: :topicId helyőrző, amely azt jelzi, hogy a URL miután az útvonalat a topicId változóhoz kell rendelni.

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

1. A vezérlőfüggvény definiálásakor először paraméterként add hozzá a „$routeParams” paramétert. Ez a paraméter hozzáférhet az összes átadott útvonalparaméterhez. URL.
2. A „$routeParams” paraméter tartalmazza az útvonalban átadott topicId-t. $routeParams.topicId a hatókörbe, mint $scope.tutorialid elérhetővé teszi a nézet számára tutorialid-ként.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
<tbody>
<tr><td>1</td><td>Controllers</td>
<td><a href="#!/Angular/1">Topic details</a></td></tr>
<!-- rows 2 and 3 repeat with /Angular/2 and /Angular/3 -->
</tbody>
</table>
<div ng-view></div>

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

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

sampleApp.controller('AngularController', ['$scope', '$routeParams',
function($scope, $routeParams) {
  $scope.tutorialid = $routeParams.topicId;
}]);
</script>
</body>
</html>

⚠️ Javítások alkalmazva. Az eredeti a betűt használta l a számjegy helyett 1 in href="#Angular/l", kihagyta a ng-view konténer, így a sablonnak nem volt hová renderelnie, és betöltődött angular-route.js előtt angular.min.js, ami modulhibát dob.

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

<h2>Angular</h2>

<br><br>{{tutorialid}}

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

output:

A kimeneti képernyőn

• Ha az első témakörhöz tartozó Téma részletei linkre kattint, az 1-es szám hozzáfűződik a bejegyzéshez. URL.
• Ez a szám „routeParams” argumentumként jelenik meg, és elérhetővé válik a vezérlőben.

Egy paraméter beolvasása egyszerű. A paraméter által azonosított rekord beolvasása a nézet megjelenése előtt a következő tulajdonság feladata.

Hogyan töltsünk be adatokat előre a resolve tulajdonsággal?

Az előző szakaszban szereplő vezérlő beolvassa a témakör azonosítóját, és azonnal megjeleníti azt. A valódi alkalmazásoknak először le kell kérniük a rekordot a szerverről, és ha a nézet a kérés visszatérése előtt megjelenik, a felhasználó egy üres sablont lát, amely egy pillanattal később kitöltődik. resolve A tulajdonság eltávolítja az üres tartalom felvillanását.

Minden kulcs egy resolve Az objektum egy függőség, amelyet az AngularJS előkészít az útvonal aktiválása előtt. Ha az érték egy ígéret, a router megvárja, amíg az lezajlik. Csak miután minden ígéret feloldódott, az AngularJS példányosítja a vezérlőt és rendereli a sablont, és a feloldott értékek név szerint befecskendeződnek a vezérlőbe, pontosan úgy, mint bármely más szolgáltatásnál.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController',
    resolve: {
      // The router waits for this promise before rendering
      topic: ['$http', '$route', function($http, $route) {
        var id = $route.current.params.topicId;
        return $http.get('/api/topics/' + id).then(function(response) {
          return response.data;
        });
      }]
    }
  });
}]);

// 'topic' is injected already resolved, so no loading state is needed
sampleApp.controller('AngularController', ['$scope', 'topic',
function($scope, topic) {
  $scope.topic = topic;
}]);

Két viselkedés számít itt. Az elutasított ígéret megszakítja az útvonalmódosítást, és a böngészőt az aktuális nézetben hagyja, így egy sikertelen kérés soha nem eredményez hibás oldalt. Mivel azonban az útválasztó blokkol, amíg az ígéret függőben van, egy lassú végpont miatt az alkalmazás lefagyottnak tűnik. resolve egy haladásjelzővel, amelyet a $routeChangeStart és a $routeChangeSuccess eseményeket.

⚠️ Figyelmeztetés: Soha ne helyezzen hitelesítési ellenőrzőket kizárólag a resolveEgy útvonal elutasítása elrejti a nézetet, de nem védi a mögötte lévő adatokat, és az API végpontnak továbbra is érvényesítenie kell a hozzáférést a szerveren.

Az adatok előzetes betöltésén túl egy útvonal statikus konfigurációs értékeket is hordozhat. A következőkben ismertetett szolgáltatás bemutatja, hogyan olvassa be ezeket a vezérlő.

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, amikor a függvény definiálva van a vezérlőben. Az alábbiakban látható a $route paraméter vezérlőből való elérhetővé tételének általános szintaxisa.

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

1. A myApp az alkalmazásodhoz definiált AngularJS modul.
2. A MyController az alkalmazáshoz definiált vezérlő neve.
3. Ahogy a $scope átadja az információkat a vezérlőtől a nézetnek, a $route elérhetővé teszi az aktuális útvonal tulajdonságait.

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 csatolni fogjuk az útvonalunkhoz. Later Ezt a karakterláncot a vezérlőnkből fogjuk elérni a $route szolgáltatással, majd a scope objektummal megjelenítjük a nézetünkben.

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 vonatkozó kódot a vezérlőhöz.

1. Adja hozzá a $route paramétert a vezérlőfüggvényhez. A $route paraméter egy Angularban 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. 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.

// Only the config and controller change; the page markup is unchanged
sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    mytext: "This is angular",   // custom key attached to the route
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams', '$route',
function($scope, $routeParams, $route) {
  $scope.tutorialid = $routeParams.topicId;
  $scope.text = $route.current.mytext;
}]);

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>Angular</h2>

<br><br>{{text}}
<br><br>{{tutorialid}}

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

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.

Minden URL Az eddig látható ábrán még mindig egy # szimbólum látható. Az utolsó konfigurációs lépésben eltávolítják.

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

A HTML5 útválasztás tiszta fájlok létrehozására szolgál URLs. Ez a hashtag eltávolítását jelenti a URLTehát az útvonalválasztás URLAz s, HTML5 útválasztás használata esetén, az alábbiak szerint jelenne meg.

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Ez a koncepció általában egy szép, URL a felhasználónak.

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

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

Nézzük meg részletesen, hogyan hajtsuk végre a fent említett lépéseket a példánkban.

Step 1) Adja hozzá a vonatkozó kódot az Angular modulhoz.

1. Hozzáadása <base> tag a dokumentum fejlécéhez. Ez a HTML5 útvonaltervezéshez szükséges, hogy az alkalmazás tudja, hol van az alkalmazás alap helye.
2. Adja hozzá a $locationProvider szolgáltatást. Ez a szolgáltatás lehetővé teszi a html5Mode definiálását.
3. Állítsa igazra a $locationProvider szolgáltatás html5Mode értékét.

Step 2) Távolítsd el az összes # címkét a linkekről ('Angular/1', 'Angular/2', 'Angular/3') a könnyen olvasható tartalom létrehozásához. URLs.

<!-- In the head: required by html5Mode so relative templates resolve -->
<base href="/">

<!-- In the body: the # is dropped from every link -->
<a href="Angular/1">Topic details</a>

<script>
sampleApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);
</script>

⚠️ Javítás: az eredeti kijelentette, hogy baseUrl állandóan egy helyi IDE útvonalra mutat, aminek nincs hatása a html5Mode-ra. Az AngularJS a ``bázis``-ból olvassa be az alap helyet. <base href> címke. Az eredeti is befecskendezett $locationProvider anélkül, hogy valaha is felhívtam volna html5Mode(true), így a hash-t soha nem távolították el.

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

output:

A kimenetből,

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

A fentiek mind az ngRoute-ot használják, az AngularJS csapata által szállított routert. Ez nem az egyetlen lehetőség, és az alábbi összehasonlítás elmagyarázza, hogy mikor a jobb választás az alternatíva.

ngRoute vs ui-router: Melyik routert válasszam?

Az ngRoute-ot az AngularJS csapata tartja karban, és egyezést mutat a következővel: URL közvetlenül egyetlen sablonhoz és vezérlőhöz. Az ui-router egy közösségi projekt, amelyet az ngRoute fő korlátjának kiküszöbölésére hoztak létre: az alkalmazásonkénti egyeztetés. voltak ahelyett, hogy a URL önmagában, ami lehetővé teszi, hogy egyetlen képernyőn több, egymástól függetlenül irányított régió is legyen.

Válassza az ngRoute-ot, amikor mindegyik URL egyetlen teljes oldalas nézetre képezi le, mivel nincs szükség extra függőségekre, és a teljes API egyetlen oldalon elfér. Válassza az ui-router lehetőséget, ha egy képernyő olyan paneleket tartalmaz, amelyek egymástól függetlenül navigálnak, vagy ha a gyermeknézeteknek újra kell használniuk a szülő által betöltött adatokat. A későbbi migráció lehetséges, de nem triviális, mivel az állapotnevek lecserélik a URL minták a sablonokban.

Gyakori AngularJS útválasztási hibák és javításuk

A legtöbb útválasztási hiba üres ng-nézetet eredményez, nem pedig konzolhibát, ami megnehezíti a diagnosztizálásukat, mint kellene. Az alábbi tünetek mindegyike megnevezi az okát és a megoldását.

• Ismeretlen szolgáltató: $routeProvider: Az angular-route.js soha nem lett betöltve, vagy az angular.min.js előtt lett betöltve. Először a központi könyvtárra hivatkozz.
• A nézet üres marad hiba nélkül: Egyetlen elem sem tartalmazza az ng-view direktívát, így a sablonnak nincs hová renderelnie.
• Első látogatáskor semmi sem töltődik be: Egyetlen útvonal sem egyezik az üres elérési úttal. Adjon hozzá egy egyébként blokkot egy redirectTo értékkel.
• A $routeParams üres: A mintából hiányzik a kettőspont helykitöltője. A következőnek kell lennie: '/Angular/:topicId'.
• 404-es hiba a html5Mode után: Konfigurálja a szervert úgy, hogy a nem egyező elérési utakat átírja az alapoldalra, és ellenőrizze, hogy megvan-e a base href tag.
• A vezérlő soha nem fut újra: csak a paraméter változott, így az AngularJS újrahasznosította a vezérlőpéldányt ahelyett, hogy újraépítette volna. Figyelje a $routeUpdate eseményt ahelyett, hogy a vezérlőfüggvény újbóli aktiválására hagyatkozna.

GYIK