AngularJs-reititys parametreilla

Ennen kuin tarkastelemme reitityksen toimintaa AngularJS:ssä, on hyödyllistä ymmärtää, millaiseen sovelluksen reititys on rakennettu. Alla oleva osio asettaa tämän kontekstin, ja jokainen seuraava tekniikka perustuu siihen.

Mitä yksisivuiset sovellukset ovat?

Yksisivuiset sovellukset eli SPA:t ovat verkkosovelluksia, jotka lataavat yhden HTML-sivun ja päivittävät sitä dynaamisesti käyttäjän ollessa vuorovaikutuksessa sen kanssa. Sen sijaan, että SPA pyytäisi palvelimelta uutta dokumenttia jokaisella napsautuksella, se vaihtaa vain sivun muuttuneen osan.

Tuo suunnittelu luo yhden ongelman. Jos selain ei koskaan siirry uuteen dokumenttiin, osoiterivi ei koskaan muutu, joten käyttäjä ei voi lisätä näyttöä kirjanmerkkeihin, jakaa sitä tai käyttää takaisin-painiketta. Reititys ratkaisee juuri tämän ongelman.

Mitä on reititys AngularJS:ssä?

Reititys AngularJS:ssä on menetelmä, jonka avulla voit luoda yksisivuisia sovelluksia. Sen avulla voit luoda erilaisia URLs eri sisällölle verkkosovelluksissasi. AngularJS-reititys auttaa myös näyttämään useita sisältöjä valitusta reitistä riippuen. Se on määritetty URL #-merkin jälkeen.

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

Tämä sivu isännöi sovelluksesi päänäyttöä. Oletetaan, että sovellus järjestää tapahtuman ja käyttäjä haluaa listata tapahtumat, tarkastella yhtä tapahtumaa yksityiskohtaisesti tai poistaa sen. Yhden sivun sovelluksessa, jossa reititys on käytössä, kaikki tämä on saatavilla seuraavien linkkien kautta.

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

• Käyttäjää ohjataan näkemään kaikki tapahtumat osoitteeseen http://example.com/index.html#ShowEvent
• Nähdäkseen tietyn tapahtuman heidät ohjataan http://example.com/index.html#DisplayEvent
• Tapahtuman poistamiseksi heidät ohjataan osoitteeseen http://example.com/index.html#DeleteEvent

Huomaa, että pääasiallinen URL pysyy samana. Vain #-merkin jälkeinen fragmentti muuttuu, ja AngularJS tarkkailee tätä fragmenttia. Kun konsepti on vakiintunut, seuraava osio käsittelee osia, jotka on kytkettävä yhteen ennen kuin mikään toimii.

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

Kuten aiemmin käsiteltiin, reitit angularjs käytetään käyttäjän reitittämiseen sovelluksesi toiseen näkymään. Tämä reititys tehdään samalla HTML-sivulla, joten käyttäjällä on kokemus, ettei hän ole poistunut sivulta.

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

1. Viittaa tiedostoon angular-route.js. Tämä JavaKäsikirjoitus tiedosto, kehittänyt Google, sisältää kaikki reititystoiminnot ja se on sisällytettävä, jotta sovellus voi viitata moduulien reititystarpeisiin.
2. Lisää sovelluksestasi riippuvuus ngRoute-moduuliin. Ilman tätä riippuvuutta reititystä ei voida käyttää AngularJS-sovelluksessa lainkaan.

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. Määritä $routeProvider. Tämä tarjoaa sovelluksesi eri reitit, ja syntaksi yksinkertaisesti sanoo, että kun asiaankuuluva polku on valittu, reittiä käytetään annetun näkymän näyttämiseen.

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.

💡 Vinkki: Kaikki viisi vaihetta ovat pakollisia. Puuttuva angular-route.js-viittaus on yleisin syy siihen, miksi reitti ei tee mitään hiljaisesti, koska $routeProvider-muuttujaa ei ole olemassa ilman sitä. Seuraavassa osiossa kaikki viisi vaihetta yhdistetään toimivaksi esimerkiksi.

Esimerkki AngularJS-reitityksestä

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

AngularJS-reititysesimerkissämme parametreilla

• Yksi linkki näyttää aiheet angularjs 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 useiden reittien ja näkymien toimintoja voidaan hyödyntää. Tiedoston voi ladata AngularJS:n 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. Sisällytä ”ngRoute-moduuli”. Tämän avulla Angular käsittelee reitityksen automaattisesti ja ymmärtää kaikki reitityskomennot.
2. $routeProvider on palvelu, joka kuuntelee taustalla kutsuttuja reittejä. Kun käyttäjä napsauttaa linkkiä, se havaitsee tämän ja päättää, mitä reittiä valitaan.
3. Luo yksi reitti Angular-linkille: kun sitä klikataan, lisää Angular.html ja käytä 'AngularController'-logiikkaa.
4. Luo yksi reitti Node-linkille, joka injektoi Node.html-tiedoston ja käyttää 'NodeController'-objektia samalla tavalla.

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

Jokaiseen ohjaimeen luomme avain-arvo-pareista koostuvan taulukon, johon tallennetaan kunkin kurssin aiheiden nimet ja kuvaukset. Taulukkomuuttuja 'tutorial' lisätään kunkin ohjaimen scope-objektiin.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
<ul>
<li><a href="#!/Angular">Angular JS Topics</a></li>
<li><a href="#!/Node">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"}
  ];
});

// NodeController follows the same shape with Node.js topics
sampleApp.controller('NodeController', function($scope) {
  $scope.tutorial = [{Name: "Promises", Description: "Power of Promises"}];
});
</script>
</body>
</html>

⚠️ Korjaukset tehty. <title> lappu istui sisällä <body>, chrset="UTF 8" oli kirjoitettu väärin, toinen linkki osoitti #Node.html rekisteröidyn reitin sijaan /Node, ja mallipolut sisälsivät alkuviivan, joka ratkeaa verkkotunnuksen juuresta.

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äyttäen ng-repeat direktiivi käydä läpi kaikki tutoriaalimuuttujassa määritellyt avain-arvo-parit.
2. Näyttää kunkin avain-arvo-parin nimen ja kuvauksen.

• Kulma.html

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

• Node.html — identtinen yllä olevan listan kanssa, otsikko on muutettu muotoon ”Solmu”. Molemmat mallit lukevat samalla tavalla tutorial muuttuja, jonka kukin ohjain syöttää omasta laajuusalueestaan.

⚠️ korjaus: Alkuperäisen Angular.html-tiedoston otsikko oli ”Anguler”. Oikeinkirjoitus on korjattu yllä.

Jos koodi suoritetaan onnistuneesti, seuraava tuloste näkyy, kun suoritat koodisi selaimessa.

lähtö:

Jos napsautat AngularJS Topics -linkkiä, alla oleva tuloste 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 reitin (joka tässä tapauksessa on 'Angular') ja HTML-pääsivun (Sample.html) välillä.

Esimerkki toimii vain, kun käyttäjä napsauttaa rekisteröityä reittiä vastaavaa linkkiä. Seuraavassa osiossa käsitellään, mitä pitäisi tapahtua, kun mikään ei vastaa reitin osumia.

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.

sampleApp.config(['$routeProvider',
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ä, ainoana erona se, että käytämme otherwise-lauseketta ja "redirectTo"-optiota määrittääksemme, mikä näkymä ladataan, jos reittiä ei ole määritetty. Tässä tapauksessa haluamme näytettävän '/Angular'-näkymän.

Jos koodi suoritetaan onnistuneesti, seuraava tuloste näkyy, kun suoritat koodisi selaimessa.

lähtö:

Ulostulosta,

• Voit selvästi nähdä, että oletusnäkymä on AngularJS-näkymä.
• Tämä johtuu siitä, että kun sivu latautuu, se siirtyy $routeProvider-funktion "muutoin" -vaihtoehtoon ja lataa "/Angular"-näkymän.

Oletusreitti määrittää, mikä näkymä ladataan. Seuraavassa osiossa käsitellään, kuinka yksi reitti voi palvella useita tietueita siirtämällä arvon URL.

Kuinka käyttää parametreja AngularJS-reitiltä

Angular tarjoaa myös toiminnallisuuden parametrien välittämiseen 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

Yleinen syntaksi on HTMLSivu#/reitti/parametri, joten aiemmista aiheista tulee Sample.html#/Angular/1, #/Angular/2 ja #/Angular/3, jossa numero on aiheen id.

Katsotaanpa tarkemmin, miten voimme toteuttaa Angular-reitin parametrilla.

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

1. Lisää taulukko, joka näyttää käyttäjälle kaikki Angular JS -kurssin aiheet.
2. Lisää taulukkoon rivi, joka näyttää aiheen ”Ohjaimet”. Aseta tälle riville href-tunniste arvoon ”#!/Angular/1”, jotta aiheen napsauttaminen välittää parametrin 1. URL reitin mukana.
3. Lisää rivi aiheelle ”Mallit” ja aseta href-tagi arvoon ”#!/Angular/2”, jotta parametri 2 kulkee URL.
4. Lisää rivi aiheelle ”Direktiivit”, jonka href-tunniste on asetettu arvoon ”#!/Angular/3”, jotta parametri 3 kulkee URL.

Vaihe 2) Lisää aiheen tunnus routeProvider-palvelufunktioon
Lisää routeProvider-palvelufunktioon :topicId paikkamerkki, joka osoittaa, että mikä tahansa parametri välitetään URL reitin jälkeen tulee asettaa muuttujaan topicId.

Vaihe 3) Lisää tarvittava koodi ohjaimeen

1. Muista ensin lisätä parametriksi ”$routeParams”, kun määrität ohjainfunktiota. Tällä parametrilla on pääsy kaikkiin reittiparametreihin, jotka välitetään URL.
2. ”$routeParams” sisältää reitissä välitetyn aihetunnuksen. Liittäminen $routeParams.topicId soveltamisalaan kuten $scope.tutorialid tekee sen saataville näkymässä tutorialid-tunnuksena.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
<tbody>
<tr><td>1</td><td>Controllers</td>
<td><a href="#!/Angular/1">Topic details</a></td></tr>
<!-- rows 2 and 3 repeat with /Angular/2 and /Angular/3 -->
</tbody>
</table>
<div ng-view></div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams',
function($scope, $routeParams) {
  $scope.tutorialid = $routeParams.topicId;
}]);
</script>
</body>
</html>

⚠️ Korjaukset tehty. Alkuperäisessä käytettiin kirjainta l numeron sijaan 1 in href="#Angular/l", jätti pois ng-view säilö, joten mallipohjalla ei ollut paikkaa renderöidä, ja se latautui angular-route.js ennen angular.min.js, joka heittää moduulivirheen.

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

<h2>Angular</h2>

<br><br>{{tutorialid}}

Jos koodi suoritetaan onnistuneesti, seuraava tuloste näkyy, kun suoritat koodisi selaimessa.

lähtö:

Tulostusnäytössä

• Jos napsautat ensimmäisen aiheen Aiheen tiedot -linkkiä, numero 1 lisätään siihen. URL.
• Tuo numero otetaan ”routeParams”-argumenttina ja siitä tulee käytettävissä ohjaimessa.

Parametrin lukeminen on suoraviivaista. Seuraavaksi käsiteltävän ominaisuuden tehtävänä on hakea parametrin tunnistama tietue ennen näkymän avautumista.

Datan esilataaminen resolve-ominaisuudella

Edellisessä osiossa oleva ohjain lukee aiheen tunnuksen ja näyttää sen välittömästi. Todellisten sovellusten on ensin noudettava tietue palvelimelta, ja jos näkymä renderöidään ennen pyynnön palauttamista, käyttäjä näkee tyhjän mallineen, joka täyttyy hetkeä myöhemmin. resolve ominaisuus poistaa tuon tyhjän sisällön välähdyksen.

Jokainen avain sisällä resolve Objekti on riippuvuus, jonka AngularJS valmistelee ennen reitin aktivointia. Jos arvo on promise, reititin odottaa sen täyttymistä. Vasta kun jokainen promise on ratkaistu, AngularJS luo ohjaimen instanssin ja renderöi mallineen, ja ratkaistut arvot syötetään ohjaimeen nimellä, aivan kuten minkä tahansa muun palvelun tapauksessa.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController',
    resolve: {
      // The router waits for this promise before rendering
      topic: ['$http', '$route', function($http, $route) {
        var id = $route.current.params.topicId;
        return $http.get('/api/topics/' + id).then(function(response) {
          return response.data;
        });
      }]
    }
  });
}]);

// 'topic' is injected already resolved, so no loading state is needed
sampleApp.controller('AngularController', ['$scope', 'topic',
function($scope, topic) {
  $scope.topic = topic;
}]);

Kaksi käyttäytymistä on tässä tärkeä. Hylätty lupaus peruu reitinmuutoksen ja jättää selaimen nykyiseen näkymään, joten epäonnistunut pyyntö ei koskaan tuota rikkinäistä sivua. Koska reititin kuitenkin estää lupauksen odottamisen, hidas päätepiste saa sovelluksen näyttämään jumiutuneelta. resolve edistymisindikaattorilla, jota ohjaa $routeChangeStart ja $routeChangeSuccess Tapahtumat.

⚠️ Varoitus: Älä koskaan aseta todennustarkistuksia vain sisälle resolveReitin hylkääminen piilottaa näkymän, mutta ei suojaa sen takana olevia tietoja, ja API-päätepisteen on silti valvottava pääsyä palvelimelle.

Datan esilataamisen lisäksi reitti voi sisältää myös staattisia konfiguraatioarvoja. Seuraavaksi kuvataan, miten ohjain lukee ne.

Angular $route -palvelun käyttäminen

$route-palvelun avulla voit käyttää reitin ominaisuuksia. $route-palvelu on käytettävissä parametrina, kun funktio on määritelty ohjaimessa. Yleinen syntaksi siitä, miten $route-parametri on käytettävissä ohjaimessa, on esitetty alla.

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

1. myApp on sovelluksellesi määritelty AngularJS-moduuli.
2. MyController on sovelluksellesi määritetyn ohjaimen nimi.
3. Aivan kuten $scope välittää tietoa ohjaimelta näkymään, $route paljastaa nykyisen reitin ominaisuudet.

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

Tässä esimerkissä

• Aiomme luoda yksinkertaisen mukautetun muuttujan nimeltä "mytext", joka sisältää merkkijonon "Tämä on kulmikas".
• Liitämme tämän muuttujan reittiimme. Later Aiomme käyttää tätä merkkijonoa ohjaimestamme $route-palvelun avulla ja näyttää sen sitten scope-objektin avulla.

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ää asiaankuuluva koodi ohjaimeen.

1. Lisää $route-parametri ohjainfunktioon. $route-parametri on Angularissa määritelty avainparametri, jonka avulla voi 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.

// Only the config and controller change; the page markup is unchanged
sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    mytext: "This is angular",   // custom key attached to the route
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams', '$route',
function($scope, $routeParams, $route) {
  $scope.tutorialid = $routeParams.topicId;
  $scope.text = $route.current.mytext;
}]);

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>Angular</h2>

<br><br>{{text}}
<br><br>{{tutorialid}}

Jos koodi suoritetaan onnistuneesti, seuraava tuloste näkyy, kun suoritat koodisi 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.

Joka URL tähän mennessä näytetyssä muodossa on edelleen #-symboli. Viimeisessä määritysvaiheessa se poistetaan.

Otetaan käyttöön HTML5-reititys

HTML5-reititystä käytetään puhtaiden tiedostojen luomiseen URLs. Se 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ä kauniin esittelynä URL käyttäjälle.

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

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

Katsotaanpa yksityiskohtaisesti, miten yllä mainitut vaiheet suoritetaan esimerkissämme.

Vaihe 1) Lisää asiaankuuluva koodi Angular-moduuliin.

1. Lisää <base> tagin dokumentin otsikkoon. Tämä on pakollinen HTML5-reititykselle, jotta sovellus tietää sovelluksen perussijainnin.
2. Lisää $locationProvider-palvelu. Tämän palvelun avulla voit määrittää html5Mode-tilan.
3. Aseta $locationProvider-palvelun html5Mode-asetukseksi tosi.

Vaihe 2) Poista kaikki linkkien #-tunnisteet ('Angular/1', 'Angular/2', 'Angular/3') luodaksesi helppolukuisen sisällön. URLs.

<!-- In the head: required by html5Mode so relative templates resolve -->
<base href="/">

<!-- In the body: the # is dropped from every link -->
<a href="Angular/1">Topic details</a>

<script>
sampleApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);
</script>

⚠️ korjaus: alkuperäinen julisti a baseUrl vakio-osoitus paikalliseen IDE-polkuun, jolla ei ole vaikutusta html5Mode-tilaan. AngularJS lukee perussijainnin <base href> tag. Alkuperäinen myös ruiskutti $locationProvider soittamatta kertaakaan html5Mode(true), joten tiivistettä ei koskaan poistettu.

Jos koodi suoritetaan onnistuneesti, seuraava tuloste näkyy, kun suoritat koodisi selaimessa.

lähtö:

Ulostulosta,

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

Kaikki yllä oleva käyttää ngRoutea, AngularJS-tiimin toimittamaa reititintä. Se ei ole ainoa vaihtoehto, ja alla oleva vertailu selittää, milloin vaihtoehto on parempi.

ngRoute vs. ui-router: Kumman reitittimen valita

ngRoutea ylläpitää AngularJS-tiimi, ja se vastaa URL suoraan yhteen mallipohjaan ja ohjaimeen. ui-router on yhteisöprojekti, joka on rakennettu poistamaan ngRouten tärkein rajoitus: se vastaa sovelluksessa olivat sen sijaan, että URL yksinään, mikä sallii yhden näytön sisältävän useita itsenäisesti reititettyjä alueita.

Valitse ngRoute, kun jokainen URL kartoitetaan yhdeksi koko sivun näkymäksi, koska se ei tarvitse ylimääräistä riippuvuutta ja koko API mahtuu yhdelle sivulle. Valitse ui-router, kun näytössä on itsenäisesti navigoitavia ruutuja tai kun alinäkymien on käytettävä uudelleen päänäkymän lataamaa dataa. Myöhemmin siirtyminen on mahdollista, mutta ei yksinkertaista, koska tilojen nimet korvaavat URL kuvioita kaikissa malleissa.

Yleisiä AngularJS-reititysvirheitä ja niiden korjaaminen

Useimmat reititysvirheet aiheuttavat tyhjän ng-näkymän konsolivirheen sijaan, mikä tekee niiden diagnosoinnista vaikeampaa kuin pitäisi. Jokainen alla oleva oire nimeää syyn ja ratkaisun.

• Tuntematon tarjoaja: $routeProvider: angular-route.js-tiedostoa ei koskaan ladattu tai se ladattiin ennen angular.min.js-tiedostoa. Katso ensin ydinkirjastoa.
• Näkymä pysyy tyhjänä ilman virheitä: Mikään elementti ei kanna ng-view-direktiiviä, joten mallineella ei ole paikkaa renderöidä.
• Mikään ei lataudu ensimmäisellä käynnillä: Yksikään reitti ei vastaa tyhjää polkua. Lisää muuten-lohko, jossa on redirectTo-arvo.
• $routeParams on tyhjä: Kuviosta puuttuu kaksoispisteen paikkamerkki. Sen on oltava muotoa '/Angular/:topicId'.
• Mallit 404 html5Moden jälkeen: Määritä palvelin kirjoittamaan uudelleen yhteensopimattomat polut perussivulle ja varmista, että perus-href-tagi on läsnä.
• Ohjain ei koskaan suorita uudelleen: vain parametri muuttui, joten AngularJS käytti ohjaininstanssia uudelleen sen uudelleenrakentamisen sijaan. Kuuntele $routeUpdate-tapahtumaa sen sijaan, että luottaisit ohjainfunktion käynnistymiseen uudelleen.

UKK