„AngularJS“ maršrutas su parametrais: vieno puslapio taikymo pavyzdys

Prieš pradėdami nuo maršruto parinkimo, tiesiog turėkime trumpą vieno puslapio programų apžvalgą.

Kas yra vieno puslapio programos?

Vieno puslapio programos arba (SPA) yra žiniatinklio programos, įkeliančios vieną HTML puslapį ir dinamiškai atnaujinančios puslapį, atsižvelgiant į vartotojo sąveiką su žiniatinklio programa.

Kas yra maršruto parinkimas „AngularJS“?

„AngularJS“ maršrutas yra tai, kas leidžia kurti vieno puslapio programas.

• „AngularJS“ maršrutai leidžia jums sukurti skirtingus URL skirtingam jūsų programos turiniui.
• „AngularJS“ maršrutai leidžia rodyti kelis turinius, priklausomai nuo pasirinkto maršruto.
• Maršrutas nurodomas URL po ženklu #.

Paimkime iš svetainės, kuri vyko per URL pavyzdį http://example.com/index.html .

Šiame puslapyje priglobsite pagrindinį savo programos puslapį. Tarkime, jei programa organizavo renginį ir norėjo sužinoti, kokie yra įvairūs rodomi įvykiai, ar norėjo pamatyti išsamią informaciją apie konkretų įvykį arba ištrinti įvykį. Vieno puslapio programoje, kai maršrutas įgalintas, visa ši funkcija bus pasiekiama per šias nuorodas

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

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

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

Simbolis # bus naudojamas kartu su skirtingais maršrutais (ShowEvent, DisplayEvent ir DeleteEvent).

• Taigi, jei vartotojas norėtų pamatyti visus įvykius, jis būtų nukreiptas į nuorodą ( http://example.com/index.html#ShowEvent ), dar daugiau
• Jei jie norėtų tiesiog pamatyti konkretų įvykį, jie būtų nukreipti į nuorodą ( http://example.com/index.html#DisplayEvent ) arba
• Jei jie norėtų ištrinti įvykį, jie būtų nukreipti į nuorodą http://example.com/index.html#DeleteEvent .

Atminkite, kad pagrindinis URL lieka tas pats.

Šioje pamokoje sužinosite

• Kampinio maršruto pridėjimas ($ routeProvider)
• Numatytojo maršruto kūrimas
• Prieiga prie parametrų iš maršruto
• Naudojantis „Angular $ route“ paslauga
• Įgalinamas HTML5 maršrutas

Kampinio maršruto pridėjimas ($ routeProvider)

Taigi, kaip jau aptarėme anksčiau, „AngularJS“ maršrutai naudojami norint nukreipti vartotoją į kitą jūsų programos vaizdą. Šis maršrutas atliekamas tame pačiame HTML puslapyje, kad vartotojas patirtų, jog neišėjo iš puslapio.

Norint įgyvendinti maršrutą, jūsų programoje turi būti atlikti šie pagrindiniai žingsniai bet kokia konkrečia tvarka.

1. Nuoroda į kampinį maršrutą.js. Tai yra „Google“ sukurtas „JavaScript“ failas, turintis visas maršruto parinkimo funkcijas. Tai reikia įdėti į jūsų programą, kad ji galėtų pateikti nuorodą į visus pagrindinius modulius, kurie reikalingi nukreipiant.

2. Kitas svarbus žingsnis - pridėti priklausomybę „ngRoute“ moduliui iš jūsų programos. Šios priklausomybės reikia, kad programoje būtų galima naudoti maršruto parinkimo funkciją. Jei ši priklausomybė nebus pridėta, tada nebus galima naudoti maršruto nustatymo „angular.JS“ programoje.

   Žemiau pateikiama bendra šio teiginio sintaksė. Tai tik įprasta modulio deklaracija, įtraukiant raktinį žodį ngRoute.

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

3. Kitas žingsnis bus konfigūruoti „$ routeProvider“. Tai reikalinga norint pateikti įvairius maršrutus jūsų programoje.

   Žemiau pateikiama bendra šio teiginio sintaksė, kuri yra savaime suprantama. Jame tik teigiama, kad pasirinkus atitinkamą kelią, naudokite maršrutą, kad vartotojui būtų rodomas pateiktas rodinys.

when(path, route)

4. Nuorodos į jūsų maršrutą iš HTML puslapio. Savo HTML puslapyje pridėsite nuorodas į įvairius galimus maršrutus jūsų programoje.

 1 maršrutas 

5. Galiausiai būtų įtraukta direktyva „ng-view“, kuri paprastai būtų žymoje „div“. Tai būtų naudojama norint įterpti rodinio turinį, kai pasirenkamas atitinkamas maršrutas.

Dabar pažvelkime į maršruto, naudojant aukščiau nurodytus veiksmus, pavyzdį.

Mūsų pavyzdyje

Pateiksime 2 nuorodas vartotojui,

• Vienas iš jų yra „ Angular JS“ kurso temų rodymas , kitas - „ Node.js“ kurso tema.
• Vartotojui spustelėjus bet kurią nuorodą, bus rodomos to kurso temos.

1 žingsnis. Įtraukite kampinio maršruto failą kaip scenarijaus nuorodą.

Šis maršruto failas yra būtinas norint pasinaudoti kelių maršrutų ir rodinių funkcijomis. Šį failą galima atsisiųsti iš angular.JS svetainės.

2 žingsnis) Pridėkite „href“ žymų, kurios žymės nuorodas į „Angular JS Topics“ ir „Node JS Topics“.

3 žingsnis) Pridėkite „div“ žymą su „ng-view“ direktyva, kuri atspindės rodinį.

Tai leis įterpti atitinkamą vaizdą, kai vartotojas spusteli „Kampuotas JS temas“ arba „Mazgo JS temas“.

4 žingsnis) Į „AngularJS“ scenarijaus žymą pridėkite „ngRoute modulį“ ir paslaugą „$ routeProvider“.

Kodo paaiškinimas:

1. Pirmiausia reikia užtikrinti, kad būtų įtrauktas „ngRoute modulis“. Kai tai bus nustatyta, „Angular“ automatiškai tvarkys jūsų programos maršrutą. „Google“ sukurtas „ngRoute“ modulis turi visas funkcijas, leidžiančias atlikti maršrutą. Pridėjus šį modulį, programa automatiškai supras visas maršruto parinkimo komandas.
2. „$ Routeprovider“ yra paslauga, kuria kampu naudojamasi išklausytiems maršrutams fone. Taigi vartotojui spustelėjus nuorodą, maršruto parinkėjas tai aptiks ir nuspręs, kurį maršrutą pasirinkti.
3. Sukurkite vieną maršrutą kampiniam ryšiui - šis blokas reiškia, kad spustelėjus nuorodą Kampinis, suleiskite failą Angular.html ir naudokite valdiklį „AngularController“ bet kuriai verslo logikai apdoroti.
4. Sukurkite vieną nuorodos „Node“ maršrutą - šis blokas reiškia, kad spustelėjus nuorodą „Node“, įšvirkškite failą Node.html ir taip pat naudokite valdiklį „NodeController“ bet kuriai verslo logikai apdoroti.

5 žingsnis. Toliau reikia pridėti valdiklius, kad būtų apdorota „AngularController“ ir „NodeController“ verslo logika.

Kiekviename valdiklyje kuriame svarbiausių verčių porų masyvą, kuriame saugomi kiekvieno kurso temų pavadinimai ir aprašai. Masyvo kintamasis „pamoka“ pridedamas prie kiekvieno valdiklio srities objekto.

Guru99 Global Event


Angular JS Topics
Node JS Topics

6 žingsnis) Sukurkite puslapius, vadinamus Angular.html ir Node.html. Kiekvienam puslapiui atliekame toliau nurodytus veiksmus.

Šie veiksmai užtikrins, kad kiekviename puslapyje būtų rodomos visos masyvo raktų ir verčių poros.

1. Naudodamiesi „ng-repeat“ direktyva pereikite kiekvieną pagrindinės vertės porą, apibrėžtą mokymo kintamajame.
2. Rodomas kiekvienos raktų ir vertės poros pavadinimas ir aprašymas.

• Kampinis.html

Anguler

Course : {{ptutor.Name}} - {{ptutor.Description}}

• Mazgas.html

Node

Course : {{ptutor.Name}} - {{ptutor.Description}}

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

Spustelėjus nuorodą „AngularJS Topics“, bus rodomas žemiau pateiktas rezultatas.

Rezultatas aiškiai rodo, kad

• Spustelėjus nuorodą „Kampinės JS temos“, maršrute teikėjas, kurį deklaravome savo kode, nusprendžia, kad Angular.html kodas turėtų būti įvestas.
• Šis kodas bus įterptas į „div“ žymą, kurioje yra „ng-view“ direktyva. Be to, kurso aprašymo turinys gaunamas iš „pamokos kintamojo“, kuris buvo „AngularController“ apibrėžto srities objekto dalis.
• Spustelėjus „Node.js“ temas, bus tas pats rezultatas ir bus parodytas „Node.js“ temų rodinys.
• Be to, atkreipkite dėmesį, kad puslapio URL lieka tas pats, keičiasi tik maršrutas po žymos #. Tai yra vieno puslapio programų koncepcija. #Hash žyma URL yra skyriklis, atskiriantis maršrutą (kuris mūsų atveju yra „Kampinis“, kaip parodyta aukščiau esančiame paveikslėlyje) ir pagrindinį HTML puslapį (Sample.html)

Numatytojo maršruto kūrimas

Maršruto parinkimas „AngularJS“ taip pat suteikia galimybę numatytąjį maršrutą. Tai maršrutas, kuris pasirenkamas, jei nėra esamo maršruto atitikties.

Numatytasis maršrutas sukuriamas pridedant šią sąlygą apibrėžiant paslaugą $ routeProvider.

Žemiau pateikta sintaksė tiesiog reiškia peradresavimą į kitą puslapį, jei kuris nors iš esamų maršrutų neatitinka.

otherwise ({redirectTo: 'page'});

Panaudokime tą patį pavyzdį aukščiau ir pridėkime numatytąjį maršrutą į savo „$ routeProvider“ paslaugą.

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

Kodo paaiškinimas:

1. Čia mes naudojame tą patį kodą kaip ir aukščiau, vienintelis skirtumas yra tas, kad mes naudojame kitaip teiginį ir parinktį "redirectTo", norėdami nurodyti, kuris rodinys turėtų būti įkeltas, jei nenurodytas maršrutas. Mūsų atveju norime, kad būtų rodomas „/ kampinis“ vaizdas.

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

Iš išvesties

• Jūs aiškiai matote, kad numatytasis rodinys yra kampinis JS vaizdas.
• Taip yra todėl, kad įkeliant puslapį jis eina į „kitaip“ funkciją $ routeProvider ir įkelia rodinį „/ kampinis“.

Prieiga prie parametrų iš maršruto

„Angular“ taip pat suteikia funkciją teikti parametrus maršruto metu. Parametrai pridedami prie maršruto pabaigos URL, pavyzdžiui, http: //guru99/index.html#/Angular/1 . Šiame pavyzdyje

1. , http: //guru99/index.html yra pagrindinis mūsų programos URL
2. Simbolis # yra atskyriklis tarp pagrindinio programos URL ir maršruto.
3. Kampinis yra mūsų maršrutas
4. Galiausiai „1“ yra parametras, kuris pridedamas prie mūsų maršruto

Sintaksė, kaip parametrai atrodo URL, rodoma žemiau:

HTMLPage # / route / parametras

Čia pastebėsite, kad parametras perduodamas po maršruto URL.

Taigi aukščiau pateiktame „Angular JS“ temų pavyzdyje galime perduoti parametrus, kaip parodyta žemiau

Pavyzdys.html # / kampinis / 1

Pavyzdys.html # / kampinis / 2

Pavyzdys.html # / kampinis / 3

Čia 1, 2 ir 3 parametrai iš tikrųjų gali atspindėti temą.

Pažiūrėkime išsamiai, kaip mes galime tai įgyvendinti.

1 žingsnis. Pridėkite šį kodą prie savo rodinio

1. Pridėkite lentelę, kad vartotojui būtų rodomos visos „Angular JS“ kurso temos

2. Pridėkite lentelės eilutę, kad būtų rodoma tema „Valdikliai“. Šioje eilutėje pakeiskite „href“ žymą į „Kampinis / 1“, o tai reiškia, kad vartotojui spustelėjus šią temą, parametras 1 bus perduotas URL kartu su maršrutu.

3. Pridėkite lentelės eilutę, kurioje rodoma tema „Modeliai“. Šioje eilutėje pakeiskite „href“ žymą į „Kampinis / 2“, o tai reiškia, kad vartotojui spustelėjus šią temą, parametras 2 bus perduotas URL kartu su maršrutu.

4. Pridėkite lentelės eilutę, kurioje rodoma tema „Direktyvos“. Šioje eilutėje pakeiskite „href“ žymą į „Kampinis / 3“, o tai reiškia, kad vartotojui spustelėjus šią temą, parametras 3 bus perduotas URL kartu su maršrutu.

2 žingsnis) „Routeprovider“ paslaugos funkcijoje pridėkite: topicId, kad pažymėtumėte, jog bet koks parametras, perduotas URL po maršruto, turėtų būti priskirtas kintamajam topicId.

3 žingsnis) Pridėkite reikiamą kodą prie valdiklio

1. Apibrėždami valdiklio funkciją, kaip parametrą pirmiausia pridėkite „$ routeParams“. Šis parametras turės prieigą prie visų maršruto parametrų, perduotų URL.
2. Parametras „routeParams“ turi nuorodą į objektą topicId, kuris perduodamas kaip maršruto parametras. Čia prie savo taikymo srities objekto pridedame kintamąjį „$ routeParams.topicId“ kaip kintamąjį „$ scope.tutotialid“. Tai daroma tam, kad į mūsų rodinį būtų galima nurodyti per kintamąjį tutorialid.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

4 žingsnis) Pridėkite išraišką, kad „Angular.html“ puslapyje būtų rodomas „tutorialid“ kintamasis.

Anguler


{{tutorialid}}

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

Išvesties ekrane

• Jei spustelėsite pirmosios temos nuorodą Temos informacija, numeris 1 bus pridėtas prie URL.
• Tada „Angular.JS“ maršrutizatoriaus tarnyba šį numerį priims kaip „routeparam“ argumentą ir prie jo galės prisijungti mūsų valdiklis.

Naudojantis „Angular $ route“ paslauga

$ Maršruto paslauga leidžia jums pasiekti maršruto ypatybes. „Route“ paslauga yra prieinama kaip parametras, kai funkcija yra apibrėžta valdiklyje. Toliau parodyta sintaksė, kaip valdiklis gali gauti parametrą $ route;

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

1. „myApp“ yra kampinis.JS modulis, apibrėžtas jūsų programoms
2. „MyController“ yra valdiklio, apibrėžto jūsų programai, pavadinimas
3. Panašiai kaip jūsų programai yra prieinamas kintamasis $ sritis, naudojamas perduoti informaciją iš valdiklio į rodinį. Parametras $ route naudojamas norint pasiekti maršruto ypatybes.

Pažvelkime, kaip mes galime naudotis $ route paslauga.

Šiame pavyzdyje

• Kursime paprastą pasirinktinį kintamąjį, vadinamą „mytext“, kuriame bus eilutė „This is angle“.
• Šį kintamąjį ketiname pridėti prie savo maršruto. Vėliau mes eisime prie šios eilutės iš savo valdiklio naudodami „$ route“ paslaugą ir vėliau naudosime srities objektą, kad tai parodytume mūsų rodinyje.

Taigi, pažiūrėkime žingsnius, kuriuos turime atlikti, kad tai pasiektume.

1 žingsnis) Įtraukite pasirinktą raktų ir verčių porą į maršrutą. Čia pridedame raktą, vadinamą „mytext“, ir priskiriame jam reikšmę „Tai yra kampinis“.

2 žingsnis) Pridėkite atitinkamą kodą prie valdiklio

1. Prie valdiklio funkcijos pridėkite parametrą $ route. $ Maršruto parametras yra pagrindinis kampu apibrėžtas parametras, leidžiantis pasiekti maršruto ypatybes.
2. Maršrute apibrėžtą „mytext“ kintamąjį galima pasiekti naudojant nuorodą $ route.current. Tada jis priskiriamas srities objekto kintamajam „text“. Tada teksto kintamąjį galima atitinkamai pasiekti iš rodinio.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

3 žingsnis) Pridėkite nuorodą į teksto kintamąjį iš srities objekto kaip išraišką. Tai bus pridėta prie mūsų Angular.html puslapio, kaip parodyta žemiau.

Dėl to į rodinį bus įterptas tekstas „Tai yra kampinis“. Išraiška {{tutorialid}} yra tokia pati kaip ir ankstesnėje temoje, todėl bus rodomas skaičius „1“.

Anguler


{{text}}

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

Iš išvesties

• Matome, kad tekstas „Tai kampinis“ taip pat rodomas spustelėjus bet kurią lentelėje esančią nuorodą. Temos ID taip pat rodomas tuo pačiu metu kaip ir tekstas.

Įgalinamas HTML5 maršrutas

HTML5 maršrutas iš esmės naudojamas kuriant švarų URL. Tai reiškia grotažymės pašalinimą iš URL. Taigi maršruto URL, kai naudojamas HTML5 maršrutas, pasirodys taip, kaip parodyta žemiau

Pavyzdys.html / kampinis / 1

Pavyzdys.html / kampinis / 2

Pavyzdys.html / kampinis / 3

Ši sąvoka paprastai žinoma kaip pateikianti vartotojui gražų URL.

Yra du pagrindiniai žingsniai, kuriuos reikia atlikti nukreipiant HTML5.

1. Konfigūruojama „$ locationProvider“
2. Mūsų santykinių nuorodų bazės nustatymas

Panagrinėkime išsamią informaciją apie tai, kaip atlikti pirmiau minėtus veiksmus aukščiau pateiktame pavyzdyje

1 žingsnis) Pridėkite reikiamą kodą prie kampinio modulio

1. Prie programos pridėkite konstanta „baseURL“ - to reikia norint nukreipti HTML5, kad programa žinotų, kokia yra programos pagrindinė vieta.
2. Pridėkite „$ locationProvider“ paslaugas. Ši paslauga leidžia apibrėžti „html5Mode“.
3. Nustatykite „$ locationProvider“ paslaugos „html5Mode“ tiesą.

2 žingsnis) Pašalinkite visus nuorodų # žymes („Kampinis / 1“, „Kampinis / 2“, „Kampinis / 3“), kad sukurtumėte lengvai skaitomą URL.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

Išvestis:

Iš išvesties

• Jūs galite pamatyti, kad # žymos nėra, kai naudojatės programa.

Santrauka

• Maršrutizavimas naudojamas norint pateikti skirtingus rodinius vartotojui tame pačiame tinklalapyje. Iš esmės tai yra koncepcija, naudojama vieno puslapio programose, kurios yra įgyvendinamos beveik visoms šiuolaikinėms žiniatinklio programoms
• Numatytąjį maršrutą galima nustatyti kampiniam.JS maršrutui. Jis naudojamas nustatyti, koks bus numatytasis rodinys, kuris bus rodomas vartotojui
• Parametrai gali būti perduodami maršrutui per URL kaip maršruto parametrai. Šie parametrai vėliau pasiekiami naudojant valdiklyje esantį parametrą $ routeParams
• „Route“ paslauga gali būti naudojama nustatant pasirinktines maršruto raktų ir reikšmės poras, kurias vėliau galima pasiekti iš rodinio
• HTML5 maršrutas naudojamas norint pašalinti #tag iš nukreipimo URL kampu, kad susidarytų gražus URL