AngularJS-rutingseksempel med parametere

Før vi lærer hvordan ruting fungerer i Angular, la oss bare ha en rask oversikt over Single-Page Applications.

Hva er enkeltsideapplikasjoner?

Enkeltsideapplikasjoner eller (SPA-er) er nettapplikasjoner som laster en enkelt HTML-side og dynamisk oppdaterer siden basert på brukerinteraksjonen med nettapplikasjonen.

La oss ta et eksempel på et nettsted som hostes via URL-en http://example.com/index.html.

På denne siden vil du være vert for hovedsiden for søknaden din. Tenk deg at hvis applikasjonen organiserte en begivenhet og man ønsket å se hva de forskjellige hendelsene som vises er, eller ønsket å se detaljene for en bestemt begivenhet eller slette en begivenhet. I en enkeltside-applikasjon, når ruting er aktivert, vil all denne funksjonaliteten være tilgjengelig via følgende koblinger

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

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

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

Symbolet # vil bli brukt sammen med de forskjellige rutene (ShowEvent, DisplayEvent og DeleteEvent).

• Så hvis brukeren ønsker å se alle hendelser, vil de bli sendt til lenken (http://example.com/index.html#ShowEvent), annet
• Hvis de bare ønsket å se en bestemt hendelse, ville de bli omdirigert til lenken ( http://example.com/index.html#DisplayEvent) Eller
• Hvis de ønsker å slette en hendelse, vil de bli sendt til lenken http://example.com/index.html#DeleteEvent.

Merk at hoved-URLen forblir den samme.

Legger til AngularJS Route ved å bruke $routeProvider

Så som vi diskuterte tidligere, ruter inn AngularJS brukes til å rute brukeren til en annen visning av applikasjonen din. Og denne rutingen gjøres på samme HTML-side slik at brukeren opplever at han ikke har forlatt siden.

For å implementere ruting må følgende hovedtrinn implementeres i applikasjonen din i en bestemt rekkefølge.

1. Referanse til angular-route.js. Dette er en JavaScript fil utviklet av Google som har alle funksjonene til ruting. Denne må plasseres i applikasjonen din slik at den kan referere til alle hovedmodulene som kreves for ruting.
2. Det neste viktige trinnet er å legge til en avhengighet til ngRoute-modulen fra applikasjonen din. Denne avhengigheten er nødvendig for at rutingfunksjonalitet kan brukes i applikasjonen. Hvis denne avhengigheten ikke legges til, vil man ikke kunne bruke ruting innenfor angular.JS-applikasjonen.

Nedenfor er den generelle syntaksen til denne uttalelsen. Dette er bare en normal erklæring av en modul med inkludering av nøkkelordet ngRoute.

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

3. Det neste trinnet vil være å konfigurere $routeProvider. Dette er nødvendig for å gi de forskjellige rutene i applikasjonen din. Nedenfor er den generelle syntaksen til denne setningen som er veldig selvforklarende. Den sier bare at når den aktuelle banen er valgt, bruk ruten for å vise den gitte visningen til brukeren.

when(path, route)

4. Lenker til ruten din fra HTML-siden din. På HTML-siden din vil du legge til referanselenker til de forskjellige tilgjengelige rutene i applikasjonen din.

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

5. Til slutt ville være inkludering av ng-view-direktivet, som normalt vil være i en div-tag. Dette vil bli brukt til å injisere innholdet i visningen når den relevante ruten er valgt.

Eksempel på AngularJS-ruting

La oss nå se på et eksempel på ruting ved å bruke de ovennevnte trinnene.

I vårt AngularJS-rutingseksempel med parametere,

Vi vil presentere 2 linker til brukeren,

• Den ene er å vise emnene for en Kantete JS selvfølgelig, og den andre er for node.js kurs.
• Når brukeren klikker på en av koblingene, vil emnene for kurset vises.

Trinn 1) Ta med angular-rute-filen som en skriptreferanse.

Denne rutefilen er nødvendig for å kunne bruke funksjonaliteten ved å ha flere ruter og utsikter. Denne filen kan lastes ned fra nettstedet angular.JS.

Trinn 2) Legg til href-tagger som vil representere lenker til "Angular JS Topics" og "Node JS Topics."

Trinn 3) Legg til en div-tag med ng-view-direktivet som vil representere visningen.

Dette vil tillate at den tilsvarende visningen injiseres hver gang brukeren klikker på enten "Angular JS Topics" eller "Node JS Topics."

Trinn 4) I skriptkoden for AngularJS legger du til "ngRoute-modulen" og "$routeProvider"-tjenesten.

Kodeforklaring:

1. Det første trinnet er å sørge for å inkludere "ngRoute-modulen." Med dette på plass vil Angular automatisk håndtere rutingen i applikasjonen din. ngRoute-modulen som er utviklet av Google har all funksjonalitet som gjør at ruting er mulig. Ved å legge til denne modulen vil applikasjonen automatisk forstå alle rutekommandoene.
2. $routeprovider er en tjeneste som angular bruker for å lytte i bakgrunnen til rutene som kalles. Så når brukeren klikker på en lenke, vil ruteleverandøren i AngularJS oppdage dette og deretter bestemme hvilken rute han skal ta.
3. Lag én rute for Angular-lenken – Denne blokken betyr at når Angular-lenken klikkes, injiser filen Angular.html og bruk også kontrolleren 'AngularController' for å behandle enhver forretningslogikk.
4. Opprett én rute for nodekoblingen – Denne blokken betyr at når nodekoblingen klikkes, injiser filen Node.html og bruk også kontrolleren 'NodeController' til å behandle enhver forretningslogikk.

Trinn 5) Neste er å legge til kontrollere for å behandle forretningslogikken for både AngularController og NodeController.

I hver kontroller lager vi en rekke nøkkelverdi-par for å lagre emnenavn og beskrivelser for hvert kurs. Matrisevariabelen 'tutorial' legges til scope-objektet for hver kontroller.

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

Trinn 6) Lag sider kalt Angular.html og Node.html. For hver side utfører vi trinnene nedenfor.

Disse trinnene vil sikre at alle nøkkelverdi-parene i matrisen vises på hver side.

1. Bruke ng-repeat-direktivet for å gå gjennom hvert nøkkelverdi-par som er definert i opplæringsvariabelen.
2. Viser navn og beskrivelse av hvert nøkkelverdi-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 utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Hvis du klikker på koblingen AngularJS Emner, vil utgangen nedenfor vises.

Utgangen viser tydelig at

• Når koblingen "Angular JS Topics" klikkes, bestemmer ruteleverandøren som vi deklarerte i koden vår at Angular.html-koden skal injiseres.
• Denne koden vil bli injisert i "div"-taggen, som inneholder ng-view-direktivet. Innholdet i kursbeskrivelsen kommer også fra "veiledningsvariabelen" som var en del av scope-objektet definert i AngularController.
• Når man klikker på node.js Emner, det samme resultatet vil finne sted, og visningen for Node.js-emner vil bli manifestert.
• Legg også merke til at sidens URL forblir den samme, det er bare ruten etter #-taggen som endres. Og dette er konseptet med enkeltsideapplikasjoner. #hash-taggen i URL-en er en separator som skiller ruten (som i vårt tilfelle er 'Angular' som vist i bildet ovenfor) og HTML-hovedsiden (Sample.html)

Opprette en standardrute i AngularJS

Ruting i AngularJS gir også muligheten til å ha en standardrute. Dette er ruten som velges hvis det ikke er samsvar for den eksisterende ruten.

Standardruten opprettes ved å legge til følgende betingelse når du definerer $routeProvider-tjenesten.

Syntaksen nedenfor betyr ganske enkelt å omdirigere til en annen side hvis noen av de eksisterende rutene ikke samsvarer.

otherwise ({
    redirectTo: 'page'
});

La oss bruke samme eksempel ovenfor og legge til en standardrute til vår $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 bruker vi samme kode som ovenfor, med den eneste forskjellen er at vi bruker setningen ellers og alternativet "redirectTo" for å spesifisere hvilken visning som skal lastes hvis ingen rute er spesifisert. I vårt tilfelle ønsker vi at '/Angular'-visningen skal vises.

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Fra utgangen,

• Du kan tydelig se at standardvisningen som vises er den kantede JS-visningen.
• Dette er fordi når siden lastes, går den til alternativet 'ellers' i $routeProvider-funksjonen og laster '/Angular'-visningen.

Hvordan få tilgang til parametere fra AngularJS-ruten

Angular gir også funksjonaliteten til å gi parametere under ruting. Parametrene legges til på slutten av ruten i URL-en, for eksempel, http://guru99/index.html#/Angular/1. I dette Angular routing-eksemplet,

1. , http://guru99/index.html er vår hovedapplikasjons-URL
2. #-symbolet er skillet mellom hovedapplikasjonens URL og ruten.
3. Kantet er vår rute
4. Og til slutt er '1' parameteren som legges til ruten vår

Syntaksen for hvordan parametere ser ut i nettadressen vises nedenfor:

HTMLPage#/rute/parameter

Her vil du legge merke til at parameteren sendes etter ruten i URL-en.

Så i vårt AngularJS-ruteeksempel, ovenfor for Angular JS-emnene, kan vi sende en parameter som vist nedenfor

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

Her kan parametrene 1, 2 og 3 faktisk representere emnet.

La oss se i detalj på hvordan vi kan implementere vinkelrute med parameter:

Trinn 1) Legg til følgende kode i visningen

1. Legg til en tabell for å vise alle emnene for Angular JS-kurset til brukeren
2. Legg til en tabellrad for å vise emnet «Kontrollere». For denne raden endrer du href-taggen til "Angular/1", som betyr at når brukeren klikker på dette emnet, vil parameter 1 bli sendt i URL-en sammen med ruten.
3. Legg til en tabellrad for å vise emnet «Modeller». For denne raden endrer du href-taggen til "Angular/2", som betyr at når brukeren klikker på dette emnet, vil parameter 2 sendes i URL-en sammen med ruten.
4. Legg til en tabellrad for å vise emnet «Direktiver». For denne raden endrer du href-taggen til "Angular/3", som betyr at når brukeren klikker på dette emnet, vil parameter 3 sendes i URL-en sammen med ruten.

Trinn 2) Legg til emne-ID i ruteleverandørens tjenestefunksjon
I ruteleverandørtjenestefunksjonen legger du til:topicId for å angi at enhver parameter som sendes i URL-en etter ruten, skal tilordnes variabelen topicId.

Trinn 3) Legg til den nødvendige koden til kontrolleren

1. Sørg for å først legge til "$routeParams" som en parameter når du definerer kontrollerfunksjonen. Denne parameteren vil ha tilgang til alle ruteparametrene som sendes i URL-en.
2. "routeParams"-parameteren har en referanse til topicId-objektet, som sendes som en ruteparameter. Her knytter vi '$routeParams.topicId'-variabelen til vårt scope-objekt som variabelen '$scope.tutotialid'. Dette gjøres slik at det kan refereres til i vårt syn via tutorialid-variabelen.

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

Trinn 4) Legg til uttrykket for å vise variabelen
Legg til uttrykket for å vise tutorialid-variabelen på Angular.html-siden.

<h2>Anguler</h2>

<br><br>{{tutorialid}}

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

I utdataskjermen,

• Hvis du klikker på koblingen Emnedetaljer for det første emnet, legges tallet 1 til URL-en.
• Dette nummeret vil da bli tatt som et "routeparam"-argument av Angular.JS-ruteleverandørtjenesten og kan deretter nås av vår kontroller.

Slik bruker du Angular $route-tjenesten

$route-tjenesten lar deg få tilgang til egenskapene til ruten. $route-tjenesten er tilgjengelig som en parameter når funksjonen er definert i kontrolleren. Den generelle syntaksen for hvordan $route-parameteren er tilgjengelig fra kontrolleren er vist nedenfor;

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

1. myApp er angular.JS-modulen definert for applikasjonene dine
2. MyController er navnet på kontrolleren som er definert for applikasjonen din
3. Akkurat som $scope-variabelen er gjort tilgjengelig for applikasjonen din, som brukes til å overføre informasjon fra kontrolleren til visningen. $route-parameteren brukes for å få tilgang til egenskapene til ruten.

La oss ta en titt på hvordan vi kan bruke $route-tjenesten.

I dette eksemplet,

• Vi skal lage en enkel tilpasset variabel kalt "mytext", som vil inneholde strengen "This is angular."
• Vi skal knytte denne variabelen til ruten vår. Og senere skal vi få tilgang til denne strengen fra kontrolleren vår ved å bruke $route-tjenesten og deretter bruke scope-objektet for å vise det i vårt syn.

Så la oss se trinnene vi må utføre for å oppnå dette.

Trinn 1) Legg til et egendefinert nøkkelverdi-par til ruten. Her legger vi til en nøkkel kalt "min tekst" og tildeler den verdien "Dette er kantet."

Trinn 2) Legg til den relevante koden til kontrolleren

1. Legg til $route-parameteren til kontrollerfunksjonen. $route-parameteren er en nøkkelparameter definert i vinkel, som lar en få tilgang til egenskapene til ruten.
2. Variabelen "mytext" som ble definert i ruten kan nås via $route.current-referansen. Dette tilordnes deretter 'tekst'-variabelen til scope-objektet. Tekstvariabelen kan deretter nås fra visningen tilsvarende.

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

Trinn 3) Legg til en referanse til tekstvariabelen fra scope-objektet som et uttrykk. Dette vil bli lagt til vår Angular.html-side som vist nedenfor.

Dette vil føre til at teksten "This is angular" sprøytes inn i visningen. {{tutorialid}}-uttrykket er det samme som det som ble sett i forrige emne, og dette vil vise tallet '1'.

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Fra utgangen,

• Vi kan se at teksten "This is angular" også vises når vi klikker på noen av lenkene i tabellen. Emne-ID-en vises også samtidig med teksten.

Aktiverer HTML5-ruting

HTML5-ruting brukes i utgangspunktet for å lage en ren URL. Det betyr fjerning av hashtaggen fra URL-en. Så ruting-URL-ene, når HTML5-ruting brukes, vil se ut som vist nedenfor

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Dette konseptet er vanligvis kjent som å presentere pen URL til brukeren.

Det er 2 hovedtrinn som må utføres for HTML5-ruting.

1. Konfigurerer $locationProvider
2. Setter vår base for relative koblinger

La oss se nærmere på hvordan du utfører de ovennevnte trinnene i eksemplet ovenfor

Trinn 1) Legg til den relevante koden til vinkelmodulen

1. Legg til en baseURL-konstant til applikasjonen – Dette er nødvendig for HTML5-ruting slik at applikasjonen vet hva applikasjonens basisplassering er.
2. Legg til $locationProvider-tjenestene. Denne tjenesten lar deg definere html5Mode.
3. Sett html5Mode for $locationProvider-tjenesten til true.

Trinn 2) Fjern alle #taggene for koblingene ('Angular/1', 'Angular/2', 'Angular/3') for å lage en lettlest 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 utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Fra utgangen,

• Du kan se at #-taggen ikke er der når du åpner applikasjonen.

Sammendrag

• Ruting brukes til å presentere ulike visninger for brukeren på samme nettside. Dette er i utgangspunktet konseptet som brukes i enkeltsideapplikasjoner som er implementert for nesten alle moderne nettapplikasjoner
• En standardrute kan settes opp for angular.JS-ruting. Den brukes til å bestemme hva som skal være standardvisningen som skal vises til brukeren
• Parametere kan sendes til ruten via URL-en som ruteparametere. Disse parameterne blir deretter åpnet ved å bruke $routeParams-parameteren i kontrolleren
• $route-tjenesten kan brukes til å definere tilpassede nøkkelverdi-par i ruten som deretter kan nås fra visningen
• HTML5-ruting brukes til å fjerne #taggen fra ruting-URL i vinkel for å danne en pen URL