NurgaJS marsruutimine parameetritega: ühe lehe rakenduse näide

Enne marsruutimisega alustamist on meil lihtsalt kiire ülevaade ühe lehe rakendustest.

Mis on ühe lehe rakendused?

Ühe lehe rakendused ehk (SPAs) on veebirakendused, mis laadivad ühe HTML-lehe ja värskendavad lehte dünaamiliselt vastavalt kasutaja suhtlusele veebirakendusega.

Mis on marsruutimine AngularJS-is?

Rakenduses AngularJS võimaldab marsruutimine luua ühe lehe rakendusi.

• AngularJS marsruudid võimaldavad teil luua oma rakenduses erineva sisu jaoks erinevaid URL-e.
• NurgaJS marsruudid võimaldavad ühel kuvada mitut sisu, sõltuvalt valitud marsruudist.
• Marsruut määratakse URL-is pärast # -märki.

Võtame näite saidist, mida hostitakse URL-i http://example.com/index.html kaudu .

Sellel lehel võõrustaksite oma rakenduse avalehte. Oletame, et kui rakendus korraldas sündmust ja soovis näha, mis erinevad kuvatud sündmused on, või soovis näha konkreetse sündmuse üksikasju või sündmuse kustutada. Kui marsruutimine on lubatud, oleks ühe lehe rakenduses kogu see funktsioon saadaval järgmiste linkide kaudu

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

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

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

Sümbolit # kasutatakse koos erinevate marsruutidega (ShowEvent, DisplayEvent ja DeleteEvent).

• Nii et kui kasutaja soovib näha kõiki sündmusi, suunatakse nad lingile ( http://example.com/index.html#ShowEvent ), muule
• Kui nad tahavad lihtsalt mõnda konkreetset sündmust näha, suunatakse nad uuesti lingile ( http://example.com/index.html#DisplayEvent ) või
• Kui nad soovivad sündmuse kustutada, suunatakse nad lingile http://example.com/index.html#DeleteEvent .

Pange tähele, et peamine URL jääb samaks.

Selles õpetuses saate teada

• Nurga marsruudi lisamine ($ routeProvider)
• Vaikimisi marsruudi loomine
• Parameetritele juurdepääs marsruudilt
• Marsruuditeenuse $ kasutamine
• HTML5-marsruudi lubamine

Nurga marsruudi lisamine ($ routeProvider)

Nii nagu me varem arutlesime, kasutatakse AngularJS-i marsruute, et suunata kasutaja teie rakenduse teistsugusele vaatele. Ja see marsruutimine toimub samal HTML-lehel, nii et kasutajal on kogemus, et ta pole lehelt lahkunud.

Marsruutimise juurutamiseks tuleb teie rakenduses rakendada järgmisi peamisi samme kindlas järjekorras.

1. Viide nurk-route.js-le. See on Google'i välja töötatud JavaScripti fail, millel on kõik marsruutimise funktsioonid. See tuleb panna teie rakendusse, et see saaks viidata kõigile marsruutimiseks vajalikele peamistele moodulitele.

2. Järgmine oluline samm on lisada oma rakenduses sõltuvus moodulile ngRoute. See sõltuvus on vajalik marsruudi funktsionaalsuse kasutamiseks rakenduses. Kui seda sõltuvust ei lisata, ei saa nurk.JS-i rakenduses marsruutimist kasutada.

   Allpool on selle avalduse üldine süntaks. See on lihtsalt tavaline mooduli deklaratsioon koos märksõna ngRoute lisamisega.

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

3. Järgmine samm oleks teie $ routeProvider seadistamine. See on vajalik teie rakenduse erinevate marsruutide pakkumiseks.

   Allpool on selle väite üldine süntaks, mis on väga iseenesestmõistetav. See lihtsalt ütleb, et kui valitud on asjakohane tee, kasutage marsruuti, et kuvada kasutajale antud vaade.

when(path, route)

4. Lingid teie marsruudile HTML-lehelt. Lisate oma HTML-lehele viited linkidele oma rakenduse erinevatele saadaolevatele marsruutidele.

 Marsruut 1 

5. Lõpuks oleks ng-view direktiivi lisamine, mis tavaliselt oleks div-sildis. Seda kasutatakse vaate sisu sisestamiseks, kui valitud on asjakohane marsruut.

Nüüd vaatame marsruutimise näidet ülalnimetatud sammude abil.

Meie näites

Esitame kasutajale 2 linki,

• Üks on kuvada Angular JS kursuse teemad ja teine Node.js kursuse jaoks.
• Kui kasutaja klikib kummalgi lingil, kuvatakse selle kursuse teemad.

1. samm. Lisage skripti viiteks nurga marsruudi fail.

See marsruudifail on vajalik mitme marsruudi ja vaate funktsionaalsuse kasutamiseks. Selle faili saab alla laadida veebisaidilt angular.JS.

Samm 2) Lisage hrefi sildid, mis tähistavad linke nurga JS teemadele ja sõlme JS teemadele.

Samm 3) Lisage div-silt ng-view direktiiviga, mis esindab vaadet.

See võimaldab vastava vaate sisestada alati, kui kasutaja klõpsab nuppu "Nurga JS teemad" või "Node JS teemad".

Samm 4) Lisage oma AngularJS-i skriptimärgendisse "ngRoute moodul" ja teenus "$ routeProvider".

Koodi selgitus:

1. Esimene samm on tagada ngRoute mooduli kaasamine. Kui see on paigas, haldab Angular teie rakenduse marsruutimist automaatselt. Google'i välja töötatud moodulil ngRoute on kõik funktsioonid, mis võimaldavad marsruutimist. Selle mooduli lisamisega saab rakendus automaatselt aru kõigist marsruutimiskäskudest.
2. $ Routeprovider on teenus, mida nurgeline kasutab marsruutide, mida kutsutakse, taustal kuulamiseks. Nii et kui kasutaja klõpsab lingil, tuvastab marsruutija selle ja otsustab siis, millist marsruuti valida.
3. Looge nurga lingi jaoks üks marsruut - see plokk tähendab, et kui nurga lingil klõpsatakse, sisestage fail Angular.html ja kasutage mis tahes äriloogika töötlemiseks ka kontrollerit 'AngularController'.
4. Looge sõlme lingi jaoks üks marsruut - see plokk tähendab, et kui linki Node klõpsatakse, sisestage fail Node.html ja kasutage mis tahes äriloogika töötlemiseks ka kontrollerit 'NodeController'.

Samm 5) Järgmine on kontrollerite lisamine nii AngularControlleri kui ka NodeControlleri äriloogika töötlemiseks.

Igas kontrolleris loome võtmeväärtuste paaride massiivi, et salvestada iga kursuse teema nimed ja kirjeldused. Massiivimuutuja 'tutorial' lisatakse iga kontrolleri suleobjekti objektile.

Guru99 Global Event


Angular JS Topics
Node JS Topics

6. samm. Looge lehed nimega Angular.html ja Node.html. Iga lehe jaoks teostame allpool toodud toimingud.

Need toimingud tagavad, et kõik massiivi võtmeväärtuste paarid kuvatakse igal lehel.

1. Kasutades õpetuse ng-repeat käsku iga õppemuutujaga määratletud võtme-väärtuse paari läbimiseks.
2. Iga võtme-väärtuse paari nime ja kirjelduse kuvamine.

• Nurgeline.html

Anguler

Course :  - 

• Sõlm.html

Node

Course :  - 

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Kui klõpsate lingil AngularJS Topics, kuvatakse allpool olev väljund.

Väljund näitab selgelt, et

• Kui klõpsatakse lingil "Nurga JS teemad", otsustab koodis deklareeritud routeProvider, et tuleks sisestada kood Angular.html.
• See kood sisestatakse märgendisse "div", mis sisaldab ng-view direktiivi. Samuti pärineb kursuse kirjelduse sisu "juhendaja muutujast", mis oli osa AngularControlleris määratletud ulatuse objektist.
• Kui klõpsatakse Node.js-i teemadel, toimub sama tulemus ja Node.js-i teemade vaade avaldub.
• Pange tähele, et lehe URL jääb samaks, see muutub ainult marsruudile pärast # märgendit. Ja see on ühe lehe rakenduste mõiste. URL-is olev silt #hash on eraldaja, mis eraldab marsruudi (mis meie puhul on nurgeline, nagu ülaltoodud pildil näidatud) ja peamise HTML-lehe (Näide.html)

Vaikimisi marsruudi loomine

Marsruutimine AngularJS-is annab võimaluse vaikimisi marsruudi seadmiseks. See on marsruut, mis valitakse juhul, kui olemasolev marsruut ei vasta.

Vaikimisi marsruut luuakse teenuse $ routeProvider määratlemisel järgmine tingimus.

Allpool toodud süntaks tähendab lihtsalt ümbersuunamist teisele lehele, kui mõni olemasolevatest marsruutidest ei vasta.

otherwise ({redirectTo: 'page'});

Kasutame sama ülaltoodud näidet ja lisame vaikemarsruudi teenusele $ routeProvider.

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

Koodi selgitus:

1. Siin kasutame sama koodi nagu eespool, ainus erinevus seisneb selles, et me kasutame lauset muidu ja valikut "redirectTo", et määrata, milline vaade tuleks laadida, kui marsruuti pole määratud. Meie puhul soovime, et kuvatakse vaade '/ nurk'.

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Väljundi põhjal

• Näete selgelt, et kuvatav vaikevaade on nurga all olev JS-vaade.
• Seda seetõttu, et lehe laadimisel läheb see funktsiooni $ routeProvider valikule „muidu” ja laaditakse vaade „/ nurk”.

Parameetritele juurdepääs marsruudilt

Nurk pakub funktsiooni ka marsruutimise ajal parameetrite pakkumiseks. Parameetrid lisatakse URL-i marsruudi lõppu, näiteks http: //guru99/index.html#/Angular/1 . Selles näites

1. , http: //guru99/index.html on meie peamine rakenduse URL
2. Sümbol # on eraldaja rakenduse peamise URL-i ja marsruudi vahel.
3. Nurk on meie marsruut
4. Ja lõpuks on '1' parameeter, mis lisatakse meie marsruudile

Parameetrite URL-is kuvamise süntaks on näidatud allpool:

HTMLPage # / marsruut / parameeter

Siin märkate, et parameeter edastatakse pärast marsruuti URL-is.

Nii et meie ülaltoodud nurk-JS-i teemade näites võime parameetri edastada, nagu allpool näidatud

Näide.html # / nurk / 1

Näide.html # / nurk / 2

Näide.html # / nurk / 3

Siin võivad parameetrid 1, 2 ja 3 tegelikult esindada teemasid.

Vaatame üksikasjalikult, kuidas seda rakendada.

Samm 1) Lisage oma vaade järgmine kood

1. Lisage tabel, et kuvada kasutajale kõik nurk JS-i kursuse teemad

2. Lisage tabeli rida teema "Kontrollerid" kuvamiseks. Selle rea jaoks muutke hrefi märgendiks "Nurk / 1", mis tähendab, et kui kasutaja sellel teemal klõpsab, edastatakse parameeter 1 URL-is koos marsruudiga.

3. Lisage tabelirida teema "Mudelid" kuvamiseks. Selle rea jaoks muutke hrefi märgendiks "Nurga / 2", mis tähendab, et kui kasutaja sellel teemal klõpsab, edastatakse parameeter 2 URL-is koos marsruudiga.

4. Lisage tabelirida teema "Direktiivid" kuvamiseks. Selle rea jaoks muutke hrefi märgendiks "Nurk / 3", mis tähendab, et kui kasutaja sellel teemal klõpsab, edastatakse parameeter 3 URL-is koos marsruudiga.

Samm 2) Routeprovider-teenuse funktsioonis lisage: topicId tähistamaks, et kõik URL-is pärast marsruuti edastatud parameetrid tuleks omistada muutujale topicId.

Samm 3) Lisage kontrollerile vajalik kood

1. Kontrolleri funktsiooni määratlemisel lisage kõigepealt parameetriks "$ routeParams". Sellel parameetril on juurdepääs kõigile URL-is edastatud marsruudi parameetritele.
2. Parameetril "routeParams" on viide objektile topicId, mis edastatakse marsruudi parameetrina. Siin kinnitame muutuja '$ routeParams.topicId' oma ulatusobjekti juurde muutujana '$ scope.tutotialid'. Seda tehakse selleks, et sellele saaks meie vaates viidata muutuja tutorialid kaudu.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

4. samm. Lisage avaldis, et kuvada muutuja tutorialid lehel Angular.html.

Anguler

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Väljundiekraanil

• Kui klõpsate esimese teema lingil Teema üksikasjad, lisatakse URL-ile number 1.
• Seejärel võtab Angular.JS marsruutija teenus selle numbri argumendiks "ruuteparam" ja sellele pääseb juurde meie kontroller.

Marsruuditeenuse $ kasutamine

Marsruudi teenus $ võimaldab teil pääseda juurde marsruudi omadustele. Marsruudi teenus $ on saadaval parameetrina, kui funktsioon on kontrolleris määratletud. Allpool on näidatud üldine süntaks, kuidas $ route parameeter kontrollerilt saadaval on;

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

1. myApp on teie rakenduste jaoks määratletud nurgeline.JS-moodul
2. MyController on teie rakenduse jaoks määratletud kontrolleri nimi
3. Täpselt nagu teie rakenduse jaoks on saadaval muutuja $ scope, mida kasutatakse teabe edastamiseks kontrollerist vaatesse. Parameetrit $ route kasutatakse marsruudi omadustele juurdepääsuks.

Vaatame, kuidas saaksime marsruuditeenust $ kasutada.

Selles näites

• Loome lihtsa kohandatud muutuja nimega "mytext", mis sisaldab stringi "See on nurgeline".
• Me kavatseme selle muutuja oma marsruudile lisada. Hiljem pääseme sellele stringile juurde oma kontrollerilt teenuse $ route abil ja seejärel kasutame selle objekti kuvamiseks oma vaate objekti.

Vaatame siis samme, mida peame selle saavutamiseks tegema.

Samm 1) Lisage marsruudile kohandatud võtmeväärtuste paar. Siia lisame võtme nimega "mytext" ja määrame sellele väärtuse "See on nurgeline".

Samm 2) Lisage kontrollerile vastav kood

1. Lisage kontrolleri funktsioonile parameeter $ route. Parameeter $ route on nurkades määratletud põhiparameeter, mis võimaldab juurdepääsu marsruudi omadustele.
2. Marsruudil määratletud muutujale "mytext" pääseb juurde viite $ route.current kaudu. Seejärel määratakse see ulatuse objekti muutujale „text”. Tekstimuutujale saab seejärel vastavalt vaate juurde pääseda.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Samm 3) Lisage avaldisena viide objekti muutujale objekti ulatusest. See lisatakse meie Angular.html lehele, nagu allpool näidatud.

See sisestab vaate teksti "See on nurgeline". Avaldis on sama, mis eelmises teemas, ja see kuvab numbri '1'.

Anguler

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Väljundi põhjal

• Näeme, et teksti "See on nurgeline" kuvatakse ka siis, kui klõpsame tabelis mõnel lingil. Teema ID kuvatakse ka tekstiga samal ajal.

HTML5-marsruudi lubamine

HTML5-marsruutimist kasutatakse põhiliselt puhta URL-i loomiseks. See tähendab räsimärgi eemaldamist URL-ist. Nii et HTML5-marsruudi kasutamisel kuvatakse marsruutimise URL-id allpool näidatult

Näide.html / nurk / 1

Näide.html / nurgeline / 2

Näide.html / nurgeline / 3

Seda mõistet tuntakse tavaliselt kui URL-i esitamist kasutajale.

HTML5 marsruutimisel tuleb läbi viia kaks peamist sammu.

1. $ LocationProvideri seadistamine
2. Meie suhteliste linkide aluse määramine

Uurime üksikasjalikult, kuidas ülaltoodud samme ülaltoodud näites läbi viia

Samm 1) Lisage nurkmoodulile vastav kood

1. Rakendusele lisage konstant baseURL - see on vajalik HTML5-marsruudi jaoks, et rakendus teaks, mis on rakenduse baasasukoht.
2. Lisage teenused $ locationProvider. See teenus võimaldab teil määratleda html5Mode.
3. Määrake teenuse $ locationProvider html5Mode väärtuseks true.

2. samm. Eemaldage kõik linkide # sildid ('Nurk / 1', 'Nurk / 2', 'Nurk / 3'), et luua hõlpsasti loetav URL.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Väljundi põhjal

• Rakendusele juurdepääsemisel näete, et märgendit # pole olemas.

Kokkuvõte

• Marsruutimist kasutatakse erinevate vaadete esitamiseks kasutajale samal veebilehel. Põhimõtteliselt kasutatakse seda mõistet ühe lehe rakendustes, mida rakendatakse peaaegu kõigi tänapäevaste veebirakenduste jaoks
• Nurga.JS marsruutimiseks saab seadistada vaikimisi marsruudi. Seda kasutatakse selleks, et määrata, milline on vaikevaade, mida kasutajale kuvatakse
• Parameetreid saab marsruudile suunata URL-i kaudu marsruudi parameetritena. Nendele parameetritele pääseb seejärel juurde kontrolleris parameetri $ routeParams abil
• Marsruudi teenust $ saab kasutada kohandatud võtmeväärtuste paaride määramiseks marsruudil, millele saab seejärel vaates siseneda
• HTML5-marsruutimist kasutatakse #tagi eemaldamiseks marsruudi URL-ist nurga all, et moodustada ilus URL