AngularJS maršrutēšana ar parametriem: vienas lapas piemērs

Pirms mēs sākam ar maršrutēšanu, ļaujiet mums vienkārši iegūt ātru pārskatu par vienas lapas lietojumprogrammām.

Kas ir vienas lapas lietojumprogrammas?

Vienas lapas lietojumprogrammas jeb (SPA) ir tīmekļa lietojumprogrammas, kas ielādē vienu HTML lapu un dinamiski atjaunina lapu, pamatojoties uz lietotāja mijiedarbību ar tīmekļa lietojumprogrammu.

Kas ir maršrutēšana AngularJS?

Programmā AngularJS maršruts ir tas, kas ļauj jums izveidot vienas lapas lietojumprogrammas.

• AngularJS maršruti ļauj jums izveidot dažādus vietrāžus URL savam lietojumprogrammas saturam.
• AngularJS maršruti ļauj vienam rādīt vairāku saturu atkarībā no izvēlētā maršruta.
• Maršruts ir norādīts URL aiz zīmes #.

Ņemsim piemēru vietnei, kas tiek mitināta, izmantojot vietrādi URL http://example.com/index.html .

Šajā lapā jūs mitinātu savas lietojumprogrammas galveno lapu. Pieņemsim, ja lietojumprogramma organizēja notikumu un vēlējās redzēt, kādi ir dažādi parādītie notikumi, vai arī vēlaties redzēt detalizētu informāciju par konkrētu notikumu vai izdzēst notikumu. Ja vienas lapas lietojumprogrammā ir iespējota maršrutēšana, visa šī funkcionalitāte būs pieejama, izmantojot šīs saites

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

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

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

Simbols # tiks izmantots kopā ar dažādiem maršrutiem (ShowEvent, DisplayEvent un DeleteEvent).

• Tātad, ja lietotājs vēlas redzēt visus notikumus, tie tiek novirzīti uz saiti ( http://example.com/index.html#ShowEvent ), cits
• Ja viņi vēlas redzēt tikai konkrētu notikumu, viņi tiek novirzīti uz saiti ( http://example.com/index.html#DisplayEvent ) vai
• Ja viņi vēlas dzēst notikumu, viņi tiek novirzīti uz saiti http://example.com/index.html#DeleteEvent .

Ņemiet vērā, ka galvenais URL paliek nemainīgs.

Šajā apmācībā jūs uzzināsiet

• Leņķiskā maršruta pievienošana ($ routeProvider)
• Noklusējuma maršruta izveide
• Piekļuve parametriem no maršruta
• Izmantojot Angular $ maršruta pakalpojumu
• HTML5 maršrutēšanas iespējošana

Leņķiskā maršruta pievienošana ($ routeProvider)

Tātad, kā mēs iepriekš apspriedām, maršruti AngularJS tiek izmantoti, lai novirzītu lietotāju uz citu jūsu lietojumprogrammas skatu. Un šī maršrutēšana tiek veikta tajā pašā HTML lapā, lai lietotājam būtu pieredze, ka viņš nav atstājis lapu.

Lai ieviestu maršrutēšanu, lietojumprogrammā jebkurā konkrētā secībā ir jāievieš šādas galvenās darbības.

1. Atsauce uz leņķa-maršrutu.js. Šis ir Google izstrādāts JavaScript fails, kuram ir visas maršrutēšanas funkcionalitātes. Tas jāievieto jūsu lietojumprogrammā, lai tā varētu atsaukties uz visiem galvenajiem moduļiem, kas nepieciešami maršrutēšanai.

2. Nākamais svarīgais solis ir pievienot atkarību no ngRoute moduļa no jūsu lietojumprogrammas. Šī atkarība ir nepieciešama, lai maršrutēšanas funkcionalitāti varētu izmantot lietojumprogrammā. Ja šī atkarība netiek pievienota, nevarēs izmantot maršrutēšanu lietojumprogrammā angular.JS.

   Zemāk ir šī apgalvojuma vispārējā sintakse. Tas ir tikai parasts moduļa paziņojums ar atslēgvārda ngRoute iekļaušanu.

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

3. Nākamais solis būtu konfigurēt savu $ routeProvider. Tas ir nepieciešams, lai nodrošinātu dažādus maršrutus jūsu lietojumprogrammā.

   Zemāk ir šī apgalvojuma vispārējā sintakse, kas ir ļoti pašsaprotama. Tas tikai norāda, ka, izvēloties attiecīgo ceļu, izmantojiet maršrutu, lai parādītu lietotājam norādīto skatu.

when(path, route)

4. Saites uz jūsu maršrutu no jūsu HTML lapas. HTML lapā jūs pievienosiet atsauces saites uz dažādiem pieejamiem maršrutiem jūsu lietojumprogrammā.

 1. maršruts 

5. Visbeidzot, būtu jāiekļauj direktīva ng-view, kas parasti atrodas div tagā. To izmantos, lai ievadītu skata saturu, kad tiek izvēlēts attiecīgais maršruts.

Tagad aplūkosim maršrutēšanas piemēru, izmantojot iepriekš minētās darbības.

Mūsu piemērā

Mēs parādīsim 2 saites lietotājam,

• Viens ir parādīt tēmas Angular JS kursam, bet otrs - Node.js kursam.
• Kad lietotājs noklikšķina uz jebkuras saites, tiks parādītas šī kursa tēmas.

1. solis. Iekļaujiet leņķa maršruta failu kā skripta atsauci.

Šis maršruta fails ir nepieciešams, lai izmantotu vairāku maršrutu un skatu funkcijas. Šo failu var lejupielādēt vietnē angular.JS.

2. solis. Pievienojiet href tagus, kas pārstāv saites uz "Angular JS Topics" un "Node JS Topics".

3. solis. Pievienojiet tagu ng-view direktīvai, kas attēlos skatu.

Tas ļaus injicēt atbilstošo skatu ikreiz, kad lietotājs noklikšķina uz "Stūra JS tēmas" vai "Mezglu JS tēmas".

4. solis. AngularJS skripta tagā pievienojiet "ngRoute moduli" un pakalpojumu "$ routeProvider".

Koda skaidrojums:

1. Vispirms ir jānodrošina "ngRoute moduļa" iekļaušana. Kad tas ir uzstādīts, Angular automātiski apstrādās maršrutēšanu jūsu lietojumprogrammā. Google izstrādātajam modulim ngRoute ir visas funkcijas, kas ļauj veikt maršrutēšanu. Pievienojot šo moduli, lietojumprogramma automātiski sapratīs visas maršrutēšanas komandas.
2. $ Routeprovider ir pakalpojums, ko leņķiski izmanto, lai fonā klausītos izsauktos maršrutus. Tātad, kad lietotājs noklikšķina uz saites, maršruta nodrošinātājs to konstatē un pēc tam izlemj, kuru maršrutu izvēlēties.
3. Izveidojiet vienu maršrutu leņķiskajai saitei - šis bloks nozīmē, ka, noklikšķinot uz saites Leņķa, injicējiet failu Angular.html un izmantojiet arī kontrolleri 'AngularController', lai apstrādātu jebkuru biznesa loģiku.
4. Izveidojiet vienu maršrutu saitei Mezgls - šis bloks nozīmē, ka, noklikšķinot uz saites Mezgls, injicējiet failu Node.html un izmantojiet arī kontrolleri 'NodeController', lai apstrādātu jebkuru biznesa loģiku.

5. solis. Nākamais ir kontrolieru pievienošana, lai apstrādātu biznesa loģiku gan AngularController, gan NodeController.

Katrā kontrolierī mēs izveidojam galveno vērtību pāru masīvu, lai katram kursam saglabātu tēmu nosaukumus un aprakstus. Masīva mainīgais “apmācība” tiek pievienots katra kontrollera darbības jomas objektam.

Guru99 Global Event


Angular JS Topics
Node JS Topics

6. solis) Izveidojiet lapas ar nosaukumu Angular.html un Node.html. Katrai lapai mēs veicam tālāk norādītās darbības.

Šīs darbības nodrošinās, ka visi masīva atslēgas vērtību pāri tiek parādīti katrā lapā.

1. Izmantojot direktīvu ng-repeat, lai izietu katru atslēgu un vērtību pāri, kas definēti apmācības mainīgajā.
2. Parāda katra atslēgu un vērtību pāra nosaukumu un aprakstu.

• Stūrveida.html

Anguler

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

• Mezgls.html

Node

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

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

Noklikšķinot uz saites AngularJS Topics, tiks parādīta zemāk redzamā izeja.

Rezultāts skaidri parāda, ka

• Kad tiek noklikšķināts uz saites "Angular JS Topics", maršrutā Provider, kuru mēs norādījām mūsu kodā, tiek nolemts ievadīt kodu Angular.html.
• Šis kods tiks ievadīts tagā "div", kas satur direktīvu ng-view. Arī kursa apraksta saturs nāk no "apmācības mainīgā", kas bija daļa no AngularController definētā darbības jomas objekta.
• Noklikšķinot uz Node.js tēmām, tiks sasniegts tas pats rezultāts, un tiks parādīts skats tēmām Node.js.
• Ievērojiet arī to, ka lapas URL paliek nemainīgs, mainās tikai maršruts aiz taga #. Un tas ir vienas lapas lietojumu jēdziens. URL tags #hash ir atdalītājs, kas atdala maršrutu (kas mūsu gadījumā ir “leņķisks”, kā parādīts iepriekš attēlā) un galveno HTML lapu (Sample.html).

Noklusējuma maršruta izveide

Maršrutēšana AngularJS nodrošina iespēju iestatīt noklusējuma maršrutu. Šis ir maršruts, kuru izvēlas, ja esošajam maršrutam nav atbilstības.

Noklusējuma maršruts tiek izveidots, pievienojot šādu nosacījumu, nosakot pakalpojumu $ routeProvider.

Zemāk esošā sintakse vienkārši nozīmē novirzīt uz citu lapu, ja kāds no esošajiem maršrutiem neatbilst.

otherwise ({redirectTo: 'page'});

Izmantosim to pašu piemēru iepriekš un pievienosim noklusējuma maršrutu mūsu pakalpojumam $ routeProvider.

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

Koda skaidrojums:

1. Šeit mēs izmantojam to pašu kodu kā iepriekš, un vienīgā atšķirība ir tā, ka mēs izmantojam paziņojumu citādi un opciju "redirectTo", lai norādītu, kurš skats ir jāielādē, ja nav norādīts maršruts. Mūsu gadījumā mēs vēlamies, lai tiktu parādīts skats “/ leņķiskais”.

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

No izejas

• Jūs skaidri redzat, ka parādītais noklusējuma skats ir leņķiskais JS skats.
• Tas ir tāpēc, ka, ielādējot lapu, funkcija $ routeProvider pāriet uz opciju “citādi” un ielādē skatu “/ leņķis”.

Piekļuve parametriem no maršruta

Angular nodrošina arī funkcionalitāti parametru nodrošināšanai maršrutēšanas laikā. Parametri tiek pievienoti URL maršruta beigās, piemēram, http: //guru99/index.html#/Angular/1 . Šajā piemērā

1. , http: //guru99/index.html ir mūsu galvenais lietojumprogrammas URL
2. Simbols # ir atdalītājs starp galveno lietojumprogrammas URL un maršrutu.
3. Leņķiskais ir mūsu maršruts
4. Visbeidzot, “1” ir parametrs, kas tiek pievienots mūsu maršrutam

Sintakse par parametru izskatu URL ir parādīta zemāk:

HTMLPage # / route / parametrs

Šeit jūs pamanīsit, ka parametrs tiek pārsūtīts aiz maršruta URL.

Tātad mūsu piemērā, kas attiecas uz leņķa JS tēmām, mēs varam nodot parametrus, kā parādīts zemāk

Sample.html # / Angular / 1

Sample.html # / Angular / 2

Sample.html # / Angular / 3

Šeit 1, 2 un 3 parametri faktiski var atspoguļot topicid.

Apskatīsim detalizēti, kā mēs to varam īstenot.

1. darbība. Pievienojiet skatam šādu kodu

1. Pievienojiet tabulu, lai lietotājam parādītu visas Angular JS kursa tēmas

2. Pievienojiet tabulas rindu, lai parādītu tēmu "Vadītāji". Šajā rindā mainiet href tagu uz "Angular / 1", kas nozīmē, ka, kad lietotājs noklikšķina uz šīs tēmas, 1. parametrs tiks nodots URL kopā ar maršrutu.

3. Pievienojiet tabulas rindu, lai parādītu tēmu "Modeļi". Šajā rindā mainiet href tagu uz "Angular / 2", kas nozīmē, ka, kad lietotājs noklikšķina uz šīs tēmas, 2. parametrs tiks nodots URL kopā ar maršrutu.

4. Pievienojiet tabulas rindu, lai parādītu tēmu "Direktīvas". Šajā rindā mainiet href tagu uz "Angular / 3", kas nozīmē, ka tad, kad lietotājs noklikšķina uz šīs tēmas, 3. parametrs tiks nodots URL kopā ar maršrutu.

2. solis . Routeprovider pakalpojuma funkcijā pievienojiet: topicId, lai apzīmētu, ka jebkurš parametrs, kas pēc maršruta tiek pārsūtīts URL, ir jāpiešķir mainīgajam topicId.

3. solis) Pievienojiet kontrolierim nepieciešamo kodu

1. Nosakot kontroliera funkciju, noteikti kā parametru vispirms pievienojiet "$ routeParams". Šim parametram būs piekļuve visiem maršruta parametriem, kas ievadīti URL.
2. Parametram "routeParams" ir atsauce uz objektu topicId, kas tiek nodots kā maršruta parametrs. Šeit mēs pievienojam mainīgo '$ routeParams.topicId' mūsu darbības objektam kā mainīgo '$ scope.tutotialid'. Tas tiek darīts, lai uz to varētu atsaukties mūsu skatījumā, izmantojot mainīgo tutorialid.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

4. solis. Pievienojiet izteicienu, lai Angular.html lapā parādītu mainīgo tutorialid.

Anguler


{{tutorialid}}

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

Izvades ekrānā

• Noklikšķinot uz pirmās tēmas saites Tēmas informācija, numurs 1 tiek pievienots vietrādim URL.
• Pēc tam Angular.JS maršrutētāja pakalpojums šo numuru uzskatīs par argumentu "routeparam", un pēc tam tam varēs piekļūt mūsu kontrolieris.

Izmantojot Angular $ maršruta pakalpojumu

Maršruta pakalpojums $ ļauj piekļūt maršruta rekvizītiem. Maršruta pakalpojums $ ir pieejams kā parametrs, kad funkcija ir definēta kontrolierī. Zemāk parādīta vispārējā sintakse par to, kā parametrs $ route ir pieejams no kontrollera;

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

1. myApp ir leņķiskais.JS modulis, kas noteikts jūsu lietojumprogrammām
2. MyController ir kontrolieris, kas noteikts jūsu lietojumprogrammai
3. Tāpat kā jūsu lietojumprogrammai ir pieejams mainīgais $ scope, kas tiek izmantots, lai informāciju no kontroliera nodotu skatam. Parametrs $ route tiek izmantots, lai piekļūtu maršruta rekvizītiem.

Apskatīsim, kā mēs varam izmantot maršruta pakalpojumu $.

Šajā piemērā

• Mēs izveidosim vienkāršu pielāgotu mainīgo ar nosaukumu "mytext", kurā būs virkne "This is leņķa".
• Šo mainīgo mēs pievienosim savam maršrutam. Un vēlāk mēs piekļūsim šai virknei no sava kontroliera, izmantojot pakalpojumu $ route, un pēc tam izmantosim sfēra objektu, lai to parādītu mūsu skatījumā.

Apskatīsim soļus, kas mums jāveic, lai to panāktu.

1. darbība . Maršrutam pievienojiet pielāgotu atslēgu un vērtību pāri. Šeit mēs pievienojam atslēgu ar nosaukumu “mytext” un piešķiram tai vērtību “This is leņķa”.

2. solis) Pievienojiet kontrolierim attiecīgo kodu

1. Pievienojiet parametru $ route kontroliera funkcijai. $ Maršruta parametrs ir leņķiski definēts galvenais parametrs, kas ļauj piekļūt maršruta īpašībām.
2. Maršrutā definētajam mainīgajam "mytext" var piekļūt, izmantojot atsauci $ route.current. Pēc tam tas tiek piešķirts darbības objekta mainīgajam tekstam. Pēc tam teksta mainīgajam var attiecīgi piekļūt no skata.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

3. darbība. Pievienojiet atsauci teksta mainīgajam no sfēra objekta kā izteiksmi. Tas tiks pievienots mūsu Angular.html lapai, kā parādīts zemāk.

Tādējādi skatā tiks ievadīts teksts "Šis ir leņķisks". Izteiksme {{tutorialid}} ir tāda pati kā iepriekšējā tēmā redzamā, un tā parādīs skaitli “1”.

Anguler


{{text}}

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

No izejas

• Mēs varam redzēt, ka teksts "Tas ir leņķisks" tiek parādīts arī tad, kad noklikšķinām uz kādas no saitēm tabulā. Tēmas ID tiek parādīts vienlaikus ar tekstu.

HTML5 maršrutēšanas iespējošana

HTML5 maršrutēšana galvenokārt tiek izmantota, lai izveidotu tīru URL. Tas nozīmē atsauces noņemšanu no URL. Tātad, izmantojot HTML5 maršrutēšanu, maršrutēšanas vietrāži URL parādīsies, kā parādīts zemāk

Paraugs.html / Leņķa / 1

Paraugs.html / Leņķa / 2

Sample.html / Angular / 3

Šis jēdziens parasti tiek dēvēts par glīta URL parādīšanu lietotājam.

HTML5 maršrutēšanai jāveic 2 galvenie soļi.

1. $ LocationProvider konfigurēšana
2. Mūsu bāzes noteikšana relatīvajām saitēm

Apskatīsim detaļas par to, kā veikt iepriekš minētos soļus mūsu piemērā iepriekš

1. darbība. Pievienojiet attiecīgo kodu leņķa modulim

1. Pievienojiet lietojumprogrammai baseURL konstanti - tas ir nepieciešams HTML5 maršrutēšanai, lai lietojumprogramma zinātu lietojumprogrammas bāzes atrašanās vietu.
2. Pievienojiet pakalpojumus $ locationProvider. Šis pakalpojums ļauj definēt html5Mode.
3. Pakalpojuma $ locationProvider html5Mode iestatiet uz true.

2. solis) Noņemiet visus saišu # tagus ('Leņķa / 1', 'Leņķa / 2', 'Leņķa / 3'), lai izveidotu viegli lasāmu URL.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

No izejas

• Piekļūstot lietojumprogrammai, var redzēt, ka # taga nav.

Kopsavilkums

• Maršrutēšana tiek izmantota, lai parādītu lietotājam dažādus skatus vienā un tajā pašā tīmekļa lapā. Būtībā tas ir vienas lapas lietojumprogrammu jēdziens, kas tiek ieviests gandrīz visām mūsdienu tīmekļa lietojumprogrammām
• Angular.JS maršrutēšanai var iestatīt noklusējuma maršrutu. To izmanto, lai noteiktu, kāds būs noklusējuma skats, kas tiks parādīts lietotājam
• Parametrus maršrutam var pārsūtīt caur URL kā maršruta parametrus. Pēc tam šiem parametriem piekļūst, kontrolierī izmantojot parametru $ routeParams
• Pakalpojumu $ route var izmantot, lai definētu pielāgotus atslēgu un vērtību pārus maršrutā, kuriem pēc tam var piekļūt no skata
• HTML5 maršrutēšana tiek izmantota, lai #tag noņemtu no maršrutēšanas URL leņķiski, lai izveidotu glītu URL