Ennen kuin aloitamme reitityksen, on vain nopea yleiskatsaus yhden sivun sovelluksista.
Mikä on yhden sivun sovellukset?
Yhden sivun sovellukset tai (SPAs) ovat verkkosovelluksia, jotka lataavat yhden HTML-sivun ja päivittävät sivun dynaamisesti käyttäjän vuorovaikutuksen perusteella verkkosovelluksen kanssa.
Mitä reititys on AngularJS: ssä?
AngularJS: ssä reititys on se, mikä antaa sinun luoda yhden sivun sovelluksia.
- AngularJS-reittien avulla voit luoda erilaisia URL-osoitteita sovelluksesi eri sisällölle.
- AngularJS-reittien avulla yksi voi näyttää useita sisältöjä valitun reitin mukaan.
- Reitti määritetään URL-osoitteessa # -merkin jälkeen.
Otetaan esimerkki sivustosta, jota isännöidään URL-osoitteen http://example.com/index.html kautta .
Tällä sivulla isännöit sovelluksesi pääsivua. Oletetaan, että jos sovellus järjesti tapahtumaa ja halusi nähdä, mitkä näytettävät tapahtumat ovat, tai halusi nähdä tietyn tapahtuman yksityiskohdat tai poistaa tapahtuman. 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äytetään eri reittien (ShowEvent, DisplayEvent ja DeleteEvent) kanssa.
- Joten jos käyttäjä haluaa nähdä kaikki tapahtumat, ne ohjataan linkkiin ( http://example.com/index.html#ShowEvent ), muuten
- Jos he haluavat vain nähdä tietyn tapahtuman, heidät ohjataan uudelleen linkkiin ( http://example.com/index.html#DisplayEvent ) tai
- Jos he haluavat poistaa tapahtuman, heidät ohjataan linkkiin http://example.com/index.html#DeleteEvent .
Huomaa, että pää-URL pysyy samana.
Tässä opetusohjelmassa opit-
- Kulmareitin lisääminen ($ routeProvider)
- Oletusreitin luominen
- Parametrien käyttö reitiltä
- Angular $ -reittipalvelun käyttäminen
- Otetaan HTML5-reititys käyttöön
Kulmareitin lisääminen ($ routeProvider)
Joten kuten aiemmin keskustelimme, AngularJS-reittejä käytetään käyttäjän reitittämiseen sovelluksen eri näkymään. Ja tämä reititys tehdään samalla HTML-sivulla, jotta käyttäjällä on kokemusta siitä, ettei hän ole poistunut sivulta.
Reitityksen toteuttamiseksi seuraavat tärkeimmät vaiheet on toteutettava sovelluksessasi missä tahansa erityisessä järjestyksessä.
- Viittaus kulmareitti.js-tiedostoon. Tämä on Googlen kehittämä JavaScript-tiedosto, jolla on kaikki reitityksen toiminnot. Tämä on lisättävä sovellukseesi, jotta se voi viitata kaikkiin reititykseen tarvittaviin päämoduuleihin.
-
Seuraava tärkeä vaihe on lisätä riippuvuus ngRoute-moduuliin sovelluksestasi. Tämä riippuvuus vaaditaan, jotta reititystoimintoja voidaan käyttää sovelluksessa. Jos tätä riippuvuutta ei lisätä, reititystä ei voida käyttää angular.JS-sovelluksessa.
Alla on tämän lauseen yleinen syntaksit. Tämä on vain normaali moduulin ilmoitus, johon sisältyy ngRoute-avainsana.
var module = angular.module("sampleApp", ['ngRoute']);
- Seuraava askel olisi määrittää $ routeProvider. Tätä vaaditaan sovelluksen eri reittien tarjoamiseksi.
Alla on tämän lausunnon yleinen syntaksi, joka on hyvin itsestään selvä. Siinä todetaan vain, että kun asiaankuuluva polku valitaan, käytä reittiä näyttääksesi annetun näkymän käyttäjälle.
when(path, route)
- Linkit reitillesi HTML-sivulta. Lisää HTML-sivullesi viitteelliset linkit sovelluksen käytettävissä oleville reiteille.
Reitti 1
- Lopuksi olisi sisällytettävä ng-view-direktiivi, joka tavallisesti olisi div-tagissa. Tätä käytetään näkymän sisällön lisäämiseen, kun valitaan asianmukainen reitti.
Katsotaan nyt esimerkkiä reitityksestä käyttämällä edellä mainittuja vaiheita.
Esimerkissämme
Esitämme 2 linkkiä käyttäjälle,
- Yksi on näyttää Angular JS -kurssin aiheet ja toinen Node.js- kurssi.
- Kun käyttäjä napsauttaa kumpaakin linkkiä, kyseisen kurssin aiheet näytetään.
Vaihe 1) Sisällytä kulmareitti-tiedosto komentosarjaviitteeksi.
Tämä reittitiedosto on välttämätön useiden reittien ja näkymien toiminnallisuuden hyödyntämiseksi. Tämä tiedosto voidaan ladata angular.JS-verkkosivustolta.
Vaihe 2) Lisää href-tunnisteita, jotka edustavat linkkejä "Kulmaiset JS-aiheet" ja "Solmu JS-aiheet".
Vaihe 3) Lisää div-tagi ng-view-direktiiviin, joka edustaa näkymää.
Tämä sallii vastaavan näkymän injektoinnin aina, kun käyttäjä napsauttaa joko "Kulmallisia JS-aiheita" tai "Solmun JS-aiheita".
Vaihe 4) Lisää AngularJS-komentotunnisteeseesi "ngRoute-moduuli" ja "$ routeProvider" -palvelu.
Koodin selitys:
- Ensimmäinen vaihe on varmistaa "ngRoute-moduulin" sisällyttäminen. Kun tämä on paikallaan, Angular hoitaa reitityksen automaattisesti sovelluksessasi. Googlen kehittämässä ngRoute-moduulissa on kaikki toiminnot, jotka mahdollistavat reitityksen. Lisäämällä tämän moduulin sovellus ymmärtää automaattisesti kaikki reitityskomennot.
- $ Routeprovider on palvelu, jota kulmikas käyttää kuuntelemaan taustalla kutsuttuja reittejä. Joten kun käyttäjä napsauttaa linkkiä, reititin todistaa tämän ja päättää sitten reitin.
- Luo yksi reitti kulmalinkille - Tämä lohko tarkoittaa, että kun Kulma-linkkiä napsautetaan, injektoi tiedosto Angular.html ja käytä myös ohjainta 'AngularController' minkä tahansa liiketoimintalogiikan käsittelemiseen.
- Luo yksi reitti solmulinkille - Tämä lohko tarkoittaa, että kun solmulinkkiä napsautetaan, injektoi tiedosto Node.html ja käytä myös ohjainta 'NodeController' minkä tahansa liiketoimintalogiikan käsittelyyn.
Vaihe 5) Seuraavaksi on lisättävä ohjaimia sekä AngularControllerin että NodeControllerin liiketoimintalogiikan käsittelemiseksi.
Jokaisessa ohjaimessa luomme joukko avainarvopareja, jotka tallentavat kunkin kurssin aiheiden nimet ja kuvaukset. Taulukko muuttuja 'opetusohjelma' lisätään kunkin ohjaimen laajuusobjektiin.
Event Registration Guru99 Global Event
Vaihe 6) Luo sivut nimeltä Angular.html ja Node.html. Seuraavat vaiheet suoritetaan jokaiselle sivulle.
Nämä vaiheet varmistavat, että kaikki taulukon kaikki avainarvoparit näkyvät jokaisella sivulla.
- Käy läpi ng-repeat-käsky jokaisen opetusmuuttujassa määritetyn avain-arvo-parin läpi.
- Näytetään kunkin avainarvoparin nimi ja kuvaus.
- Kulma.html
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Solmu.html
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Jos napsautat AngularJS Topics -linkkiä, alla oleva tulos näkyy.
Tulos osoittaa selvästi, että
- Kun "Kulmaiset JS-aiheet" -linkkiä napsautetaan, koodissamme ilmoittamamme routeProvider päättää, että Angular.html-koodi tulisi injektoida.
- Tämä koodi injektoidaan "div" -tagiin, joka sisältää ng-view-direktiivin. Kurssikuvauksen sisältö tulee myös "opetusmuuttujasta", joka oli osa AngularControllerissa määriteltyä laajuusobjektia.
- Kun napsautetaan Node.js-aiheita, sama tulos tapahtuu, ja Node.js-aiheiden näkymä ilmenee.
- Huomaa myös, että sivun URL-osoite pysyy samana, se muuttuu vain reitin # tagin jälkeen. Ja tämä on yhden sivun sovellusten käsite. URL-osoitteessa oleva #hash-tunniste on erotin, joka erottaa reitin (joka meidän tapauksessamme on 'kulmikas', kuten yllä olevassa kuvassa näkyy) ja HTML-pääsivun (esimerkki.html).
Oletusreitin luominen
Reititys AngularJS: ssä tarjoaa myös oletusreitin. Tämä on reitti, joka valitaan, jos olemassa olevalle reitille ei löydy vastaavuutta.
Oletusreitti luodaan lisäämällä seuraava ehto määrittäessäsi $ routeProvider -palvelua.
Alla oleva syntakse tarkoittaa yksinkertaisesti uudelleenohjaamista toiselle sivulle, jos jokin olemassa olevista reiteistä ei vastaa toisiaan.
otherwise ({redirectTo: 'page'});
Käytetään samaa esimerkkiä yllä 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'});}]);
Koodin selitys:
- Tässä käytämme samaa koodia kuin yllä, ainoana erona on se, että käytämme muuten lausetta ja "redirectTo" -vaihtoehtoa määrittelemään, mikä näkymä ladataan, jos reittiä ei ole määritetty. Meidän tapauksessamme haluamme, että '/ kulma' -näkymä näytetään.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
- Voit selvästi nähdä, että esitetty oletusnäkymä on kulmainen JS-näkymä.
- Tämä johtuu siitä, että kun sivu latautuu, se siirtyy $ wayProvider -toiminnon muuten -vaihtoehtoon ja lataa '/ Angular' -näkymän.
Parametrien käyttö reitiltä
Kulma tarjoaa myös toiminnon parametrien tarjoamiseksi reitityksen aikana. Parametrit lisätään reitin loppuun URL-osoitteessa, esimerkiksi http: //guru99/index.html#/Angular/1 . Tässä esimerkissä
- , http: //guru99/index.html on tärkein sovelluksen URL-osoite
- Symboli # on erotin sovelluksen pää-URL-osoitteen ja reitin välillä.
- Kulmikas on reittimme
- Ja lopuksi '1' on parametri, joka lisätään reitillemme
Syntaksi siitä, miten parametrit näyttävät URL-osoitteessa, näkyy alla:
HTMLPage # / reitti / parametri
Täällä huomaat, että parametri välitetään reitin jälkeen URL-osoitteessa.
Joten esimerkissämme, kulmien JS-aiheiden yllä, voimme välittää parametrit alla esitetyllä tavalla
Näyte.html # / Kulma / 1
Näyte.html # / Kulma / 2
Näyte.html # / Kulma / 3
Tässä parametrit 1, 2 ja 3 voivat itse asiassa edustaa aihetunnusta.
Katsotaanpa yksityiskohtaisesti, miten voimme toteuttaa tämän.
Vaihe 1) Lisää seuraava koodi näkymään
-
Lisää taulukko, joka näyttää kaikki Angular JS -kurssin aiheet käyttäjälle
-
Lisää taulukon rivi aihe "Ohjaimet". Muuta tälle riville href-tagiksi "Kulma / 1", mikä tarkoittaa, että kun käyttäjä napsauttaa tätä aihetta, parametri 1 välitetään URL-osoitteessa reitin mukana.
-
Lisää taulukon rivi aiheen "Mallit" näyttämistä varten. Muuta tälle riville href-tagiksi "Kulma / 2", mikä tarkoittaa, että kun käyttäjä napsauttaa tätä aihetta, parametri 2 välitetään URL-osoitteessa reitin mukana.
-
Lisää taulukon rivi aihe "Direktiivejä" varten. Vaihda tälle riville href-tagiksi "Kulma / 3", mikä tarkoittaa, että kun käyttäjä napsauttaa tätä aihetta, parametri 3 välitetään URL-osoitteessa reitin mukana.
Vaihe 2) Lisää Routeprovider-palvelutoimintoon: topicId ilmaisemaan, että kaikki URL-osoitteessa reitin jälkeen välitetyt parametrit tulisi määrittää muuttujalle topicId.
Vaihe 3) Lisää tarvittava koodi ohjaimeen
- Varmista, että lisäät ensin "$ routeParams" parametrina määritellessäsi ohjaintoimintoa. Tällä parametrilla on pääsy kaikkiin URL-osoitteessa välitettyihin reittiparametreihin.
- "RouteParams" -parametrilla on viittaus topicId-objektiin, joka välitetään reittiparametrina. Tässä liitämme muuttujan '$ routeParams.topicId' laajuusobjektiimme muuttujana '$ scope.tutotialid'. Tämä tehdään, jotta siihen voidaan viitata näkymässä tutorialid-muuttujan kautta.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Vaihe 4) Lisää lauseke näyttämään tutorialid-muuttuja Angular.html -sivulla.
Anguler
{{tutorialid}}
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Tulostusnäytössä
- Jos napsautat Aiheen tiedot -linkkiä ensimmäisen aiheen kohdalla, numero 1 liitetään URL-osoitteeseen.
- Sitten Angular.JS-reititinpalvelin ottaa tämän numeron "reiteparam" -argumentiksi ja ohjain voi käyttää sitä.
Angular $ -reittipalvelun käyttäminen
$ Route -palvelun avulla voit käyttää reitin ominaisuuksia. $ Route -palvelu on käytettävissä parametrina, kun toiminto on määritetty ohjaimessa. Alla on esitetty yleinen syntaksi siitä, kuinka $ route -parametri on saatavana ohjaimelta;
myApp.controller('MyController',function($scope,$route)
- myApp on sovelluksillesi määritetty kulmainen.JS-moduuli
- MyController on sovelluksellesi määritetyn ohjaimen nimi
- Aivan kuten sovelluksesi käytettävissä on $ scope -muuttuja, jota käytetään siirtämään tietoja ohjaimesta näkymään. Parametriä $ route käytetään reitin ominaisuuksien käyttämiseen.
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 reitillemme. Ja myöhemmin aiomme käyttää tätä merkkijonoa ohjaimestamme $ route -palvelun avulla ja käyttää sitten laajuusobjektia sen näyttämiseksi näkymässämme.
Katsotaan siis vaiheet, jotka meidän on suoritettava tämän saavuttamiseksi.
Vaihe 1) Lisää mukautettu avain-arvo-pari reitille. Tässä lisätään avain nimeltä "mytext" ja annamme sille arvon "Tämä on kulmikas".
Vaihe 2) Lisää asianmukainen koodi ohjaimeen
- Lisää parametri $ route ohjaintoimintoon. $ Route -parametri on kulmissa määritelty avainparametri, jonka avulla voidaan käyttää reitin ominaisuuksia.
- Reitissä määritettyyn "mytext" -muuttujaan pääsee $ route.current -viitteen avulla. Tämä määritetään sitten laajuusobjektin 'text' -muuttujalle. Tekstimuuttujaa voidaan sitten käyttää näkymästä vastaavasti.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Vaihe 3) Lisää viittaus tekstimuuttujaan lausekkeesta laajuusobjekti. Tämä lisätään Angular.html -sivullemme alla olevan kuvan mukaisesti.
Tällöin teksti "Tämä on kulma" lisätään näkymään. Lauseke {{tutorialid}} on sama kuin edellisessä aiheessa, ja siinä näkyy numero 1.
Anguler
{{text}}
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
- Voimme nähdä, että teksti "Tämä on kulmikas" näkyy myös, kun napsautamme mitä tahansa taulukon linkkejä. Aiheen tunnus näkyy myös samanaikaisesti tekstin kanssa.
Otetaan HTML5-reititys käyttöön
HTML5-reititystä käytetään periaatteessa puhtaan URL-osoitteen luomiseen. Se tarkoittaa hashtagin poistamista URL-osoitteesta. Joten reititys-URL-osoitteet, kun käytetään HTML5-reititystä, näkyvät alla esitetyllä tavalla
Näyte.html / kulma / 1
Näyte.html / kulma / 2
Näyte.html / kulma / 3
Tämän konseptin tunnetaan yleensä esittävän käyttäjälle melko URL-osoitetta.
HTML5-reitityksessä on suoritettava 2 päävaihetta.
- Määritetään $ locationProvider
- Pohjan asettaminen suhteellisille linkeille
Tarkastellaan yksityiskohtia siitä, miten yllä mainitut vaiheet suoritetaan yllä olevassa esimerkissä
Vaihe 1) Lisää asianmukainen koodi kulmamoduuliin
- Lisää sovellukseen baseURL-vakio - Tätä vaaditaan HTML5-reitityksessä, jotta sovellus tietää sovelluksen perussijainnin.
- Lisää $ locationProvider -palvelut. Tämän palvelun avulla voit määrittää html5Mode.
- Aseta palvelun $ locationProvider html5Mode arvoksi true.
Vaihe 2) Poista kaikki linkkien #tagit ('Kulma / 1', 'Kulma / 2', 'Kulma / 3'), jotta luot helposti luettavan URL-osoitteen.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
- Voit nähdä, että # tagia ei ole siellä, kun käytät sovellusta.
Yhteenveto
- Reititystä käytetään erilaisten näkymien esittämiseen käyttäjälle samalla verkkosivulla. Tätä periaatetta käytetään yhden sivun sovelluksissa, jotka toteutetaan melkein kaikille nykypäivän verkkosovelluksille
- Oletusreitti voidaan asettaa kulmikas.JS-reititystä varten. 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ääsee sen jälkeen käyttämällä ohjaimessa olevaa parametria $ routeParams
- $ Route -palvelua voidaan käyttää määrittämään mukautetut avainarvoparit reitille, johon pääsee myöhemmin näkymästä
- HTML5-reititystä käytetään poistamaan #tag reititys-URL-osoitteesta kulmikkaasti muodostaakseen kauniin URL-osoitteen