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.

Mitä on reititys AngularJS:ssä?

Reititys AngularJS:ssä on menetelmä, jonka avulla voit luoda yhden sivun sovelluksia. Sen avulla voit luoda erilaisia ​​URL-osoitteita verkkosovellustesi eri sisällölle. AngularJS-reititys auttaa myös näyttämään useita sisältöjä valitun reitin mukaan. Se määritetään URL-osoitteessa #-merkin jälkeen.

Otetaan esimerkki sivustosta, jota isännöidään URL-osoitteen kautta 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ää-URL-osoite 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 Googlen kehittämä tiedosto, jossa on kaikki reititystoiminnot. Tämä on sijoitettava sovellukseesi, jotta se voi viitata kaikkiin reitittämiseen 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']);
  1. 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)
  1. Linkit reitille HTML-sivultasi. Lisäät HTML-sivullesi viitelinkkejä sovelluksessasi oleville eri reiteille.
<a href="#/route1">Route 1</a><br/>
  1. 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.

AngularJS-reititys

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

AngularJS-reititys

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

AngularJS-reititys

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

AngularJS-reititys

Koodin selitys:

  1. Ensimmäinen askel on varmistaa "ngRoute-moduulin" sisällyttäminen. Kun tämä on paikallaan, Angular käsittelee automaattisesti reitityksen sovelluksessasi. Googlen kehittämässä ngRoute-moduulissa on kaikki toiminnot, jotka mahdollistavat reitityksen. Kun lisäät tämän moduulin, 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.

AngularJS-reititys

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

AngularJS-reititys

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

AngularJS-reititys

<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ö:

AngularJS-reititys

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

AngularJS-reititys

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ä sivun URL-osoite pysyy samana, vain #-tunnisteen jälkeinen reitti muuttuu. Ja tämä on yksisivuisten sovellusten käsite. URL-osoitteen #hash-tunniste on erotin, joka erottaa reitin (joka tässä tapauksessa on "kulma", kuten yllä olevassa kuvassa näkyy) ja HTML-pääsivun (Sample.html)

AngularJS-reititys

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.

Oletusreitin luominen AngularJS:ssä

function($routeProvider){
$routeProvider.

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

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

Koodin 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ö:

Oletusreitin luominen AngularJS:ssä

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 toiminnot parametrien antamiseen reitityksen aikana. Parametrit lisätään URL-osoitteen reitin loppuun, esim. http://guru99/index.html#/Angular/1. Tässä kulmareititysesimerkissä

  1. , http://guru99/index.html on pääsovelluksemme URL-osoite
  2. #-symboli on pääsovelluksen URL-osoitteen ja reitin välinen erotin.
  3. Kulma on reittimme
  4. Ja lopuksi '1' on parametri, joka lisätään reittiimme

Alla näkyy syntaksi, jolla parametrit näyttävät URL-osoitteessa:

HTMLSivu#/reitti/parametri

Tässä huomaat, että parametri välitetään URL-osoitteen reitin jälkeen.

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ää taulukkorivi aiheen "Ohjaimet" näyttämistä varten. Vaihda tämän rivin href-tunnisteeksi "Angular/1", mikä tarkoittaa, että kun käyttäjä napsauttaa tätä aihetta, parametri 1 välitetään URL-osoitteessa reitin mukana.
  3. Lisää taulukkorivi aiheen "Mallit" näyttämistä varten. Muuta tämän rivin href-tunnisteeksi "Angular/2", mikä tarkoittaa, että kun käyttäjä napsauttaa tätä aihetta, parametri 2 välitetään URL-osoitteessa reitin mukana.
  4. Lisää taulukkorivi aiheen "Direktiivit" näyttämistä varten. Muuta tämän rivin href-tunnisteeksi "Angular/3", mikä tarkoittaa, että kun käyttäjä napsauttaa tätä aihetta, parametri 3 välitetään URL-osoitteessa reitin mukana.

Käytä parametreja AngularJS-reitiltä

Vaihe 2) Lisää aiheen tunnus Routeprovider-palvelutoimintoon
Lisää routeprovider-palvelutoimintoon:topicId, joka osoittaa, että mikä tahansa URL-osoitteessa reitin jälkeen välitetty parametri tulee liittää muuttujaan topicId.

Käytä parametreja AngularJS-reitiltä

Vaihe 3) Lisää tarvittava koodi ohjaimeen

  1. Muista lisätä ensin "$routeParams" parametriksi, kun määrität ohjaintoimintoa. Tällä parametrilla on pääsy kaikkiin URL-osoitteessa välitettyihin reittiparametreihin.
  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.

Käytä parametreja AngularJS-reitiltä

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

Käytä parametreja AngularJS-reitiltä

<h2>Anguler</h2>

<br><br>{{tutorialid}}

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

lähtö:

Käytä parametreja AngularJS-reitiltä

Tulostusnäytössä

  • Jos napsautat Aiheen tiedot -linkkiä ensimmäisen aiheen kohdalla, numero 1 liitetään URL-osoitteeseen.
  • 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".

Kulmareittipalvelu

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.

Kulmareittipalvelu

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

Kulmareittipalvelu

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

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

lähtö:

Kulmareittipalvelu

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 periaatteessa puhtaan URL-osoitteen luomiseen. Se tarkoittaa hashtagin poistamista URL-osoitteesta. Joten reititys-URL-osoitteet näyttäisivät alla olevan kuvan mukaisesti, kun käytetään HTML5-reititystä

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Tämä konsepti tunnetaan tavallisesti kauniin URL-osoitteen esittämisenä 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ää sovellukseen baseURL-vakio – Tätä tarvitaan HTML5-reitityksessä, jotta sovellus tietää, mikä sovelluksen perussijainti on.
  2. Lisää $locationProvider-palvelut. Tämän palvelun avulla voit määrittää html5-tilan.
  3. Aseta $locationProvider-palvelun html5Mode-asetukseksi tosi.

Otetaan käyttöön HTML5-reititys

Vaihe 2) Poista linkeistä kaikki #tagit ('Angular/1', 'Angular/2', 'Angular/3') luodaksesi helppolukuisen URL-osoitteen.

Otetaan käyttöön HTML5-reititys

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

Otetaan käyttöön HTML5-reititys

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 URL-osoitteen kautta reittiparametreina. Näihin parametreihin päästään sitten käyttämällä ohjaimen parametria $routeParams
  • $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 reititys-URL-osoitteesta kulmikkaassa muodossa kauniin URL-osoitteen muodostamiseksi