AngularJS-reititysesimerkki parametreilla

Ennen kuin opimme kuinka reititys toimii Angularissa, katsotaanpa vain yksisivuisista sovelluksista lyhyt yleiskatsaus.

Mitä yksisivuiset sovellukset ovat?

Yksisivuiset sovellukset tai (SPA:t) ovat verkkosovelluksia, jotka lataavat yhden HTML-sivun ja päivittävät sivun dynaamisesti käyttäjän vuorovaikutuksen perusteella verkkosovelluksen kanssa.

Otetaan esimerkki sivustosta, jota isännöidään URL http://example.com/index.html.

Tällä sivulla isännöisit hakemuksesi pääsivua. Oletetaan, jos sovellus oli järjestämässä tapahtumaa ja halutaan nähdä, mitä eri näytöllä olevat tapahtumat ovat, tai haluttaisiin nähdä tietyn tapahtuman tiedot tai poistaa tapahtuma. Yhden sivun sovelluksessa, kun reititys on käytössä, kaikki nämä toiminnot olisivat käytettävissä seuraavien linkkien kautta

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

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

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

#-symbolia käytettäisiin eri reittien yhteydessä (ShowEvent, DisplayEvent ja DeleteEvent).

• Joten jos käyttäjä haluaa nähdä kaikki tapahtumat, hänet ohjataan linkkiin (http://example.com/index.html#ShowEvent), muuten
• Jos he halusivat vain nähdä tietyn tapahtuman, heidät ohjataan uudelleen linkkiin ( http://example.com/index.html#DisplayEvent) Tai
• Jos he halusivat poistaa tapahtuman, heidät ohjataan linkkiin http://example.com/index.html#DeleteEvent.

Huomaa, että pääasiallinen URL pysyy samana.

AngularJS-reitin lisääminen käyttämällä $routeProvider-ohjelmaa

Joten kuten aiemmin keskustelimme, reitit sisään angularjs käytetään reitittämään käyttäjä sovelluksesi eri näkymään. Ja tämä reititys tehdään samalla HTML-sivulla, jotta käyttäjä kokee, ettei hän ole poistunut sivulta.

Reitityksen toteuttamiseksi seuraavat päävaiheet on toteutettava sovelluksessasi missä tahansa tietyssä järjestyksessä.

1. Viittaus angular-route.js-tiedostoon. Tämä on JavaKäsikirjoitus tiedosto, jonka on kehittänyt Google jolla on kaikki reitityksen toiminnallisuudet. Tämä on sijoitettava sovellukseesi, jotta se voi viitata kaikkiin reitityksessä tarvittaviin päämoduuleihin.
2. Seuraava tärkeä vaihe on lisätä riippuvuus ngRoute-moduuliin sovelluksestasi. Tämä riippuvuus tarvitaan, jotta reititystoimintoa voidaan käyttää sovelluksessa. Jos tätä riippuvuutta ei lisätä, reititystä ei voida käyttää angular.JS-sovelluksen sisällä.

Alla on tämän lausunnon yleinen syntaksi. Tämä on vain tavallinen moduulin ilmoitus, joka sisältää avainsanan ngRoute.

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

3. Seuraava vaihe on $routeProviderin määrittäminen. Tämä tarvitaan eri reittien tarjoamiseen sovelluksessasi. Alla on tämän lausunnon yleinen syntaksi, joka on hyvin itsestään selvä. Siinä vain todetaan, että kun asianmukainen polku on valittu, käytä reittiä tietyn näkymän näyttämiseen käyttäjälle.

when(path, route)

4. Linkit reitille HTML-sivultasi. Lisäät HTML-sivullesi viitelinkkejä sovelluksessasi oleville eri reiteille.

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

5. Lopuksi olisi sisällytettävä ng-view direktiivi, joka olisi normaalisti div-tunnisteessa. Tätä käytettäisiin näkymän sisällön lisäämiseen, kun relevantti reitti valitaan.

Esimerkki AngularJS-reitityksestä

Katsotaanpa nyt esimerkkiä reitityksestä käyttämällä yllä mainittuja vaiheita.

AngularJS-reititysesimerkissämme parametreilla

Esitämme käyttäjälle 2 linkkiä,

• Yksi on aiheiden näyttäminen Kulmainen JS tietenkin, ja toinen on varten Node.js kurssi.
• Kun käyttäjä napsauttaa jompaakumpaa linkkiä, kyseisen kurssin aiheet tulevat näkyviin.

Vaihe 1) Sisällytä kulmareittitiedosto komentosarjaviittaukseksi.

Tämä reittitiedosto on välttämätön, jotta voit hyödyntää useiden reittien ja näkymien toimintoja. Tämä tiedosto voidaan ladata angular.JS-verkkosivustolta.

Vaihe 2) Lisää href-tunnisteita, jotka edustavat linkkejä "Angular JS-aiheisiin" ja "Node JS-aiheisiin".

Vaihe 3) Lisää div-tunniste ng-view-direktiivin kanssa, joka edustaa näkymää.

Tämä mahdollistaa vastaavan näkymän lisäämisen aina, kun käyttäjä napsauttaa joko "Angular JS-aiheita" tai "Solmu JS-aiheita".

Vaihe 4) Lisää AngularJS:n komentosarjatunnisteeseen "ngRoute module" ja "$routeProvider" -palvelu.

Code Selitys:

1. Ensimmäinen vaihe on varmistaa, että ”ngRoute-moduuli” on sisällytetty. Kun tämä on käytössä, Angular käsittelee reitityksen automaattisesti sovelluksessasi. ngRoute-moduuli, jonka on kehittänyt Google sisältää kaikki reitityksen mahdollistavat toiminnot. Tämän moduulin lisäämisen myötä sovellus ymmärtää automaattisesti kaikki reitityskomennot.
2. $routeprovider on palvelu, jonka avulla Angular kuuntelee taustalla kutsuttuja reittejä. Joten kun käyttäjä napsauttaa linkkiä, AngularJS:n reitintarjoaja havaitsee tämän ja päättää sitten, minkä reitin hän valitsee.
3. Luo yksi reitti Angular-linkille – Tämä lohko tarkoittaa, että kun Angular-linkkiä napsautetaan, syötä tiedosto Angular.html ja käytä myös AngularController-ohjainta minkä tahansa liiketoimintalogiikan käsittelemiseen.
4. Luo yksi reitti solmulinkille – Tämä lohko tarkoittaa, että kun Solmulinkkiä napsautetaan, syötä tiedosto Node.html ja käytä myös Controller "NodeController" -ohjelmaa minkä tahansa liiketoimintalogiikan käsittelemiseen.

Vaihe 5) Seuraavaksi on lisättävä ohjaimia käsittelemään liiketoimintalogiikka sekä AngularControllerille että NodeControllerille.

Jokaisessa ohjaimessa luomme joukon avainarvopareja tallentaaksemme kunkin kurssin aiheiden nimet ja kuvaukset. Taulukkomuuttuja 'tutorial' lisätään kunkin ohjaimen laajuusobjektiin.

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

Vaihe 6) Luo sivut nimeltä Angular.html ja Node.html. Suoritamme jokaiselle sivulle alla olevat vaiheet.

Nämä vaiheet varmistavat, että kaikki taulukon avain-arvo-parit näkyvät jokaisella sivulla.

1. Käytä ng-repeat-direktiiviä jokaisen opetusmuuttujassa määritellyn avainarvoparin läpikäymiseen.
2. Näyttää kunkin avain-arvo-parin nimen ja kuvauksen.

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

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

Jos napsautat AngularJS-aiheet -linkkiä, alla oleva tulos tulee näkyviin.

Tulos osoittaa selvästi, että

• Kun "Angular JS Topics" -linkkiä napsautetaan, koodissamme ilmoittamamme routeProvider päättää, että Angular.html-koodi tulee lisätä.
• Tämä koodi ruiskutetaan "div"-tunnisteeseen, joka sisältää ng-view-direktiivin. Kurssin kuvauksen sisältö tulee myös "harjoitusmuuttujasta", joka oli osa AngularControllerissa määriteltyä soveltamisalaobjektia.
• Kun napsauttaa Node.js Aiheet, sama tulos tapahtuu, ja Node.js-aiheiden näkymä näytetään.
• Huomaa myös, että sivu URL pysyy samana, vain #-tagin jälkeinen reitti muuttuu. Ja tämä on yksisivuisten sovellusten käsite. #hash-tagi URL on erotinmerkki, joka erottaa reitin (joka tässä tapauksessa on 'Angular', kuten yllä olevassa kuvassa näkyy) ja HTML-pääsivun (Sample.html)

Oletusreitin luominen AngularJS:ssä

AngularJS:n reititys tarjoaa myös mahdollisuuden oletusreitille. Tämä on reitti, joka valitaan, jos olemassa olevaa reittiä ei löydy.

Oletusreitti luodaan lisäämällä seuraava ehto määriteltäessä $routeProvider-palvelua.

Alla oleva syntaksi tarkoittaa yksinkertaisesti uudelleenohjausta toiselle sivulle, jos jokin olemassa olevista reiteistä ei täsmää.

otherwise ({
    redirectTo: 'page'
});

Käytetään samaa yllä olevaa esimerkkiä ja lisätään oletusreitti $routeProvider-palveluumme.

function($routeProvider){
$routeProvider.

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

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

Code Selitys:

1. Tässä käytämme samaa koodia kuin yllä, mutta ainoa ero on, että käytämme muuten lauseketta ja "redirectTo" -vaihtoehtoa määrittääksemme, mikä näkymä ladataan, jos reittiä ei ole määritetty. Meidän tapauksessamme haluamme '/Angular'-näkymän näkyvän.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

Ulostulosta,

• Näet selvästi, että näytettävä oletusnäkymä on kulmikas JS-näkymä.
• Tämä johtuu siitä, että kun sivu latautuu, se siirtyy $routeProvider-funktion "muutoin" -vaihtoehtoon ja lataa "/Angular"-näkymän.

Kuinka käyttää parametreja AngularJS-reitiltä

Angular tarjoaa myös toiminnallisuuden parametrien antamiseen reitityksen aikana. Parametrit lisätään reitin loppuun URLEsimerkiksi http://guru99/index.html#/Angular/1. Tässä kulmareititysesimerkissä

1. , http://guru99/index.html on tärkein sovelluksemme URL
2. #-symboli on erotinmerkki pääsovelluksen ja URL ja reitti.
3. Kulma on reittimme
4. Ja lopuksi '1' on parametri, joka lisätään reittiimme

Parametrien ulkoasun syntaksi URL näkyy alla:

HTMLSivu#/reitti/parametri

Tässä huomaat, että parametri annetaan reitin jälkeen URL.

Joten yllä olevassa AngularJS-reittiesimerkissämme Angular JS -aiheille voimme välittää parametrit alla esitetyllä tavalla

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

Tässä parametrit 1, 2 ja 3 voivat itse asiassa edustaa aihetunnusta.

Katsotaanpa yksityiskohtaisesti, kuinka voimme toteuttaa kulmareitin parametrilla:

Vaihe 1) Lisää seuraava koodi näkymään

1. Lisää taulukko näyttääksesi käyttäjälle kaikki Angular JS -kurssin aiheet
2. Lisää taulukkoon rivi, joka näyttää aiheen ”Ohjaimet”. Vaihda tälle riville href-tagi arvoon ”Angular/1”, mikä tarkoittaa, että kun käyttäjä napsauttaa tätä aihetta, parametri 1 välitetään funktiossa. URL reitin mukana.
3. Lisää taulukkoon rivi, joka näyttää aiheen ”Mallit”. Vaihda tälle riville href-tagi arvoon ”Angular/2”, mikä tarkoittaa, että kun käyttäjä napsauttaa tätä aihetta, parametri 2 välitetään URL reitin mukana.
4. Lisää taulukkoon rivi, joka näyttää aiheen ”Direktiivit”. Vaihda tälle riville href-tagi arvoon ”Angular/3”, mikä tarkoittaa, että kun käyttäjä napsauttaa tätä aihetta, parametri 3 välitetään URL reitin mukana.

Vaihe 2) Lisää aiheen tunnus Routeprovider-palvelutoimintoon
Lisää routeprovider-palvelufunktioon :topicId osoittamaan, että mikä tahansa funktiossa välitetty parametri URL reitin jälkeen tulee asettaa muuttujaan topicId.

Vaihe 3) Lisää tarvittava koodi ohjaimeen

1. Muista ensin lisätä “$routeParams” parametrina, kun määrität ohjainfunktiota. Tällä parametrilla on pääsy kaikkiin reittiparametreihin, jotka välitetään URL.
2. Parametri "routeParams" sisältää viittauksen topicId-objektiin, joka välitetään reittiparametrina. Tässä liitämme '$routeParams.topicId' -muuttujan laajuusobjektiimme muuttujaksi '$scope.tutotialid'. Tämä tehdään niin, että siihen voidaan viitata mielestämme tutorialid-muuttujan kautta.

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

Vaihe 4) Lisää lauseke näytettävään muuttujaan
Lisää lauseke näyttääksesi tutorialid-muuttujan Angular.html-sivulla.

<h2>Anguler</h2>

<br><br>{{tutorialid}}

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

Tulostusnäytössä

• Jos napsautat ensimmäisen aiheen Aiheen tiedot -linkkiä, numero 1 lisätään siihen. URL.
• Angular.JS-reitintarjoajapalvelu käyttää tätä numeroa "routeparam"-argumenttina, ja ohjaimemme voi sitten käyttää sitä.

Angular $route -palvelun käyttäminen

$route-palvelun avulla voit käyttää reitin ominaisuuksia. $route-palvelu on käytettävissä parametrina, kun toiminto on määritelty säätimessä. Yleinen syntaksi siitä, kuinka $route-parametri on saatavilla ohjaimesta, on esitetty alla;

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

1. myApp on angular.JS-moduuli, joka on määritetty sovelluksillesi
2. MyController on sovelluksellesi määritetyn ohjaimen nimi
3. Aivan kuten $scope-muuttuja on saatavilla sovelluksellesi, jota käytetään tietojen välittämiseen ohjaimesta näkymään. $route-parametrilla päästään reitin ominaisuuksiin.

Katsotaanpa, kuinka voimme käyttää $route-palvelua.

Tässä esimerkissä

• Aiomme luoda yksinkertaisen mukautetun muuttujan nimeltä "mytext", joka sisältää merkkijonon "Tämä on kulmikas".
• Aiomme liittää tämän muuttujan reittiimme. Ja myöhemmin aiomme käyttää tätä merkkijonoa ohjaimeltamme käyttämällä $route-palvelua ja sitten käytämme sen jälkeen laajennusobjektia näyttääksemme sen näkymässämme.

Katsotaanpa sitten vaiheet, jotka meidän on suoritettava saavuttaaksemme tämän.

Vaihe 1) Lisää mukautettu avain-arvo-pari reitille. Tässä lisäämme avaimen nimeltä "mytext" ja annamme sille arvon "Tämä on kulmikas".

Vaihe 2) Lisää vastaava koodi ohjaimeen

1. Lisää $route-parametri ohjaintoimintoon. $route-parametri on avainparametri, joka on määritelty kulmassa, jonka avulla voidaan käyttää reitin ominaisuuksia.
2. Reitillä määritettyä "mytext"-muuttujaa pääsee käsiksi $route.current-viittauksen kautta. Tämä määritetään sitten laajuusobjektin "teksti"-muuttujalle. Tekstimuuttujaa voidaan sitten käyttää näkymästä vastaavasti.

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

Vaihe 3) Lisää viittaus laajuusobjektin tekstimuuttujaan lausekkeena. Tämä lisätään Angular.html-sivullemme alla olevan kuvan mukaisesti.

Tämä aiheuttaa tekstin "Tämä on kulmikas" ruiskuttamisen näkymään. Lauseke {{tutorialid}} on sama kuin edellisessä aiheessa ja tämä näyttää numeron '1'.

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

Ulostulosta,

• Näemme, että teksti "Tämä on kulmikas" tulee näkyviin myös, kun napsautamme mitä tahansa taulukon linkkiä. Aihetunnus näkyy myös samaan aikaan tekstin kanssa.

Otetaan käyttöön HTML5-reititys

HTML5-reititystä käytetään pohjimmiltaan puhtaan sisällön luomiseen. URLSe tarkoittaa hashtagin poistamista URLJoten reititys URLs, kun käytetään HTML5-reititystä, näyttäisi alla olevalta

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Tämä konsepti tunnetaan yleensä kauniina esittelynä URL käyttäjälle.

HTML2-reitityksessä on suoritettava kaksi päävaihetta.

1. Määritetään $locationProvider
2. Perustamme suhteellisille linkeille

Katsotaanpa yksityiskohtaisesti, kuinka yllä mainitut vaiheet suoritetaan yllä olevassa esimerkissämme

Vaihe 1) Lisää vastaava koodi kulmamoduuliin

1. Lisää pohjaURL vakio sovellukselle – Tämä on pakollinen HTML5-reititykselle, jotta sovellus tietää sovelluksen perussijainnin.
2. Lisää $locationProvider-palvelut. Tämän palvelun avulla voit määrittää html5-tilan.
3. Aseta $locationProvider-palvelun html5Mode-asetukseksi tosi.

Vaihe 2) Poista kaikki linkkien #tagit ('Angular/1', 'Angular/2', 'Angular/3') helppolukuisen sisällön luomiseksi. 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>

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

Ulostulosta,

• Voit nähdä, että #-tunniste ei ole siellä, kun käytät sovellusta.

Yhteenveto

• Reititystä käytetään esittämään eri näkemyksiä käyttäjälle samalla verkkosivulla. Tämä on pohjimmiltaan se konsepti, jota käytetään yhden sivun sovelluksissa, jotka on toteutettu lähes kaikkiin nykypäivän verkkosovelluksiin
• Angular.JS-reititystä varten voidaan määrittää oletusreitti. Sitä käytetään määrittämään, mikä on oletusnäkymä, joka näytetään käyttäjälle
• Parametrit voidaan välittää reitille seuraavan kautta: URL reittiparametreina. Näitä parametreja käytetään sitten ohjaimen $routeParams-parametrilla.
• $route-palvelua voidaan käyttää määrittämään mukautettuja avainarvopareja reitille, joita voidaan sitten käyttää näkymästä
• HTML5-reititystä käytetään #-tagin poistamiseen reitityksestä URL kulmikkaasti kauniiseen muotoon URL