Før vi begynner med ruting, la oss bare få en rask oversikt over applikasjoner med én side.
Hva er applikasjoner med én side?
Enkeltsideapplikasjoner eller (SPAer) er webapplikasjoner som laster inn en enkelt HTML-side og dynamisk oppdaterer siden basert på brukerinteraksjonen med webapplikasjonen.
Hva er ruting i AngularJS?
I AngularJS er ruting det som lar deg lage applikasjoner med én side.
- Med AngularJS-ruter kan du opprette forskjellige URL-er for forskjellig innhold i applikasjonen din.
- AngularJS-ruter lar en vise flere innhold, avhengig av hvilken rute som er valgt.
- En rute er spesifisert i URL-en etter # -tegnet.
La oss ta et eksempel på et nettsted som er vert via URL-adressen http://example.com/index.html .
På denne siden vil du være vert for hovedsiden til søknaden din. Anta at hvis applikasjonen organiserte en hendelse og man ønsket å se hva de forskjellige hendelsene som ble vist, eller ønsket å se detaljene i en bestemt hendelse eller slette en hendelse. Når en ruting er aktivert i et enkelt side-program, vil all denne funksjonaliteten være tilgjengelig via følgende lenker
http://example.com/index.html#ShowEvent
http://example.com/index.html#DisplayEvent
http://example.com/index.html#DeleteEvent
Symbolet # vil bli brukt sammen med de forskjellige rutene (ShowEvent, DisplayEvent og DeleteEvent).
- Så hvis brukeren ønsket å se alle hendelser, ville de bli sendt til lenken ( http://example.com/index.html#ShowEvent ), ellers
- Hvis de bare ville se en bestemt hendelse, ville de bli omdirigert til lenken ( http://example.com/index.html#DisplayEvent ) eller
- Hvis de ønsket å slette en hendelse, blir de sendt til lenken http://example.com/index.html#DeleteEvent .
Merk at hoved-URL-en forblir den samme.
I denne veiledningen vil du lære-
- Legge til vinkelrute ($ routeProvider)
- Opprette en standard rute
- Tilgang til parametere fra ruten
- Bruker Angular $ rutetjeneste
- Aktivere HTML5-ruting
Legge til vinkelrute ($ routeProvider)
Så som vi diskuterte tidligere, brukes ruter i AngularJS til å rute brukeren til et annet syn på applikasjonen din. Og denne rutingen gjøres på den samme HTML-siden, slik at brukeren opplever at han ikke har forlatt siden.
For å implementere ruting må følgende hovedtrinn implementeres i applikasjonen din i en hvilken som helst spesifikk rekkefølge.
- Henvisning til angular-route.js. Dette er en JavaScript-fil utviklet av Google som har all rutefunksjonalitet. Dette må plasseres i applikasjonen din slik at den kan referere til alle hovedmodulene som kreves for ruting.
-
Det neste viktige trinnet er å legge til en avhengighet av ngRoute-modulen fra applikasjonen din. Denne avhengigheten er nødvendig slik at rutefunksjonalitet kan brukes i applikasjonen. Hvis denne avhengigheten ikke er lagt til, vil man ikke kunne bruke ruting i angular.JS-applikasjonen.
Nedenfor er den generelle syntaksen for denne uttalelsen. Dette er bare en vanlig erklæring om en modul med inkludering av ngRoute-nøkkelordet.
var module = angular.module("sampleApp", ['ngRoute']);
- Det neste trinnet vil være å konfigurere $ routeProvider. Dette er nødvendig for å oppgi de forskjellige rutene i søknaden din.
Nedenfor er den generelle syntaksen for denne uttalelsen, som er veldig selvforklarende. Den sier bare at når den aktuelle banen er valgt, bruk ruten til å vise den gitte visningen til brukeren.
when(path, route)
- Koblinger til ruten din fra HTML-siden. På HTML-siden din vil du legge til referansekoblinger til de forskjellige tilgjengelige rutene i applikasjonen din.
Rute 1
- Endelig ville inkluderingen av ng-view-direktivet være, som normalt ville være i en div-tag. Dette vil bli brukt til å injisere innholdet i utsikten når den aktuelle ruten velges.
La oss nå se på et eksempel på ruting ved hjelp av de ovennevnte trinnene.
I vårt eksempel,
Vi vil presentere to lenker til brukeren,
- Den ene er å vise emnene for et Angular JS- kurs, og det andre er for Node.js- kurset.
- Når brukeren klikker på en av linkene, vises emnene for det kurset.
Trinn 1) Inkluder vinkelrute-filen som skriptreferanse.
Denne rutefilen er nødvendig for å kunne bruke funksjonene til å ha flere ruter og visninger. Denne filen kan lastes ned fra nettstedet angular.JS.
Trinn 2) Legg til href-koder som representerer lenker til "Angular JS Topics" og "Node JS Topics."
Steg3) Legg til en div-tag med ng-view-direktivet som vil representere visningen.
Dette vil tillate at den tilsvarende visningen injiseres når brukeren klikker på enten "Angular JS Topics" eller "Node JS Topics."
Trinn 4) I skriptetiketten din for AngularJS, legg til "ngRoute-modulen" og "$ routeProvider" -tjenesten.
Kode Forklaring:
- Det første trinnet er å sørge for å inkludere "ngRoute-modulen." Med dette på plass, vil Angular automatisk håndtere rutingen i applikasjonen din. NgRoute-modulen som er utviklet av Google, har all funksjonaliteten som gjør det mulig å ruting være mulig. Ved å legge til denne modulen vil applikasjonen automatisk forstå alle rutingskommandoer.
- $ Ruteleverandøren er en tjeneste som kantet bruker for å lytte i bakgrunnen til rutene som kalles. Så når brukeren klikker på en lenke, vil ruteleverandøren oppdage dette og deretter bestemme hvilken rute de skal ta.
- Opprett en rute for Angular-lenken - Denne blokken betyr at når du klikker på Angular-linken, injiserer du filen Angular.html og også bruker Controller 'AngularController' for å behandle enhver forretningslogikk.
- Opprett en rute for Node-koblingen - Denne blokken betyr at når Node-lenken klikkes, injiser du filen Node.html og bruker også kontrolleren 'NodeController' til å behandle enhver forretningslogikk.
Trinn 5) Neste er å legge til kontrollere for å behandle forretningslogikken for både AngularController og NodeController.
I hver kontroller lager vi en rekke nøkkelverdipar for å lagre emnenavnene og beskrivelsene for hvert kurs. Arrayvariabelen 'tutorial' er lagt til omfangsobjektet for hver kontroller.
Event Registration Guru99 Global Event
Trinn 6) Opprett sider kalt Angular.html og Node.html. For hver side gjennomfører vi trinnene nedenfor.
Disse trinnene vil sikre at alle nøkkelverdiparene i matrisen vises på hver side.
- Bruk ng-repeat-direktivet til å gå gjennom hvert nøkkelverdipar som er definert i opplæringsvariabelen.
- Viser navn og beskrivelse for hvert nøkkelverdipar.
- Angular.html
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Node.html
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Hvis du klikker på AngularJS Topics-lenken, vises utdataene nedenfor.
Resultatet viser tydelig at
- Når du klikker på lenken "Angular JS Topics", bestemmer routeProvider som vi erklærte i koden vår at Angular.html-koden skal injiseres.
- Denne koden vil bli injisert i "div" -koden, som inneholder ng-view-direktivet. Innholdet for emnebeskrivelsen kommer også fra "opplæringsvariabelen" som var en del av omfangsobjektet definert i AngularController.
- Når man klikker på Node.js-emnene, vil det samme resultatet finne sted, og visningen for Node.js-emner vil bli manifestert.
- Legg også merke til at sidens URL forblir den samme, det er bare ruten etter #-taggen som endres. Og dette er konseptet med enkeltsideapplikasjoner. #Hash-koden i URL-en er en skilletegn som skiller ruten (som i vårt tilfelle er 'Vinkel' som vist på bildet ovenfor) og hoved-HTML-siden (Sample.html)
Opprette en standard rute
Rute i AngularJS gir også muligheten til å ha en standardrute. Dette er ruten som velges hvis det ikke samsvarer med den eksisterende ruten.
Standardruten opprettes ved å legge til følgende tilstand når du definerer $ routeProvider-tjenesten.
Syntaksen nedenfor betyr bare å omdirigere til en annen side hvis noen av de eksisterende rutene ikke stemmer overens.
otherwise ({redirectTo: 'page'});
La oss bruke det samme eksemplet ovenfor og legge til en standardrute til vår $ routeProvider-tjeneste.
function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);
Kode Forklaring:
- Her bruker vi den samme koden som ovenfor, med den eneste forskjellen er at vi bruker den ellers uttalelsen og "redirectTo" -alternativet for å spesifisere hvilken visning som skal lastes hvis ingen rute er spesifisert. I vårt tilfelle vil vi at visningen '/ Angular' skal vises.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Fra utgangen,
- Du kan tydelig se at standardvisningen som vises er JS-visningen.
- Dette er fordi når siden lastes, går den til alternativet 'ellers' i $ routeProvider-funksjonen og laster '/ Angular' -visningen.
Tilgang til parametere fra ruten
Angular gir også funksjonaliteten til å gi parametere under rutingen. Parametrene legges til slutten av ruten i URL-en, for eksempel http: //guru99/index.html#/Angular/1 . I dette eksemplet
- , http: //guru99/index.html er vår viktigste applikasjons-URL
- # -Symbolet er skillet mellom hovedapplikasjons-URL og rute.
- Vinklet er vår rute
- Og til slutt er '1' parameteren som legges til ruten vår
Syntaksen for hvordan parametere ser ut i URL-en er vist nedenfor:
HTMLPage # / rute / parameter
Her vil du legge merke til at parameteren sendes etter ruten i URL-en.
Så i vårt eksempel, ovenfor for Angular JS-emnene, kan vi sende en parameter som vist nedenfor
Sample.html # / Angular / 1
Sample.html # / Angular / 2
Sample.html # / Angular / 3
Her kan parametrene 1, 2 og 3 faktisk representere subjectid.
La oss se i detalj på hvordan vi kan implementere dette.
Trinn 1) Legg til følgende kode i visningen din
-
Legg til en tabell for å vise alle emnene for Angular JS-kurset til brukeren
-
Legg til en tabellrad for å vise emnet "Kontrollere." For denne raden endrer du href-taggen til "Angular / 1", noe som betyr at når brukeren klikker på dette emnet, vil parameter 1 bli sendt i URL-en sammen med ruten.
-
Legg til en tabellrad for å vise emnet "Modeller". For denne raden endrer du href-taggen til "Angular / 2", noe som betyr at når brukeren klikker på dette emnet, vil parameter 2 sendes i URL-en sammen med ruten.
-
Legg til en tabellrad for å vise emnet "Direktiver." For denne raden endrer du href-taggen til "Angular / 3", noe som betyr at når brukeren klikker på dette emnet, vil parameter 3 sendes i URL-en sammen med ruten.
Trinn 2) I ruteleverandørtjenestefunksjonen, legg til: topicId for å indikere at en hvilken som helst parameter som sendes i URL-en etter ruten, skal tilordnes variabelen topicId.
Trinn 3) Legg til den nødvendige koden til kontrolleren
- Sørg for å legge til "$ routeParams" som en parameter når du definerer kontrollerfunksjonen. Denne parameteren vil ha tilgang til alle ruteparametrene som sendes i URL-en.
- Parameteren "routeParams" har en referanse til topicId-objektet, som sendes som en ruteparameter. Her fester vi variabelen '$ routeParams.topicId' til vårt scope-objekt som variabelen '$ scope.tutotialid'. Dette gjøres slik at det kan vises i vårt syn via tutorialid-variabelen.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Trinn 4) Legg til uttrykket for å vise tutorialid-variabelen på Angular.html-siden.
Anguler
{{tutorialid}}
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
I utgangsskjermen,
- Hvis du klikker på koblingen Emnedetaljer for det første emnet, blir nummer 1 lagt til URL-en.
- Dette nummeret vil deretter bli tatt som et "ruteparameter" -argument av Angular.JS ruteleverandørtjeneste og kan deretter nås av kontrolleren vår.
Bruker Angular $ rutetjeneste
$ Rutetjenesten lar deg få tilgang til egenskapene til ruten. $ Rutetjenesten er tilgjengelig som en parameter når funksjonen er definert i kontrolleren. Den generelle syntaksen for hvordan $ rute-parameteren er tilgjengelig fra kontrolleren, vises nedenfor;
myApp.controller('MyController',function($scope,$route)
- myApp er angular.JS-modulen definert for applikasjonene dine
- MyController er navnet på kontrolleren som er definert for applikasjonen din
- Akkurat som $ scope-variabelen blir gjort tilgjengelig for applikasjonen din, som brukes til å overføre informasjon fra kontrolleren til visningen. $ Rute-parameteren brukes til å få tilgang til egenskapene til ruten.
La oss ta en titt på hvordan vi kan bruke $ rutetjenesten.
I dette eksemplet,
- Vi skal lage en enkel tilpasset variabel kalt "mytext", som vil inneholde strengen "Dette er kantet."
- Vi skal knytte denne variabelen til ruten vår. Og senere skal vi få tilgang til denne strengen fra kontrolleren vår ved hjelp av $ rutetjenesten, og deretter bruke omfangsobjektet til å vise det etter vårt syn.
Så la oss se trinnene vi må utføre for å oppnå dette.
Trinn 1) Legg til et tilpasset nøkkelverdipar til ruten. Her legger vi til en nøkkel kalt 'mytext' og tildeler den verdien "Dette er kantet."
Trinn 2) Legg til den aktuelle koden til kontrolleren
- Legg til $ rute-parameteren til kontrollerfunksjonen. $ Rute-parameteren er en nøkkelparameter definert i vinkel, som gir en tilgang til egenskapene til ruten.
- Variablen "mytext" som ble definert i ruten, kan nås via $ route.current referanse. Dette tildeles deretter 'tekst' -variabelen til omfangsobjektet. Tekstvariabelen kan deretter nås fra visningen tilsvarende.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Trinn 3) Legg til en referanse til tekstvariabelen fra omfangsobjektet som et uttrykk. Dette vil bli lagt til på vår Angular.html-side som vist nedenfor.
Dette vil føre til at teksten "Dette er kantet" blir injisert i visningen. Uttrykket {{tutorialid}} er det samme som det som ble sett i forrige emne, og dette vil vise tallet '1'.
Anguler
{{text}}
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Fra utgangen,
- Vi kan se at teksten "Dette er kantet" vises også når vi klikker på noen av lenkene i tabellen. Emne-ID-en blir også vist samtidig med teksten.
Aktivere HTML5-ruting
HTML5-ruting brukes i utgangspunktet for å lage ren URL. Det betyr fjerning av hashtag fra URL. Så rutings-URL-ene, når HTML5-ruting brukes, vises som vist nedenfor
Eksempel.html / Vinkel / 1
Eksempel.html / Vinkel / 2
Eksempel.html / Vinkel / 3
Dette konseptet er vanligvis kjent som å presentere pen URL til brukeren.
Det er to hovedtrinn som må utføres for HTML5-ruting.
- Konfigurerer $ locationProvider
- Setter vår base for relative lenker
La oss se på detaljene om hvordan du utfører de ovennevnte trinnene i vårt eksempel ovenfor
Trinn 1) Legg til den aktuelle koden i vinkelmodulen
- Legg til en baseURL-konstant i applikasjonen - Dette er nødvendig for HTML5-ruting, slik at applikasjonen vet hva applikasjonens baseplassering er.
- Legg til $ locationProvider-tjenestene. Denne tjenesten lar deg definere html5Mode.
- Sett html5Mode for $ locationProvider-tjenesten til true.
Trinn 2) Fjern alle # taggene for lenkene ('Angular / 1', 'Angular / 2', 'Angular / 3') for å lage en lettlest URL.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Fra utgangen,
- Du kan se at #-taggen ikke er der når du åpner applikasjonen.
Sammendrag
- Routing brukes til å presentere forskjellige visninger for brukeren på samme webside. Dette er i utgangspunktet konseptet som brukes i enkeltsideapplikasjoner som implementeres for nesten alle moderne webapplikasjoner
- En standardrute kan settes opp for vinkel.JS-ruting. Den brukes til å bestemme hva som vil være standardvisningen som skal vises til brukeren
- Parametere kan overføres til ruten via URL-en som ruteparametere. Disse parametrene får du deretter tilgang til ved å bruke $ routeParams-parameteren i kontrolleren
- $ Rutetjenesten kan brukes til å definere egendefinerte nøkkelverdipar i ruten som deretter kan nås fra visningen
- HTML5-ruting brukes til å fjerne #tag fra ruting-URL i vinkel for å danne pen URL