AngularJS Routingvoorbeeld met parameters

Voordat we leren hoe routering werkt in Angular, geven we eerst een kort overzicht van Single-Page-applicaties.

Wat zijn Single Page-applicaties?

Single-page-applicaties of (SPA's) zijn webapplicaties die een enkele HTML-pagina laden en de pagina dynamisch bijwerken op basis van de gebruikersinteractie met de webapplicatie.

Wat is routering in AngularJS?

Routing in AngularJS is een methode waarmee u Single Page Applications kunt maken. Hiermee kunt u verschillende URL's maken voor verschillende inhoud in uw webapplicaties. AngularJS-routering helpt ook om meerdere inhoud weer te geven, afhankelijk van welke route is gekozen. Het wordt gespecificeerd in de URL na het #-teken.

Laten we een voorbeeld nemen van een site die wordt gehost via de URL http://example.com/index.html.

Op deze pagina host u de hoofdpagina van uw toepassing. Stel dat de applicatie een evenement organiseert en je wilt zien wat de verschillende evenementen zijn die worden weergegeven, of je wilt de details van een bepaalde gebeurtenis of verwijder een gebeurtenis. In een Single Page-toepassing zou, wanneer routing is ingeschakeld, al deze functionaliteit beschikbaar zijn via de following links

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

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

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

Het #-symbool zou samen met de verschillende routes (ShowEvent, DisplayEvent en DeleteEvent) worden gebruikt.

  • Dus als de gebruiker alle gebeurtenissen zou willen zien, zou hij of zij naar de link (http://example.com/index.html#ShowEvent), anders
  • Als ze alleen een bepaalde gebeurtenis wilden zien, werden ze doorverwezen naar de link ( http://example.com/index.html#DisplayEvent) Of
  • Als ze een evenement wilden verwijderen, werden ze naar de link geleid http://example.com/index.html#DeleteEvent.

Houd er rekening mee dat de hoofd-URL hetzelfde blijft.

AngularJS-route toevoegen met $routeProvider

Dus zoals we eerder hebben besproken, routes naar binnen angularjs worden gebruikt om de gebruiker naar een andere weergave van uw applicatie te leiden. En deze routing gebeurt op dezelfde HTML-pagina zodat de gebruiker de ervaring heeft dat hij de pagina niet heeft verlaten.

Om routing te implementeren, moet het following De belangrijkste stappen moeten in een specifieke volgorde in uw toepassing worden geïmplementeerd.

  1. Verwijzing naar angular-route.js. Dit is een JavaScript bestand ontwikkeld door Google dat alle functionaliteit van routing heeft. Dit moet in uw toepassing worden geplaatst, zodat deze kan verwijzen naar alle hoofdmodules die nodig zijn voor routering.
  2. De volgende belangrijke stap is het toevoegen van een afhankelijkheid aan de ngRoute-module vanuit uw toepassing. Deze afhankelijkheid is vereist zodat de routeringsfunctionaliteit binnen de applicatie kan worden gebruikt. Als deze afhankelijkheid niet wordt toegevoegd, kan er geen gebruik worden gemaakt van routing binnen de angular.JS-applicatie.

Hieronder vindt u de algemene syntaxis van deze verklaring. Dit is slechts een normale declaratie van een module met de toevoeging van het trefwoord ngRoute.

var module = angular.module("sampleApp", ['ngRoute']);
  1. De volgende stap zou zijn om uw $routeProvider te configureren. Dit is vereist voor het aanbieden van de verschillende routes in uw applicatie. Hieronder vindt u de algemene syntaxis van deze verklaring, die zeer voor zichzelf spreekt. Er staat alleen dat wanneer het relevante pad is gekozen, de route moet worden gebruikt om het gegeven zicht aan de gebruiker weer te geven.
when(path, route)
  1. Links naar uw route vanuit uw HTML-pagina. Op uw HTML-pagina voegt u referentielinks toe naar de verschillende beschikbare routes in uw applicatie.
<a href="#/route1">Route 1</a><br/>
  1. Tenslotte zou de opname van de ng-view-richtlijn, die normaal gesproken in een div-tag zou staan. Dit zou worden gebruikt om de inhoud van de weergave te injecteren wanneer de relevante route wordt gekozen.

AngularJS-routeringsvoorbeeld

Laten we nu eens kijken naar een voorbeeld van routering met behulp van de bovengenoemde stappen.

In ons AngularJS-routeringsvoorbeeld met parameters:

We zullen 2 links aan de gebruiker presenteren,

  • Eén daarvan is het weergeven van de onderwerpen voor een Hoekige JS natuurlijk, en de andere is voor de Node.js Natuurlijk.
  • Wanneer de gebruiker op een van beide koppelingen klikt, worden de onderwerpen voor die cursus weergegeven.

Stap 1) Voeg het angular-route-bestand toe als scriptreferentie.

AngularJS-routering

Dit routebestand is nodig om gebruik te kunnen maken van de functionaliteiten van het hebben van meerdere routes en weergaven. Dit bestand kan worden gedownload van de website angular.JS.

Stap 2) Voeg href-tags toe die links vertegenwoordigen naar “Angular JS Topics” en “Node JS Topics.”

AngularJS-routering

Stap 3) Voeg een div-tag toe met de ng-view-richtlijn die de weergave vertegenwoordigt.

Hierdoor kan de overeenkomstige weergave worden geïnjecteerd wanneer de gebruiker op de “Angular JS Topics” of “Node JS Topics” klikt.

AngularJS-routering

Stap 4) Voeg in uw scripttag voor AngularJS de “ngRoute-module” en de service “$routeProvider” toe.

AngularJS-routering

Code Verklaring:

  1. De eerste stap is ervoor te zorgen dat de “ngRoute-module” wordt opgenomen. Als dit is ingevoerd, handelt Angular automatisch de routing in uw toepassing af. De door Google ontwikkelde ngRoute module heeft alle functionaliteit die routering mogelijk maakt. Door deze module toe te voegen, begrijpt de applicatie automatisch alle routeringsopdrachten.
  2. De $routeprovider is een dienst waarmee angular op de achtergrond luistert naar de routes die worden aangeroepen. Dus wanneer de gebruiker op een link klikt, zal de routeprovider in AngularJS dit detecteren en vervolgens beslissen welke route hij moet nemen.
  3. Creëer één route voor de Angular-link – Dit blok betekent dat wanneer op de Angular-link wordt geklikt, het bestand Angular.html wordt geïnjecteerd en ook de Controller 'AngularController' wordt gebruikt om eventuele bedrijfslogica te verwerken.
  4. Creëer één route voor de Node-link – Dit blok betekent dat wanneer op de Node-link wordt geklikt, het bestand Node.html wordt geïnjecteerd en ook de Controller 'NodeController' wordt gebruikt om eventuele bedrijfslogica te verwerken.

Stap 5) Vervolgens moeten controllers worden toegevoegd om de bedrijfslogica voor zowel de AngularController als de NodeController te verwerken.

In elke controller maken we een reeks sleutel-waardeparen om de onderwerpnamen en -beschrijvingen voor elke cursus op te slaan. De arrayvariabele 'tutorial' wordt voor elke controller aan het scope-object toegevoegd.

AngularJS-routering

<!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>

Stap 6) Maak pagina's met de naam Angular.html en Node.html. Voor elke pagina voeren we de onderstaande stappen uit.

Deze stappen zorgen ervoor dat alle sleutel-waardeparen van de array op elke pagina worden weergegeven.

  1. Gebruik de ng-repeat-instructie om elk sleutel-waardepaar te doorlopen dat is gedefinieerd in de tutorialvariabele.
  2. Weergave van de naam en beschrijving van elk sleutel-waardepaar.
  • Hoekig.html

AngularJS-routering

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

AngularJS-routering

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

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

AngularJS-routering

Als u op de AngularJS Topics-link klikt, wordt de onderstaande uitvoer weergegeven.

AngularJS-routering

De output laat duidelijk zien dat,

  • Wanneer op de link “Angular JS Topics” wordt geklikt, besluit de routeProvider die we in onze code hebben aangegeven dat de Angular.html-code moet worden geïnjecteerd.
  • Deze code wordt in de tag "div" geïnjecteerd, die de ng-view-richtlijn bevat. Bovendien is de inhoud van de cursusbeschrijving afkomstig van de “tutorialvariabele” die deel uitmaakte van het scope-object dat in de AngularController was gedefinieerd.
  • Wanneer men op de Node.js Onderwerpen, hetzelfde resultaat zal plaatsvinden en de weergave voor Node.js-onderwerpen zal zich manifesteren.
  • Merk ook op dat de pagina-URL hetzelfde blijft; alleen de route na de #-tag verandert. En dit is het concept van applicaties met één pagina. De #hash-tag in de URL is een scheidingsteken dat de route scheidt (die in ons geval 'Angular' is, zoals weergegeven in de bovenstaande afbeelding) en de hoofd-HTML-pagina (Sample.html)

AngularJS-routering

Een standaardroute maken in AngularJS

Routing in AngularJS biedt ook de mogelijkheid om een ​​standaardroute te hebben. Dit is de route die wordt gekozen als er geen match is met de bestaande route.

De standaardroute wordt gemaakt door het toevoegen van de following voorwaarde bij het definiëren van de service $routeProvider.

De onderstaande syntaxis betekent eenvoudigweg het omleiden naar een andere pagina als een van de bestaande routes niet overeenkomt.

otherwise ({
    redirectTo: 'page'
});

Laten we hetzelfde voorbeeld hierboven gebruiken en een standaardroute toevoegen aan onze $routeProvider-service.

Een standaardroute maken in AngularJS

function($routeProvider){
$routeProvider.

when('/Angular',{
templateUrl : 'Angular.html',
controller: 'AngularController'
}).

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

Code Verklaring:

  1. Hier gebruiken we dezelfde code als hierboven, met het enige verschil dat we de andere gebruikenwise -instructie en de optie "redirectTo" om op te geven welke weergave moet worden geladen als er geen route is opgegeven. In ons geval willen we dat de weergave '/Angular' wordt weergegeven.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Een standaardroute maken in AngularJS

Van de uitvoer,

  • Je kunt duidelijk zien dat de standaardweergave de hoekige JS-weergave is.
  • Dit komt omdat wanneer de pagina wordt geladen, deze naar de 'andere' gaatwise' optie in de functie $routeProvider en laadt de weergave '/Angular'.

Toegang krijgen tot parameters via de AngularJS-route

Angular biedt ook de functionaliteit om parameters te verstrekken tijdens het routeren. De parameters worden aan het einde van de route in de URL toegevoegd, bijvoorbeeld http://guru99/index.html#/Angular/1. In dit voorbeeld van hoekroutering

  1. , http://guru99/index.html is onze hoofdapplicatie-URL
  2. Het #-symbool is het scheidingsteken tussen de URL van de hoofdtoepassing en de route.
  3. Hoekig is onze route
  4. En tenslotte is '1' de parameter die aan onze route wordt toegevoegd

De syntaxis van hoe parameters er in de URL uitzien, wordt hieronder weergegeven:

HTMLPagina#/route/parameter

Hier zult u merken dat de parameter na de route in de URL wordt doorgegeven.

Dus in ons voorbeeld van AngularJS-routes hierboven voor de Angular JS-onderwerpen kunnen we parameters doorgeven zoals hieronder weergegeven

Voorbeeld.html#/Angular/1

Voorbeeld.html#/Angular/2

Voorbeeld.html#/Angular/3

Hier kunnen de parameters 1, 2 en 3 feitelijk de topicid vertegenwoordigen.

Laten we in detail bekijken hoe we de Angular-route met parameter kunnen implementeren:

Stap 1) Voeg het volgende toewing code voor uw weergave

  1. Voeg een tabel toe om alle onderwerpen voor de Angular JS-cursus aan de gebruiker te tonen
  2. Voeg een tabelrij toe voor showing het onderwerp ‘Controllers’. Voor deze rij wijzigt u de href-tag in “Angular/1”, wat betekent dat wanneer de gebruiker op dit onderwerp klikt, parameter 1 samen met de route in de URL wordt doorgegeven.
  3. Voeg een tabelrij toe voor showing het onderwerp ‘Modellen’. Voor deze rij wijzigt u de href-tag in “Angular/2”, wat betekent dat wanneer de gebruiker op dit onderwerp klikt, parameter 2 samen met de route in de URL wordt doorgegeven.
  4. Voeg een tabelrij toe voor showing het onderwerp ‘Richtlijnen’. Voor deze rij wijzigt u de href-tag in “Angular/3”, wat betekent dat wanneer de gebruiker op dit onderwerp klikt, parameter 3 samen met de route in de URL wordt doorgegeven.

Toegang tot parameters via de AngularJS-route

Stap 2) Voeg onderwerp-ID toe in de Routeprovider-servicefunctie
Voeg in de servicefunctie routeprovider de:topicId toe om aan te geven dat elke parameter die na de route in de URL wordt doorgegeven, moet worden toegewezen aan de variabele topicId.

Toegang tot parameters via de AngularJS-route

Stap 3) Voeg de benodigde code toe aan de controller

  1. Zorg ervoor dat u eerst “$routeParams” als parameter toevoegt bij het definiëren van de controllerfunctie. Deze parameter heeft toegang tot alle routeparameters die in de URL worden doorgegeven.
  2. De parameter “routeParams” heeft een verwijzing naar het topicId-object, dat wordt doorgegeven als een routeparameter. Hier koppelen we de variabele '$routeParams.topicId' aan ons scope-object als de variabele '$scope.tutotialid'. Dit wordt gedaan zodat er in onze weergave naar kan worden verwezen via de tutorialid-variabele.

Toegang tot parameters via de AngularJS-route

<!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>

Stap 4) Voeg de expressie toe om de variabele weer te geven
Voeg de expressie toe om de tutorialid-variabele op de Angular.html-pagina weer te geven.

Toegang tot parameters via de AngularJS-route

<h2>Anguler</h2>

<br><br>{{tutorialid}}

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Toegang tot parameters via de AngularJS-route

In het uitvoerscherm,

  • Als u op het onderwerp Details link voor het eerste onderwerp, wordt het getal 1 toegevoegd aan de URL.
  • Dit nummer wordt vervolgens door de Angular.JS routeprovider-service als een “routeparam”-argument gebruikt en is vervolgens toegankelijk voor onze controller.

Hoe u de Angular $route-service gebruikt

Met de service $route heeft u toegang tot de eigenschappen van de route. De service $route is beschikbaar als parameter wanneer de functie in de controller is gedefinieerd. De algemene syntaxis van hoe de parameter $route beschikbaar is via de controller wordt hieronder weergegeven;

myApp.controller('MyController',function($scope,$route)
  1. myApp is de angular.JS-module die voor uw toepassingen is gedefinieerd
  2. MyController is de naam van de controller die voor uw toepassing is gedefinieerd
  3. Net zoals de variabele $scope beschikbaar wordt gesteld voor uw applicatie, die wordt gebruikt om informatie van de controller naar de weergave door te geven. De parameter $route wordt gebruikt om toegang te krijgen tot de eigenschappen van de route.

Laten we eens kijken hoe we de $route-service kunnen gebruiken.

In dit voorbeeld

  • We gaan een eenvoudige aangepaste variabele maken met de naam ‘mijntekst’, die de string ‘Dit is hoekig’ zal bevatten.
  • We gaan deze variabele aan onze route koppelen. En later we gaan toegang krijgen tot deze string vanaf onze controller met behulp van de $route-service en vervolgens het scope-object gebruiken om dat in onze weergave weer te geven.

Laten we dus eens kijken naar de stappen die we moeten uitvoeren om dit te bereiken.

Stap 1) Voeg een aangepast sleutel-waardepaar toe aan de route. Hier voegen we een sleutel toe met de naam 'mijntekst' en geven deze de waarde 'Dit is hoekig'.

Hoekige $route-service

Stap 2) Voeg de relevante code toe aan de controller

  1. Voeg de parameter $route toe aan de controllerfunctie. De parameter $route is een sleutelparameter die in angular is gedefinieerd en waarmee toegang wordt verkregen tot de eigenschappen van de route.
  2. De variabele “mytext” die in de route is gedefinieerd, is toegankelijk via de referentie $route.current. Deze wordt vervolgens toegewezen aan de variabele 'text' van het scope-object. De tekstvariabele kan vervolgens dienovereenkomstig vanuit de weergave worden geopend.

Hoekige $route-service

<!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>

Stap 3) Voeg een verwijzing naar de tekstvariabele uit het scope-object toe als een expressie. Dit wordt toegevoegd aan onze Angular.html-pagina, zoals hieronder weergegeven.

Hierdoor wordt de tekst “Dit is hoekig” in de weergave geïnjecteerd. De expressie {{tutorialid}} is dezelfde als die in het vorige onderwerp en hier wordt het getal '1' weergegeven.

Hoekige $route-service

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Hoekige $route-service

Van de uitvoer,

  • We kunnen zien dat de tekst “Dit is hoekig” ook wordt weergegeven wanneer we op een van de links in de tabel klikken. De onderwerp-ID wordt ook tegelijkertijd met de tekst weergegeven.

HTML5-routering inschakelen

HTML5-routering wordt in principe gebruikt om een ​​schone URL te maken. Het betekent het verwijderen van de hashtag uit de URL. Wanneer HTML5-routering wordt gebruikt, zien de routerings-URL's er dus uit zoals hieronder weergegeven

Voorbeeld.html/Angular/1

Voorbeeld.html/Angular/2

Voorbeeld.html/Angular/3

Dit concept staat normaal gesproken bekend als het presenteren van een mooie URL aan de gebruiker.

Er zijn twee hoofdstappen die moeten worden uitgevoerd voor HTML2-routering.

  1. $locationProvider configureren
  2. Onze basis leggen voor relatieve links

Laten we eens kijken naar de details van hoe u de bovengenoemde stappen in ons bovenstaande voorbeeld kunt uitvoeren

Stap 1) Voeg de relevante code toe aan de hoekmodule

  1. Voeg een baseURL-constante toe aan de applicatie – Dit is vereist voor HTML5-routing, zodat de applicatie weet wat de basislocatie van de applicatie is.
  2. Voeg de $locationProvider-services toe. Met deze service kunt u de html5Mode definiëren.
  3. Stel de html5Mode van de service $locationProvider in op true.

HTML5-routering inschakelen

Stap 2) Verwijder alle #tags voor de links ('Angular/1', 'Angular/2', 'Angular/3') om een ​​gemakkelijk leesbare URL te creëren.

HTML5-routering inschakelen

<!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>

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

HTML5-routering inschakelen

Van de uitvoer,

  • U kunt zien dat de #-tag er niet is wanneer u de applicatie opent.

Samengevat

  • Routing wordt gebruikt om verschillende weergaven aan de gebruiker op dezelfde webpagina te presenteren. Dit is in principe het concept dat wordt gebruikt in Single Page-applicaties die voor bijna alle moderne webapplicaties worden geïmplementeerd
  • Er kan een standaardroute worden ingesteld voor angular.JS-routering. Het wordt gebruikt om te bepalen wat de standaardweergave is die aan de gebruiker wordt getoond
  • Parameters kunnen via de URL als routeparameters aan de route worden doorgegeven. Deze parameters zijn vervolgens toegankelijk via de parameter $routeParams in de controller
  • De service $route kan worden gebruikt om aangepaste sleutel-waardeparen in de route te definiëren, die vervolgens vanuit de weergave kunnen worden geopend
  • HTML5-routing wordt gebruikt om de #tag uit de routerings-URL in een hoek te verwijderen om een ​​mooie URL te vormen