Før vi starter med routing, lad os bare have et hurtigt overblik over applikationer med en enkelt side.
Hvad er applikationer til en enkelt side?
Enkeltsidesapplikationer eller (SPA'er) er webapplikationer, der indlæser en enkelt HTML-side og dynamisk opdaterer siden baseret på brugerinteraktionen med webapplikationen.
Hvad er routing i AngularJS?
I AngularJS er routing det, der giver dig mulighed for at oprette applikationer til en enkelt side.
- AngularJS-ruter giver dig mulighed for at oprette forskellige URL'er til forskelligt indhold i din applikation.
- AngularJS-ruter tillader en at vise flere indhold afhængigt af hvilken rute der er valgt.
- En rute er angivet i URL'en efter # -tegnet.
Lad os tage et eksempel på et websted, der hostes via URL'en http://example.com/index.html .
På denne side vil du være vært for hovedsiden i din applikation. Antag, at hvis applikationen organiserede en begivenhed, og man ville se, hvad de forskellige begivenheder på skærmen er, eller ville se detaljerne i en bestemt begivenhed eller slette en begivenhed. I en enkelt side-applikation, når routing er aktiveret, ville al denne funktionalitet være tilgængelig via følgende links
http://eksempel.com/index.html#ShowEvent
http://eksempel.com/index.html#DisplayEvent
http://eksempel.com/index.html#DeleteEvent
Symbolet # vil blive brugt sammen med de forskellige ruter (ShowEvent, DisplayEvent og DeleteEvent).
- Så hvis brugeren ville se alle begivenheder, ville de blive dirigeret til linket ( http://example.com/index.html#ShowEvent ), ellers
- Hvis de bare ville se en bestemt begivenhed, ville de blive omdirigeret til linket ( http://example.com/index.html#DisplayEvent ) eller
- Hvis de ville slette en begivenhed, ville de blive sendt til linket http://example.com/index.html#DeleteEvent .
Bemærk, at hoved-URL'en forbliver den samme.
I denne vejledning lærer du-
- Tilføjelse af kantet rute ($ routeProvider)
- Oprettelse af en standardrute
- Adgang til parametre fra ruten
- Brug af Angular $ rute service
- Aktivering af HTML5-routing
Tilføjelse af kantet rute ($ routeProvider)
Så som vi diskuterede tidligere, bruges ruter i AngularJS til at dirigere brugeren til en anden visning af din applikation. Og denne routing udføres på den samme HTML-side, så brugeren får den oplevelse, at han ikke har forladt siden.
For at implementere routing skal følgende hovedtrin implementeres i din applikation i en hvilken som helst specifik rækkefølge.
- Henvisning til angular-route.js. Dette er en JavaScript-fil udviklet af Google, der har alle rutefunktionaliteter. Dette skal placeres i din applikation, så den kan henvise til alle de hovedmoduler, der kræves til routing.
-
Det næste vigtige trin er at tilføje en afhængighed af ngRoute-modulet fra din applikation. Denne afhængighed er påkrævet, så routingfunktionalitet kan bruges i applikationen. Hvis denne afhængighed ikke tilføjes, kan man ikke bruge ruting inden for vinkel.JS-applikationen.
Nedenfor er den generelle syntaks for denne erklæring. Dette er bare en normal erklæring af et modul med inkludering af ngRoute-nøgleordet.
var module = angular.module("sampleApp", ['ngRoute']);
- Det næste trin ville være at konfigurere din $ routeProvider. Dette er nødvendigt for at levere de forskellige ruter i din applikation.
Nedenfor er den generelle syntaks for denne erklæring, som er meget selvforklarende. Det siger bare, at når den relevante sti er valgt, skal du bruge ruten til at vise den givne visning til brugeren.
when(path, route)
- Links til din rute fra din HTML-side. På din HTML-side vil du tilføje referencelinks til de forskellige tilgængelige ruter i din applikation.
Rute 1
- Endelig ville inkluderingen af ng-view-direktivet være, som normalt ville være i en div-tag. Dette ville blive brugt til at indsprøjte indholdet af udsigten, når den relevante rute vælges.
Lad os nu se på et eksempel på routing ved hjælp af de ovennævnte trin.
I vores eksempel
Vi præsenterer 2 links til brugeren,
- Den ene er at vise emnerne til et Angular JS- kursus, og det andet er til Node.js- kurset.
- Når brugeren klikker på et af linkene, vises emnerne for det kursus.
Trin 1) Inkluder vinkelrute-filen som en scriptreference.
Denne rutefil er nødvendig for at gøre brug af funktionaliteten ved at have flere ruter og visninger. Denne fil kan downloades fra webstedet angular.JS.
Trin 2) Tilføj href-tags, som repræsenterer links til "Angular JS Topics" og "Node JS Topics."
Trin 3) Tilføj et div-tag med ng-view-direktivet, som repræsenterer visningen.
Dette gør det muligt at indsprøjte den tilsvarende visning, når brugeren klikker på enten "Angular JS Topics" eller "Node JS Topics."
Trin 4) I dit script-tag til AngularJS skal du tilføje "ngRoute-modulet" og "$ routeProvider" -tjenesten.
Kode Forklaring:
- Det første trin er at sikre, at "ngRoute-modulet" medtages. Med dette på plads vil Angular automatisk håndtere routingen i din applikation. NgRoute-modulet, der er udviklet af Google, har al den funktionalitet, der gør det muligt at routing være mulig. Ved at tilføje dette modul vil applikationen automatisk forstå alle rutekommandoer.
- $ Routeprovider er en tjeneste, som kantet bruger til at lytte i baggrunden til de ruter, der kaldes. Så når brugeren klikker på et link, registrerer ruteleverandøren dette og beslutter derefter, hvilken rute han skal tage.
- Opret en rute til det kantede link - Denne blok betyder, at når der klikkes på det kantede link, skal du injicere filen Angular.html og også bruge controlleren 'AngularController' til at behandle enhver forretningslogik.
- Opret en rute til Node-linket - Denne blok betyder, at når der klikkes på Node-linket, skal du injicere filen Node.html og også bruge controlleren 'NodeController' til at behandle enhver forretningslogik.
Trin 5) Næste er at tilføje controllere til at behandle forretningslogikken for både AngularController og NodeController.
I hver controller opretter vi en række nøgleværdipar til at gemme emnenavne og beskrivelser for hvert kursus. Arrayvariablen 'tutorial' føjes til omfangsobjektet for hver controller.
Event Registration Guru99 Global Event
Trin 6) Opret sider kaldet Angular.html og Node.html. For hver side udfører vi nedenstående trin.
Disse trin sikrer, at alle nøgleværdiparene i arrayet vises på hver side.
- Brug ng-repeat-direktivet til at gennemgå hvert nøgleværdipar, der er defineret i tutorial-variablen.
- Visning af navn og beskrivelse af hvert nøgleværdipar.
- Angular.html
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Node.html
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Hvis du klikker på linket AngularJS Topics, vises nedenstående output.
Outputtet viser tydeligt,
- Når der klikkes på linket "Angular JS Topics", bestemmer den routeProvider, som vi erklærede i vores kode, at Angular.html-koden skal injiceres.
- Denne kode indsprøjtes i "div" -tagget, som indeholder ng-view-direktivet. Indholdet til kursusbeskrivelsen kommer også fra "tutorialvariablen", som var en del af omfangsobjektet defineret i AngularController.
- Når man klikker på Node.js-emnerne, finder det samme resultat sted, og visningen for Node.js-emner manifesteres.
- Bemærk også, at side-URL'en forbliver den samme, det er kun ruten efter # -tagget, der ændres. Og dette er begrebet applikationer med en enkelt side. #Hash-tagget i URL'en er en separator, der adskiller ruten (som i vores tilfælde er 'Vinklet' som vist i ovenstående billede) og den vigtigste HTML-side (Sample.html)
Oprettelse af en standardrute
Routing i AngularJS giver også mulighed for at have en standardrute. Dette er den rute, der vælges, hvis der ikke er nogen match med den eksisterende rute.
Standardruten oprettes ved at tilføje følgende betingelse, når du definerer $ routeProvider-tjenesten.
Nedenstående syntaks betyder bare at omdirigere til en anden side, hvis nogen af de eksisterende ruter ikke stemmer overens.
otherwise ({redirectTo: 'page'});
Lad os bruge det samme eksempel ovenfor og tilføje en standardrute til vores $ 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 bruger vi den samme kode som ovenfor, med den eneste forskel er, at vi bruger den ellers erklæring og "redirectTo" mulighed for at angive, hvilken visning der skal indlæses, hvis der ikke er angivet nogen rute. I vores tilfælde ønsker vi, at visningen '/ Angular' skal vises.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
- Du kan tydeligt se, at den viste standardvisning er den kantede JS-visning.
- Dette skyldes, at når siden indlæses, går den til 'ellers' indstillingen i $ routeProvider-funktionen og indlæser '/ Angular' -visningen.
Adgang til parametre fra ruten
Angular giver også funktionaliteten til at angive parametre under routing. Parametrene føjes til slutningen af ruten i URL'en, for eksempel http: //guru99/index.html#/Angular/1 . I dette eksempel
- , http: //guru99/index.html er vores vigtigste applikations-URL
- Symbolet # er separatoren mellem den primære applikations-URL og ruten.
- Vinklet er vores rute
- Og endelig er '1' den parameter, der føjes til vores rute
Syntaksen for, hvordan parametre ser ud i URL'en, vises nedenfor:
HTMLPage # / rute / parameter
Her vil du bemærke, at parameteren sendes efter ruten i URL'en.
Så i vores eksempel ovenfor for Angular JS-emnerne kan vi videregive 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 repræsentere topicid.
Lad os se detaljeret på, hvordan vi kan implementere dette.
Trin 1) Føj følgende kode til din opfattelse
-
Tilføj en tabel for at vise alle emnerne for Angular JS-kurset for brugeren
-
Tilføj en tabelrække for at vise emnet "Controllers." For denne række skal du ændre href-tagget til "Angular / 1", hvilket betyder, at når brugeren klikker på dette emne, vil parameter 1 blive sendt i URL'en sammen med ruten.
-
Tilføj en tabelrække for at vise emnet "Modeller". For denne række skal du ændre href-tagget til "Angular / 2", hvilket betyder, at når brugeren klikker på dette emne, vil parameter 2 blive sendt i URL'en sammen med ruten.
-
Tilføj en tabelrække for at vise emnet "Direktiver". For denne række skal du ændre href-tagget til "Angular / 3", hvilket betyder, at når brugeren klikker på dette emne, vil parameter 3 blive sendt i URL'en sammen med ruten.
Trin 2) I routeprovider-servicefunktionen tilføj: topicId for at angive, at enhver parameter, der sendes i URL'en efter ruten, skal tildeles variablen topicId.
Trin 3) Tilføj den nødvendige kode til controlleren
- Sørg for først at tilføje "$ routeParams" som en parameter, når du definerer controller-funktionen. Denne parameter har adgang til alle de ruteparametre, der er sendt i URL'en.
- Parameteren "routeParams" har en henvisning til topicId-objektet, som sendes som en ruteparameter. Her vedhæftes variablen '$ routeParams.topicId' til vores scope-objekt som variablen '$ scope.tutotialid'. Dette gøres, så det kan refereres til efter vores mening via tutorialid-variablen.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Trin 4) Tilføj udtrykket for at vise tutorialid-variablen på siden Angular.html.
Anguler
{{tutorialid}}
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
I outputskærmen
- Hvis du klikker på linket Emnedetaljer for det første emne, tilføjes nummer 1 til URL'en.
- Dette nummer vil derefter blive taget som et "routeparam" -argument af Angular.JS ruteleverandørtjeneste og kan derefter tilgås af vores controller.
Brug af Angular $ rute service
$ Rutetjenesten giver dig adgang til ruteegenskaberne. $ Rutetjenesten er tilgængelig som en parameter, når funktionen er defineret i controlleren. Den generelle syntaks for, hvordan $ route-parameteren er tilgængelig fra controlleren, vises nedenfor;
myApp.controller('MyController',function($scope,$route)
- myApp er det angular.JS-modul, der er defineret til dine applikationer
- MyController er navnet på den controller, der er defineret til din applikation
- Ligesom $ scope-variablen gøres tilgængelig for din applikation, som bruges til at videregive oplysninger fra controlleren til visningen. $ Rute-parameteren bruges til at få adgang til ruteegenskaberne.
Lad os se på, hvordan vi kan bruge $ rutetjenesten.
I dette eksempel
- Vi skal oprette en simpel brugerdefineret variabel kaldet "mytext", som vil indeholde strengen "Dette er kantet."
- Vi vil vedhæfte denne variabel til vores rute. Og senere skal vi få adgang til denne streng fra vores controller ved hjælp af $ rutetjenesten og derefter derefter bruge scope-objektet til at vise det efter vores mening.
Så lad os se de trin, vi skal udføre for at opnå dette.
Trin 1) Føj et tilpasset nøgleværdipar til ruten. Her tilføjer vi en nøgle kaldet 'mytext' og tildeler den værdien "Dette er kantet."
Trin 2) Tilføj den relevante kode til controlleren
- Føj parameteren $ rute til controller-funktionen. $ Rute-parameteren er en nøgleparameter defineret i vinkel, som giver en adgang til ruteegenskaberne.
- Variablen "mytext", der blev defineret i ruten, kan tilgås via $ route.current reference. Dette tildeles derefter 'tekst' -variablen for omfangsobjektet. Tekstvariablen kan derefter tilgås fra visningen i overensstemmelse hermed.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Trin 3) Tilføj en henvisning til tekstvariablen fra omfangsobjektet som et udtryk. Dette vil blive tilføjet til vores Angular.html-side som vist nedenfor.
Dette får teksten "Dette er kantet" til at blive injiceret i udsigten. Udtrykket {{tutorialid}} er det samme som det, der blev set i det forrige emne, og dette vil vise tallet '1'.
Anguler
{{text}}
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
- Vi kan se, at teksten "Dette er kantet" også vises, når vi klikker på et af linkene i tabellen. Emne-id'et vises også på samme tid som teksten.
Aktivering af HTML5-routing
HTML5-routing bruges grundlæggende til at oprette ren URL. Det betyder fjernelse af hashtag fra URL'en. Så routing-URL'erne, når HTML5-routing bruges, vises som vist nedenfor
Sample.html / Angular / 1
Sample.html / Angular / 2
Sample.html / Angular / 3
Dette koncept er normalt kendt som at præsentere en smuk URL til brugeren.
Der er to hovedtrin, der skal udføres for HTML5-routing.
- Konfiguration af $ locationProvider
- Indstilling af vores base for relative links
Lad os se på detaljerne i, hvordan man udfører de ovennævnte trin i vores eksempel ovenfor
Trin 1) Føj den relevante kode til vinkelmodulet
- Føj en baseURL-konstant til applikationen - Dette er nødvendigt for HTML5-routing, så applikationen ved, hvad applikationens basisplacering er.
- Tilføj $ locationProvider-tjenesterne. Denne service giver dig mulighed for at definere html5Mode.
- Indstil html5Mode for $ locationProvider-tjenesten til sand.
Trin 2) Fjern alle # tags for linkene ('Angular / 1', 'Angular / 2', 'Angular / 3') for at oprette letlæselig 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 udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
- Du kan se, at tagget # ikke er der, når du får adgang til applikationen.
Resumé
- Routing bruges til at præsentere forskellige visninger for brugeren på den samme webside. Dette er dybest set det koncept, der anvendes i applikationer med en side, der implementeres til næsten alle moderne webapplikationer
- En standardrute kan indstilles til vinkel.JS-routing. Det bruges til at bestemme, hvad der vil være standardvisningen, der skal vises for brugeren
- Parametre kan overføres til ruten via URL'en som ruteparametre. Disse parametre tilgås derefter efterfølgende ved hjælp af $ routeParams-parameteren i controlleren
- Rutetjenesten $ kan bruges til at definere brugerdefinerede nøgleværdipar i ruten, som derefter derefter kan tilgås fra visningen
- HTML5-routing bruges til at fjerne #tag fra routing-URL i vinkel for at danne smuk URL