AngularJS-routingexempel med parametrar

Innan vi lär oss hur routing fungerar i Angular, låt oss bara ha en snabb översikt över Single-Page Applications.

Vad är Single Page Applications?

Single page applications eller (SPA) är webbapplikationer som laddar en enda HTML-sida och dynamiskt uppdaterar sidan baserat på användarens interaktion med webbapplikationen.

Vad är routing i AngularJS?

Routing i AngularJS är en metod som låter dig skapa Single Page Applications. Det gör att du kan skapa olika webbadresser för olika innehåll i dina webbapplikationer. AngularJS routing hjälper också till att visa flera innehåll beroende på vilken rutt som väljs. Det anges i URL:en efter #-tecknet.

Låt oss ta ett exempel på en webbplats som är värd via URL:en http://example.com/index.html.

På den här sidan skulle du vara värd för huvudsidan för din ansökan. Antag att om applikationen organiserade ett evenemang och man ville se vilka de olika evenemangen som visas är, eller ville se detaljerna för en viss händelse eller ta bort en händelse. I en Single Page-applikation, när routing är aktiverad, skulle all denna funktion vara tillgänglig via följande länkar

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

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

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

Symbolen # skulle användas tillsammans med de olika rutterna (ShowEvent, DisplayEvent och DeleteEvent).

Så om användaren ville se alla händelser, skulle de dirigeras till länken (http://example.com/index.html#ShowEvent), annat
Om de bara ville se en viss händelse skulle de omdirigeras till länken ( http://example.com/index.html#DisplayEvent) Eller
Om de ville ta bort en händelse skulle de omdirigeras till länken http://example.com/index.html#DeleteEvent.

Observera att huvudadressen förblir densamma.

Lägger till AngularJS Route med $routeProvider

Så som vi diskuterade tidigare, rutter in AngularJS används för att dirigera användaren till en annan vy av din applikation. Och denna routing görs på samma HTML-sida så att användaren får upplevelsen att han inte har lämnat sidan.

För att implementera routing måste följande huvudsteg implementeras i din applikation i valfri specifik ordning.

Referens till angular-route.js. Det här är en JavaScript fil utvecklad av Google som har alla funktioner för routing. Detta måste placeras i din applikation så att det kan referera till alla huvudmoduler som krävs för routing.
Nästa viktiga steg är att lägga till ett beroende till ngRoute-modulen inifrån din applikation. Detta beroende krävs för att routingfunktionalitet ska kunna användas i applikationen. Om detta beroende inte läggs till kommer man inte att kunna använda routing inom applikationen angular.JS.

Nedan är den allmänna syntaxen för detta uttalande. Detta är bara en normal deklaration av en modul med inkludering av nyckelordet ngRoute.

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

Nästa steg skulle vara att konfigurera din $routeProvider. Detta krävs för att tillhandahålla de olika vägarna i din ansökan. Nedan är den allmänna syntaxen för detta uttalande som är mycket självförklarande. Det står bara att när den relevanta sökvägen är vald, använd rutten för att visa den givna vyn för användaren.

when(path, route)

Länkar till din rutt från din HTML-sida. På din HTML-sida kommer du att lägga till referenslänkar till de olika tillgängliga vägarna i din applikation.

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

Slutligen skulle vara införandet av ng-view direktiv, som normalt skulle finnas i en div-tagg. Detta skulle användas för att injicera innehållet i vyn när den relevanta vägen väljs.

AngularJS Routing Exempel

Låt oss nu titta på ett exempel på routing med de ovan nämnda stegen.

I vårt AngularJS-routingexempel med parametrar,

Vi kommer att presentera 2 länkar för användaren,

En är att visa ämnen för en Vinkelformig JS kurs, och den andra är för node.js Naturligtvis.
När användaren klickar på någon av länkarna kommer ämnena för den kursen att visas.

Steg 1) Inkludera angular-route-filen som en skriptreferens.

Denna ruttfil är nödvändig för att kunna använda funktionerna i att ha flera rutter och vyer. Den här filen kan laddas ner från webbplatsen angular.JS.

Steg 2) Lägg till href-taggar som representerar länkar till "Angular JS Topics" och "Node JS Topics".

Steg 3) Lägg till en div-tagg med ng-view-direktivet som kommer att representera vyn.

Detta gör att motsvarande vy kan injiceras när användaren klickar på antingen "Angular JS Topics" eller "Node JS Topics".

Steg 4) I din skripttagg för AngularJS lägger du till "ngRoute-modulen" och tjänsten "$routeProvider".

Kodförklaring:

Det första steget är att se till att inkludera "ngRoute-modulen." Med detta på plats kommer Angular automatiskt att hantera routingen i din applikation. Modulen ngRoute som är utvecklad av Google har alla funktioner som gör att routing är möjlig. Genom att lägga till denna modul kommer applikationen automatiskt att förstå alla routingkommandon.
$routeprovider är en tjänst som angular använder för att lyssna i bakgrunden på de rutter som anropas. Så när användaren klickar på en länk kommer ruttleverantören i AngularJS att upptäcka detta och sedan bestämma vilken väg som ska ta.
Skapa en rutt för Angular-länken – Det här blocket innebär att när Angular-länken klickas, injicera filen Angular.html och använd även Controller 'AngularController' för att bearbeta eventuell affärslogik.
Skapa en rutt för nodlänken – Det här blocket innebär att när nodlänken klickas, injicera filen Node.html och använd även Controller 'NodeController' för att bearbeta eventuell affärslogik.

Steg 5) Nästa är att lägga till kontroller för att bearbeta affärslogiken för både AngularController och NodeController.

I varje kontrollenhet skapar vi en uppsättning nyckel-värdepar för att lagra ämnesnamn och beskrivningar för varje kurs. Arrayvariabeln 'tutorial' läggs till i scope-objektet för varje styrenhet.

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

Steg 6) Skapa sidor som heter Angular.html och Node.html. För varje sida utför vi stegen nedan.

Dessa steg säkerställer att alla nyckel-värdepar i arrayen visas på varje sida.

Använd ng-repeat-direktivet för att gå igenom varje nyckel-värdepar som definieras i handledningsvariabeln.
Visar namn och beskrivning av varje nyckel-värdepar.

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

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

Om du klickar på länken AngularJS Ämnen kommer nedanstående utdata att visas.

Utgången visar tydligt att,

När länken "Angular JS Topics" klickas, bestämmer routeProvider som vi deklarerade i vår kod att Angular.html-koden ska injiceras.
Denna kod kommer att injiceras i "div"-taggen, som innehåller ng-view-direktivet. Innehållet för kursbeskrivningen kommer också från "handledningsvariabeln" som var en del av scope-objektet definierat i AngularController.
När man klickar på node.js Ämnen, samma resultat kommer att ske, och vyn för Node.js-ämnen kommer att manifesteras.
Observera också att sidans URL förblir densamma, det är bara rutten efter #-taggen som ändras. Och detta är konceptet med ensidiga applikationer. #hash-taggen i URL:en är en separator som separerar rutten (som i vårt fall är 'Angular' som visas i bilden ovan) och HTML-huvudsidan (Sample.html)

Skapa en standardrutt i AngularJS

Routing i AngularJS ger också möjlighet att ha en standardrutt. Detta är rutten som väljs om det inte finns någon matchning för den befintliga rutten.

Standardrutten skapas genom att lägga till följande villkor när du definierar tjänsten $routeProvider.

Syntaxen nedan betyder helt enkelt att omdirigera till en annan sida om någon av de befintliga rutterna inte matchar.

otherwise ({
    redirectTo: 'page'
});

Låt oss använda samma exempel ovan och lägga till en standardrutt till vår $routeProvider-tjänst.

function($routeProvider){
$routeProvider.

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

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

Kodförklaring:

Här använder vi samma kod som ovan, med den enda skillnaden är att vi använder annars-satsen och alternativet "redirectTo" för att specificera vilken vy som ska laddas om ingen rutt anges. I vårt fall vill vi att vyn '/Angular' ska visas.

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

Från utgången,

Du kan tydligt se att standardvyn som visas är den vinklade JS-vyn.
Detta beror på att när sidan laddas går den till alternativet 'annat' i $routeProvider-funktionen och laddar vyn '/Angular'.

Hur man får åtkomst till parametrar från AngularJS-rutten

Angular tillhandahåller också funktionen för att tillhandahålla parametrar under routing. Parametrarna läggs till i slutet av rutten i URL:en, till exempel, http://guru99/index.html#/Angular/1. I detta Angular routing-exempel,

, http://guru99/index.html är vår huvudsakliga applikations-URL
Symbolen # är avgränsaren mellan webbadressen till huvudapplikationen och rutten.
Angular är vår rutt
Och slutligen är '1' parametern som läggs till vår rutt

Syntaxen för hur parametrar ser ut i webbadressen visas nedan:

HTMLPage#/route/parameter

Här kommer du att märka att parametern skickas efter rutten i URL:en.

Så i vårt AngularJS-rutterexempel, ovan för Angular JS-ämnena, kan vi skicka en parametrar som visas nedan

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

Här kan parametrarna 1, 2 och 3 faktiskt representera ämnet.

Låt oss titta i detalj på hur vi kan implementera Angular route med parameter:

Steg 1) Lägg till följande kod till din vy

Lägg till en tabell för att visa alla ämnen för Angular JS-kursen för användaren
Lägg till en tabellrad för att visa ämnet "Kontroller". För den här raden ändrar du href-taggen till "Angular/1", vilket innebär att när användaren klickar på det här ämnet kommer parameter 1 att skickas i URL:en tillsammans med rutten.
Lägg till en tabellrad för att visa ämnet "Modeller". För den här raden ändrar du href-taggen till "Angular/2", vilket innebär att när användaren klickar på det här ämnet kommer parameter 2 att skickas i URL:en tillsammans med rutten.
Lägg till en tabellrad för att visa ämnet "Direktiv". För den här raden ändrar du href-taggen till "Angular/3", vilket innebär att när användaren klickar på det här ämnet kommer parameter 3 att skickas i URL:en tillsammans med rutten.

Steg 2) Lägg till ämnes-id i Routeprovider-tjänstfunktionen
I routeprovider-tjänstfunktionen lägger du till:topicId för att ange att alla parametrar som skickas i URL:en efter rutten ska tilldelas variabeln topicId.

Steg 3) Lägg till den nödvändiga koden till styrenheten

Se till att först lägga till "$routeParams" som en parameter när du definierar kontrollerfunktionen. Denna parameter kommer att ha åtkomst till alla ruttparametrar som skickas i URL:en.
Parametern "routeParams" har en referens till topicId-objektet, som skickas som en ruttparameter. Här bifogar vi variabeln '$routeParams.topicId' till vårt scope-objekt som variabeln '$scope.tutotialid'. Detta görs så att det enligt vår uppfattning kan refereras till via tutorialid-variabeln.

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

Steg 4) Lägg till uttrycket för att visa variabeln
Lägg till uttrycket för att visa tutorialid-variabeln på sidan Angular.html.

<h2>Anguler</h2>

<br><br>{{tutorialid}}

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

På utgångsskärmen,

Om du klickar på länken Ämnesdetaljer för det första ämnet läggs siffran 1 till URL:en.
Detta nummer kommer sedan att tas som ett "routeparam"-argument av Angular.JS-ruttleverantörstjänsten och kan sedan nås av vår styrenhet.

Hur man använder Angular $route Service

Tjänsten $route låter dig komma åt ruttens egenskaper. Tjänsten $route är tillgänglig som en parameter när funktionen är definierad i styrenheten. Den allmänna syntaxen för hur parametern $route är tillgänglig från styrenheten visas nedan;

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

myApp är modulen angular.JS definierad för dina applikationer
MyController är namnet på den styrenhet som definierats för din applikation
Precis som variabeln $scope görs tillgänglig för din applikation, som används för att skicka information från styrenheten till vyn. Parametern $route används för att komma åt ruttens egenskaper.

Låt oss ta en titt på hur vi kan använda $route-tjänsten.

I detta exempel,

Vi kommer att skapa en enkel anpassad variabel som heter "mytext", som kommer att innehålla strängen "This is angular."
Vi kommer att bifoga denna variabel till vår rutt. Och senare kommer vi att komma åt den här strängen från vår styrenhet med hjälp av tjänsten $route och sedan använda scope-objektet för att visa det i vår åsikt.

Så, låt oss se vilka steg vi behöver utföra för att uppnå detta.

Steg 1) Lägg till ett anpassat nyckel-värdepar till rutten. Här lägger vi till en nyckel som heter 'mintext' och tilldelar den värdet "Detta är kantigt."

Steg 2) Lägg till relevant kod till regulatorn

Lägg till parametern $route till kontrollfunktionen. Parametern $route är en nyckelparameter definierad i vinkel, vilket gör att man kan komma åt ruttens egenskaper.
Variabeln "mytext" som definierades i rutten kan nås via referensen $route.current. Detta tilldelas sedan till variabeln 'text' för scope-objektet. Textvariabeln kan sedan nås från vyn.

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

Steg 3) Lägg till en referens till textvariabeln från scope-objektet som ett uttryck. Detta kommer att läggas till på vår Angular.html-sida som visas nedan.

Detta gör att texten "This is angular" injiceras i vyn. {{tutorialid}}-uttrycket är detsamma som i föregående avsnitt och detta kommer att visa siffran '1'.

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

Från utgången,

Vi kan se att texten "This is angular" också visas när vi klickar på någon av länkarna i tabellen. Ämnes-ID visas också samtidigt som texten.

Aktiverar HTML5-routing

HTML5-routing används i princip för att skapa ren URL. Det innebär att hashtaggen tas bort från webbadressen. Så routing-URL:erna, när HTML5-routing används, skulle se ut som visas nedan

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Detta koncept är normalt känt som att presentera en snygg URL för användaren.

Det finns två huvudsteg som måste utföras för HTML2-routing.

Konfigurerar $locationProvider
Att sätta vår bas för relativa länkar

Låt oss titta närmare på hur man utför de ovan nämnda stegen i vårt exempel ovan

Steg 1) Lägg till relevant kod till vinkelmodulen

Lägg till en baseURL-konstant till applikationen – Detta krävs för HTML5-routing så att applikationen vet vad applikationens basplats är.
Lägg till $locationProvider-tjänsterna. Denna tjänst låter dig definiera html5Mode.
Ställ in html5Mode för $locationProvider-tjänsten till sant.

Steg 2) Ta bort alla #taggar för länkarna ('Angular/1', 'Angular/2', 'Angular/3') för att skapa en lättläst URL.

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

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

Från utgången,

Du kan se att #-taggen inte finns där när du kommer åt programmet.

Sammanfattning

Routing används för att presentera olika vyer för användaren på samma webbsida. Detta är i grunden konceptet som används i ensidiga applikationer som implementeras för nästan alla moderna webbapplikationer
En standardrutt kan ställas in för angular.JS routing. Den används för att bestämma vilken standardvy som ska visas för användaren
Parametrar kan skickas till rutten via URL:en som ruttparametrar. Dessa parametrar nås sedan med hjälp av parametern $routeParams i styrenheten
Tjänsten $route kan användas för att definiera anpassade nyckel-värdepar i rutten som sedan kan nås från vyn
HTML5 routing används för att ta bort #taggen från routing URL i vinkel för att bilda en snygg URL

Vad är Single Page Applications?

Vad är routing i AngularJS?

Lägger till AngularJS Route med $routeProvider

RELATERADE ARTIKLAR

AngularJS Routing Exempel

Skapa en standardrutt i AngularJS

Hur man får åtkomst till parametrar från AngularJS-rutten

Hur man använder Angular $route Service

Aktiverar HTML5-routing

Sammanfattning

Anmäl dig till nyhetsbrevet