AngularJS-routingeksempel med parametre

Før vi lærer, hvordan routing fungerer i Angular, lad os lige få et hurtigt overblik over Single-Page Applications.

Hvad er Single Page Applications?

Enkeltsideapplikationer eller (SPA'er) er webapplikationer, der indlæser en enkelt HTML-side og dynamisk opdaterer siden baseret på brugerinteraktionen med webapplikationen.

Lad os tage et eksempel på et websted, der hostes via URL'en http://example.com/index.html.

På denne side vil du være vært for din ansøgnings hovedside. Antag, at hvis applikationen organiserede en begivenhed, og man ønskede at se, hvad de forskellige begivenheder på skærmen er, eller ønskede at se detaljerne for en bestemt begivenhed eller slette en begivenhed. I en enkeltside-applikation, når routing er aktiveret, vil al denne funktionalitet være tilgængelig via følgende links

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

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

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

Symbolet # vil blive brugt sammen med de forskellige ruter (ShowEvent, DisplayEvent og DeleteEvent).

• Så hvis brugeren ønskede at se alle begivenheder, ville de blive dirigeret til linket (http://example.com/index.html#ShowEvent), andet
• Hvis de bare ville se en bestemt begivenhed, ville de blive omdirigeret til linket ( http://example.com/index.html#DisplayEvent), Eller
• Hvis de ønskede at slette en begivenhed, ville de blive dirigeret til linket http://example.com/index.html#DeleteEvent.

Bemærk, at hovedwebadressen forbliver den samme.

Tilføjelse af AngularJS Route ved hjælp af $routeProvider

Så som vi diskuterede tidligere, ruter ind AngularJS bruges til at dirigere brugeren til en anden visning af din applikation. Og denne routing foretages på den samme HTML-side, så brugeren har oplevelsen af, at han ikke har forladt siden.

For at implementere routing skal følgende hovedtrin implementeres i din applikation i en bestemt rækkefølge.

1. Reference til angular-route.js. Dette er en JavaScript fil udviklet af Google, der har alle funktionerne til routing. Dette skal placeres i din applikation, så det kan referere til alle de hovedmoduler, der er nødvendige for routing.
2. Det næste vigtige trin er at tilføje en afhængighed til ngRoute-modulet fra din applikation. Denne afhængighed er påkrævet, så routingfunktionalitet kan bruges i applikationen. Hvis denne afhængighed ikke tilføjes, vil man ikke være i stand til at bruge routing i angular.JS-applikationen.

Nedenfor er den generelle syntaks for denne erklæring. Dette er blot en normal erklæring af et modul med inklusion af nøgleordet ngRoute.

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

3. Det næste trin ville være at konfigurere din $routeProvider. Dette er nødvendigt for at give de forskellige ruter i din ansøgning. Nedenfor er den generelle syntaks for denne erklæring, som er meget selvforklarende. Det står bare, at når den relevante sti er valgt, skal du bruge ruten til at vise den givne visning for brugeren.

when(path, route)

4. Links til din rute fra din HTML-side. På din HTML-side vil du tilføje referencelinks til de forskellige tilgængelige ruter i din applikation.

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

5. Endelig ville være inddragelsen af ng-view direktiv, som normalt ville være i et div-tag. Dette vil blive brugt til at injicere indholdet af visningen, når den relevante rute er valgt.

AngularJS Routing Eksempel

Lad os nu se på et eksempel på routing ved hjælp af de ovennævnte trin.

I vores AngularJS routing eksempel med parametre,

Vi vil præsentere 2 links til brugeren,

• Den ene er at vise emnerne for en Vinkel JS kursus, og den anden er til node.js kursus.
• Når brugeren klikker på et af linkene, vil emnerne for det pågældende kursus blive vist.

Trin 1) Inkluder angular-route-filen som en scriptreference.

Denne rutefil er nødvendig for at gøre brug af funktionerne ved at have flere ruter og udsigter. Denne fil kan downloades fra webstedet angular.JS.

Trin 2) Tilføj href-tags, som repræsenterer links til "Angular JS Topics" og "Node JS Topics".

Trin 3) Tilføj et div-tag med ng-view-direktivet, som repræsenterer visningen.

Dette vil tillade den tilsvarende visning at blive injiceret, hver gang brugeren klikker på enten "Angular JS Topics" eller "Node JS Topics".

Trin 4) Tilføj "ngRoute-modulet" og "$routeProvider"-tjenesten i dit script-tag til AngularJS.

Kodeforklaring:

1. Det første trin er at sikre at inkludere "ngRoute-modulet." Med dette på plads vil Angular automatisk håndtere routing i din applikation. ngRoute-modulet, som er udviklet af Google, har al den funktionalitet, som gør det muligt at routing. Ved at tilføje dette modul vil applikationen automatisk forstå alle routing-kommandoer.
2. $routeprovideren er en tjeneste, som angular bruger til at lytte i baggrunden til de ruter, der kaldes. Så når brugeren klikker på et link, vil ruteudbyderen i AngularJS opdage dette og derefter beslutte, hvilken rute der skal tages.
3. Opret én rute for Angular-linket – Denne blok betyder, at når der klikkes på Angular-linket, skal du injicere filen Angular.html og også bruge controlleren 'AngularController' til at behandle enhver forretningslogik.
4. Opret én rute for Node-linket – Denne blok betyder, at når der klikkes på Node-linket, skal du injicere filen Node.html og også bruge controlleren 'NodeController' til at behandle enhver forretningslogik.

Trin 5) Det næste er at tilføje controllere til at behandle forretningslogikken for både AngularController og NodeController.

I hver controller opretter vi en række nøgleværdi-par til at gemme emnenavne og beskrivelser for hvert kursus. Array-variablen 'tutorial' føjes til scope-objektet for hver controller.

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

Trin 6) Opret sider kaldet Angular.html og Node.html. For hver side udfører vi nedenstående trin.

Disse trin sikrer, at alle nøgleværdi-par i arrayet vises på hver side.

1. Brug af ng-repeat-direktivet til at gennemgå hvert nøgleværdi-par, der er defineret i selvstudievariablen.
2. Viser navn og beskrivelse af hvert nøgleværdi-par.

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

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Hvis du klikker på linket AngularJS Emner, vil nedenstående output blive vist.

Outputtet viser tydeligt, at

• Når der klikkes på linket "Angular JS Topics", beslutter ruteudbyderen, som vi har erklæret i vores kode, at Angular.html-koden skal injiceres.
• Denne kode vil blive injiceret i "div"-tagget, som indeholder ng-view-direktivet. Desuden kommer indholdet af kursusbeskrivelsen fra "tutorial-variablen", som var en del af scope-objektet defineret i AngularController.
• Når man klikker på node.js Emner, det samme resultat vil finde sted, og visningen for Node.js-emner vil blive manifesteret.
• Bemærk også, at sidens URL forbliver den samme, det er kun ruten efter #-tagget, der ændres. Og dette er konceptet med enkeltsideapplikationer. #hash-tagget i URL'en er en separator, som adskiller ruten (som i vores tilfælde er 'Angular' som vist på ovenstående billede) og HTML-hovedsiden (Sample.html)

Oprettelse af en standardrute i AngularJS

Routing i AngularJS giver også mulighed for at have en standardrute. Dette er den rute, der vælges, hvis der ikke er match for den eksisterende rute.

Standardruten oprettes ved at tilføje følgende betingelse, når du definerer $routeProvider-tjenesten.

Nedenstående syntaks betyder simpelthen at omdirigere til en anden side, hvis nogen af ​​de eksisterende ruter ikke matcher.

otherwise ({
    redirectTo: 'page'
});

Lad os bruge det samme eksempel ovenfor og tilføje en standardrute til vores $routeProvider-tjeneste.

function($routeProvider){
$routeProvider.

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

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

Kodeforklaring:

1. Her bruger vi den samme kode som ovenfor, med den eneste forskel er, at vi bruger sætningen ellers og muligheden "redirectTo" til at angive, hvilken visning der skal indlæses, hvis der ikke er angivet en rute. I vores tilfælde ønsker vi, at '/Angular'-visningen skal vises.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Fra udgangen,

• Du kan tydeligt se, at den viste standardvisning er den vinklede JS-visning.
• Dette skyldes, at når siden indlæses, går den til 'otherwise'-indstillingen i $routeProvider-funktionen og indlæser '/Angular'-visningen.

Sådan får du adgang til parametre fra AngularJS-ruten

Angular giver også funktionaliteten til at levere parametre under routing. Parametrene tilføjes til slutningen af ​​ruten i URL'en, f.eks. http://guru99/index.html#/Angular/1. I dette eksempel på Angular routing,

1. , http://guru99/index.html er vores primære applikations-URL
2. #-symbolet er skillelinjen mellem hovedapplikationens URL og ruten.
3. Kantet er vores rute
4. Og endelig er '1' parameteren, som tilføjes til vores rute

Syntaksen for, hvordan parametre ser ud i URL'en, er vist nedenfor:

HTMLPage#/rute/parameter

Her vil du bemærke, at parameteren sendes efter ruten i URL'en.

Så i vores AngularJS-ruteeksempel, ovenfor for Angular JS-emnerne, kan vi videregive en parametre som vist nedenfor

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

Her kan parametrene 1, 2 og 3 faktisk repræsentere emnet.

Lad os se nærmere på, hvordan vi kan implementere Angular rute med parameter:

Trin 1) Tilføj følgende kode til din visning

1. Tilføj en tabel for at vise alle emnerne for Angular JS-kurset til brugeren
2. Tilføj en tabelrække til at vise emnet "Kontrollere". For denne række skal du ændre href-tagget til "Angular/1", hvilket betyder, at når brugeren klikker på dette emne, vil parameter 1 blive sendt i URL'en sammen med ruten.
3. Tilføj en tabelrække til at vise emnet "Modeller". For denne række skal du ændre href-tagget til "Angular/2", hvilket betyder, at når brugeren klikker på dette emne, vil parameter 2 blive sendt i URL'en sammen med ruten.
4. Tilføj en tabelrække til at vise emnet "Direktiver". For denne række skal du ændre href-tagget til "Angular/3", hvilket betyder, at når brugeren klikker på dette emne, vil parameter 3 blive sendt i URL'en sammen med ruten.

Trin 2) Tilføj emne-id i ruteudbyderens servicefunktion
I ruteudbyderens servicefunktion skal du tilføje:topicId for at angive, at enhver parameter, der sendes i URL'en efter ruten, skal tildeles variablen topicId.

Trin 3) Tilføj den nødvendige kode til controlleren

1. Sørg for først at tilføje "$routeParams" som en parameter, når du definerer controllerfunktionen. Denne parameter vil have adgang til alle ruteparametrene, der sendes i URL'en.
2. Parameteren "routeParams" har en reference til topicId-objektet, som sendes som en ruteparameter. Her vedhæfter vi variablen '$routeParams.topicId' til vores scope-objekt som variablen '$scope.tutotialid'. Dette gøres, så det efter vores mening kan refereres til via tutorialid-variablen.

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

Trin 4) Tilføj udtrykket for at vise variabel
Tilføj udtrykket for at vise tutorialid-variablen på siden Angular.html.

<h2>Anguler</h2>

<br><br>{{tutorialid}}

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

På outputskærmen,

• Hvis du klikker på linket Emnedetaljer for det første emne, tilføjes tallet 1 til URL'en.
• Dette nummer vil derefter blive taget som et "routeparam"-argument af Angular.JS-ruteudbydertjenesten og kan derefter tilgås af vores controller.

Sådan bruges Angular $route Service

$route-tjenesten giver dig adgang til rutens egenskaber. $route-tjenesten er tilgængelig som en parameter, når funktionen er defineret i controlleren. Den generelle syntaks for, hvordan parameteren $route er tilgængelig fra controlleren, er vist nedenfor;

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

1. myApp er det angular.JS-modul, der er defineret til dine applikationer
2. MyController er navnet på den controller, der er defineret til din applikation
3. Ligesom $scope-variablen gøres tilgængelig for din applikation, som bruges til at videregive information fra controlleren til visningen. Parameteren $route bruges til at få adgang til rutens egenskaber.

Lad os se på, hvordan vi kan bruge $route-tjenesten.

I dette eksempel

• Vi vil oprette en simpel brugerdefineret variabel kaldet "mytext", som vil indeholde strengen "This is angular."
• Vi vil vedhæfte denne variabel til vores rute. Og senere vil vi få adgang til denne streng fra vores controller ved hjælp af $route-tjenesten og derefter bruge scope-objektet til at vise det i vores visning.

Så lad os se, hvilke skridt vi skal udføre for at opnå dette.

Trin 1) Tilføj et tilpasset nøgleværdi-par til ruten. Her tilføjer vi en nøgle kaldet 'mintekst' og tildeler den værdien "Dette er kantet."

Trin 2) Tilføj den relevante kode til controlleren

1. Tilføj $route-parameteren til controllerfunktionen. $route-parameteren er en nøgleparameter defineret i vinkel, som giver adgang til rutens egenskaber.
2. Variablen "mytext" som blev defineret i ruten kan tilgås via $route.current referencen. Dette tildeles derefter til scope-objektets 'tekst'-variabel. Tekstvariablen kan derefter tilgås fra visningen i overensstemmelse hermed.

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

Trin 3) Tilføj en reference til tekstvariablen fra scope-objektet som et udtryk. Dette vil blive tilføjet til vores Angular.html side som vist nedenfor.

Dette vil medføre, at teksten "This is angular" indsprøjtes i visningen. {{tutorialid}}-udtrykket er det samme som i det forrige emne, og dette vil vise tallet '1'.

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Fra udgangen,

• Vi kan se, at teksten "This is angular" også bliver vist, når vi klikker på et af linkene i tabellen. Emne-id'et bliver også vist på samme tid som teksten.

Aktivering af HTML5-routing

HTML5-routing bruges grundlæggende til at skabe en ren URL. Det betyder fjernelse af hashtagget fra URL'en. Så routing-URL'erne, når HTML5-routing bruges, vil se ud som vist nedenfor

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Dette koncept er normalt kendt som at præsentere en smuk URL til brugeren.

Der er 2 hovedtrin, som skal udføres for HTML5-routing.

1. Konfigurerer $locationProvider
2. Sætter vores base for relative links

Lad os se nærmere på, hvordan man udfører de ovennævnte trin i vores eksempel ovenfor

Trin 1) Tilføj den relevante kode til vinkelmodulet

1. Tilføj en baseURL-konstant til applikationen – Dette er påkrævet for HTML5-routing, så applikationen ved, hvad applikationens basisplacering er.
2. Tilføj $locationProvider-tjenesterne. Denne service giver dig mulighed for at definere html5Mode.
3. Indstil html5Mode for $locationProvider-tjenesten til sand.

Trin 2) Fjern alle #tags for linkene ('Angular/1', 'Angular/2', 'Angular/3') for at oprette en letlæselig 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>

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Fra udgangen,

• Du kan se, at #-tagget ikke er der, når du får adgang til applikationen.

Resumé

• Routing bruges til at præsentere forskellige visninger for brugeren på den samme webside. Dette er dybest set det koncept, der bruges i enkeltsideapplikationer, som er implementeret til næsten alle moderne webapplikationer
• En standardrute kan sættes op til angular.JS routing. Det bruges til at bestemme, hvad der vil være standardvisningen, der skal vises til brugeren
• Parametre kan overføres til ruten via URL'en som ruteparametre. Disse parametre tilgås derefter ved at bruge parameteren $routeParams i controlleren
• $route-tjenesten kan bruges til at definere brugerdefinerede nøgle-værdi-par i ruten, som derefter kan tilgås fra visningen
• HTML5-routing bruges til at fjerne #tag fra routing-URL i vinkel for at danne en smuk URL