Innan vi börjar med routing, låt oss bara ha en snabb översikt över applikationer med en sida.
Vad är enstaka sidapplikationer?
Enstaka sidapplikationer eller (SPA) är webbapplikationer som laddar en enda HTML-sida och dynamiskt uppdaterar sidan baserat på användarinteraktionen med webbapplikationen.
Vad är routing i AngularJS?
I AngularJS är routing det som låter dig skapa enstaka sidapplikationer.
- Med AngularJS-rutter kan du skapa olika webbadresser för olika innehåll i din applikation.
- AngularJS-rutter tillåter en att visa flera innehåll beroende på vilken rutt som väljs.
- En rutt anges i webbadressen efter # -tecknet.
Låt oss ta ett exempel på en webbplats som är värd via webbadressen http://example.com/index.html .
På den här sidan är du värd för huvudsidan för din ansökan. Antag att om applikationen organiserade en händelse och man ville se vilka olika händelser som visas, eller ville se detaljerna för en viss händelse eller ta bort en händelse. I en enda sida-applikation, när routing är aktiverad, skulle all denna funktion vara tillgänglig via följande länkar
http://exempel.com/index.html#ShowEvent
http://exempel.com/index.html#DisplayEvent
http://exempel.com/index.html#DeleteEvent
Symbolen # skulle användas tillsammans med de olika rutterna (ShowEvent, DisplayEvent och DeleteEvent).
- Så om användaren ville se alla händelser dirigerades de till länken ( http://exempel.com/index.html#ShowEvent ), annars
- Om de bara ville se en viss händelse skulle de omdirigeras till länken ( http://example.com/index.html#DisplayEvent ) eller
- Om de ville ta bort en händelse skulle de skickas till länken http://example.com/index.html#DeleteEvent .
Observera att huvud-URL: en förblir densamma.
I den här handledningen lär du dig-
- Lägga till vinkelrutt ($ routeProvider)
- Skapa en standardrutt
- Åtkomst till parametrar från rutten
- Med Angular $ ruttjänst
- Aktivera HTML5-routing
Lägga till vinkelrutt ($ routeProvider)
Så som vi diskuterade tidigare används rutter i AngularJS för att dirigera användaren till en annan bild av din applikation. Och denna dirigering görs på samma HTML-sida så att användaren upplever att han inte har lämnat sidan.
För att implementera routing måste följande huvudsteg implementeras i din applikation i valfri ordning.
- Hänvisning till angular-route.js. Detta är en JavaScript-fil som utvecklats av Google och som har alla funktioner för routing. Detta måste placeras i din applikation så att den kan referera till alla huvudmoduler som krävs för routing.
-
Nästa viktiga steg är att lägga till ett beroende av ngRoute-modulen inifrån din applikation. Detta beroende är nödvändigt så att dirigeringsfunktionalitet kan användas i applikationen. Om detta beroende inte läggs till kommer man inte att kunna använda routing inom angular.JS-applikationen.
Nedan följer den allmänna syntaxen för detta uttalande. Detta är bara en normal deklaration av en modul med införandet av nyckelordet ngRoute.
var module = angular.module("sampleApp", ['ngRoute']);
- Nästa steg är att konfigurera din $ routeProvider. Detta krävs för att tillhandahålla de olika rutterna i din ansökan.
Nedan följer den allmänna syntaxen för detta uttalande, vilket är mycket självförklarande. Det anger bara att när den aktuella sökvägen väljs, använd rutten för att visa den angivna vyn för användaren.
when(path, route)
- Länkar till din rutt från din HTML-sida. På din HTML-sida lägger du till referenslänkar till de olika tillgängliga rutterna i din applikation.
Rutt 1
- Slutligen skulle införandet av ng-view-direktivet, som normalt skulle finnas i en div-tagg. Denna skulle användas för att injicera innehållet i vyn när den aktuella vägen väljs.
Låt oss nu titta på ett exempel på dirigering med ovanstående steg.
I vårt exempel,
Vi presenterar två länkar till användaren,
- Den ena är att visa ämnen för en Angular JS- kurs, och den andra är för Node.js- kursen.
- När användaren klickar på någon av länkarna visas ämnena för den kursen.
Steg 1) Inkludera vinkelruttfilen som skripthänvisning.
Denna ruttfil är nödvändig för att kunna utnyttja funktionerna i att ha flera rutter och vyer. Den här filen kan laddas ner från webbplatsen angular.JS.
Steg 2) Lägg till href-taggar som representerar länkar till "Angular JS Topics" och "Node JS Topics."
Steg 3) Lägg till en div-tagg med ng-view-direktivet som representerar vyn.
Detta gör att motsvarande vy kan injiceras när användaren klickar antingen på "Angular JS Topics" eller "Node JS Topics."
Steg 4) Lägg till "ngRoute-modulen" och tjänsten "$ routeProvider" i din skripttagg för AngularJS.
Kodförklaring:
- Det första steget är att se till att "ngRoute-modulen" ingår. Med detta på plats hanterar Angular automatiskt dirigering i din applikation. NgRoute-modulen som utvecklats av Google har all den funktionalitet som gör det möjligt att dirigera. Genom att lägga till den här modulen förstår applikationen automatiskt alla routingskommandon.
- $ Routeprovider är en tjänst som vinkeln använder för att lyssna i bakgrunden till de rutter som anropas. Så när användaren klickar på en länk, kommer rutleverantören att upptäcka detta och sedan bestämma vilken rutt som ska tas.
- Skapa en rutt för Angular-länken - Detta block betyder att när du klickar på Angular-länken, injicerar du filen Angular.html och använder också Controller 'AngularController' för att bearbeta alla affärslogik.
- Skapa en rutt för Node-länken - Detta block betyder att när du klickar på Node-länken, injicerar du filen Node.html och använder också Controller 'NodeController' för att bearbeta all affärslogik.
Steg 5) Nästa är att lägga till styrenheter för att bearbeta affärslogiken för både AngularController och NodeController.
I varje styrenhet skapar vi en uppsättning nyckel-värdenpar för att lagra ämnesnamnen och beskrivningarna för varje kurs. Arrayvariabeln 'tutorial' läggs till i scope-objektet för varje controller.
Event Registration Guru99 Global Event
Steg 6) Skapa sidor som heter Angular.html och Node.html. För varje sida utför vi nedanstående steg.
Dessa steg säkerställer att alla nyckel-värdepar i matrisen visas på varje sida.
- Använda ng-repeat-direktivet för att gå igenom varje nyckel-värdepar som definierats i tutorial-variabeln.
- Visar namn och beskrivning för varje nyckel-värdepar.
- Angular.html
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Node.html
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Om du klickar på länken AngularJS Topics visas nedanstående utdata.
Produktionen visar tydligt att
- När du klickar på länken "Angular JS Topics" bestämmer routeProvider som vi förklarade i vår kod att Angular.html-koden ska injiceras.
- Den här koden kommer att injiceras i "div" -taggen, som innehåller ng-view-direktivet. Innehållet för kursbeskrivningen kommer också från "tutorialvariabeln" som var en del av omfattningsobjektet som definierades i AngularController.
- När man klickar på Node.js-ämnena kommer samma resultat att ske och vyn för Node.js-ämnen kommer att manifesteras.
- Observera också att sidans URL förblir densamma, det är bara rutten efter # -taggen som ändras. Och detta är begreppet applikationer med en sida. #Hash-taggen i webbadressen är en avgränsare som skiljer rutten (som i vårt fall är "vinkel" som visas i bilden ovan) och huvud-HTML-sidan (Sample.html)
Skapa en standardrutt
Routing i AngularJS ger också möjlighet att ha en standardrutt. Detta är den rutt som väljs om det inte finns någon matchning för den befintliga rutten.
Standardvägen skapas genom att lägga till följande villkor när du definierar tjänsten $ routeProvider.
Nedanstående syntax betyder helt enkelt att omdirigera till en annan sida om någon av de befintliga rutterna inte matchar.
otherwise ({redirectTo: 'page'});
Låt oss använda samma exempel ovan och lägga till en standardväg till vår $ routeProvider-tjänst.
function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);
Kodförklaring:
- Här använder vi samma kod som ovan, med den enda skillnaden är att vi använder det annars uttalandet och "redirectTo" -alternativet för att ange vilken vy som ska laddas om ingen rutt anges. I vårt fall vill vi att vyn "/ Angular" ska visas.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen,
- Du kan tydligt se att standardvyn som visas är den vinklade JS-vyn.
- Detta beror på att när sidan laddas går den till alternativet 'annars' i $ routeProvider-funktionen och laddar vyn '/ Angular'.
Åtkomst till parametrar från rutten
Angular ger också funktionalitet för att tillhandahålla parametrar under routing. Parametrarna läggs till i slutet av rutten i URL: en, till exempel http: //guru99/index.html#/Angular/1 . I detta exempel
- , http: //guru99/index.html är vår huvudsakliga webbadress
- Symbolen # är avgränsaren mellan huvudapplikationens URL och rutten.
- Vinkel är vår väg
- Och slutligen är '1' den parameter som läggs till i vår rutt
Syntaxen för hur parametrar ser ut i webbadressen visas nedan:
HTMLPage # / route / parameter
Här kommer du att märka att parametern skickas efter rutten i URL: en.
Så i vårt exempel, ovan för Angular JS-ämnena, kan vi skicka en parameter som visas nedan
Exempel.html # / Vinkel / 1
Exempel.html # / Vinkel / 2
Sample.html # / Angular / 3
Här kan parametrarna 1, 2 och 3 faktiskt representera ämnetid.
Låt oss titta i detalj på hur vi kan implementera detta.
Steg 1) Lägg till följande kod i din vy
-
Lägg till en tabell för att visa alla ämnen för Angular JS-kursen för användaren
-
Lägg till en tabellrad för att visa ämnet "Controllers." För den här raden ändrar du href-taggen till "Angular / 1" vilket innebär att när användaren klickar på det här ämnet skickas parameter 1 i webbadressen tillsammans med rutten.
-
Lägg till en tabellrad för att visa ämnet "Modeller". För den här raden ändrar du href-taggen till "Angular / 2" vilket innebär att när användaren klickar på det här ämnet skickas parameter 2 i URL: n tillsammans med rutten.
-
Lägg till en tabellrad för att visa ämnet "Direktiv". För den här raden ändrar du href-taggen till "Angular / 3" vilket innebär att när användaren klickar på det här ämnet skickas parameter 3 i URL: n tillsammans med rutten.
Steg 2) I rutfunktionstjänstfunktionen lägg till: topicId för att beteckna att alla parametrar som skickas i URL: en efter rutten ska tilldelas variabeln topicId.
Steg 3) Lägg till nödvändig kod till styrenheten
- Se till att först lägga till "$ routeParams" som en parameter när du definierar kontrollfunktionen. Den här parametern har åtkomst till alla de ruttparametrar som skickas i URL: n.
- Parametern "routeParams" har en hänvisning till subjectId-objektet, som skickas som en ruttparameter. Här bifogar vi variabeln '$ routeParams.topicId' till vårt scope-objekt som variabeln '$ scope.tutotialid'. Detta görs så att det kan hänvisas till det enligt vår åsikt via variabeln tutorialid.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Steg 4) Lägg till uttrycket för att visa variabeln tutorialid på sidan Angular.html.
Anguler
{{tutorialid}}
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
På utskärmen,
- Om du klickar på länken Ämnedetaljer för det första ämnet läggs nummer 1 till URL: en.
- Detta nummer tas sedan som ett "routeparam" -argument av Angular.JS routeprovider-tjänsten och kan sedan nås av vår controller.
Med Angular $ ruttjänst
Med $ ruttjänsten kan du komma åt ruttens egenskaper. $ -Ruttjänsten är tillgänglig som en parameter när funktionen definieras i styrenheten. Den allmänna syntaxen för hur $ route-parametern är tillgänglig från styrenheten visas nedan;
myApp.controller('MyController',function($scope,$route)
- myApp är den angular.JS-modul som definierats för dina applikationer
- MyController är namnet på den kontroller som definierats för din applikation
- Precis som $ scope-variabeln görs tillgänglig för din applikation, som används för att skicka information från styrenheten till vyn. Parametern $ route används för att komma åt ruttens egenskaper.
Låt oss titta på hur vi kan använda $ ruttjänsten.
I detta exempel,
- Vi ska skapa en enkel anpassad variabel som heter "mytext", som kommer att innehålla strängen "Detta är vinklat."
- Vi ska bifoga denna variabel till vår rutt. Och senare kommer vi att komma åt den här strängen från vår controller med $ ruttjänsten och sedan använda scope-objektet för att visa det enligt vår åsikt.
Så, låt oss se de steg som vi behöver utföra för att uppnå detta.
Steg 1) Lägg till ett anpassat nyckel-värdepar till rutten. Här lägger vi till en nyckel som heter 'mytext' och tilldelar den värdet "Detta är vinklat."
Steg 2) Lägg till relevant kod till styrenheten
- Lägg till $ route-parametern till styrfunktionen. $ Ruttparametern är en nyckelparameter definierad i vinkel, vilket gör att man kan komma åt ruttens egenskaper.
- Variabeln "mytext" som definierades i rutten kan nås via $ route.current referens. Detta tilldelas sedan "text" -variabeln för scope-objektet. Textvariabeln kan sedan nås från vyn i enlighet med detta.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Steg 3) Lägg till en referens till textvariabeln från scope-objektet som ett uttryck. Detta kommer att läggas till på vår Angular.html-sida som visas nedan.
Detta kommer att få texten "Detta är vinkel" att injiceras i vyn. Uttrycket {{tutorialid}} är detsamma som i föregående ämne och numret "1" visas.
Anguler
{{text}}
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen,
- Vi kan se att texten "Detta är vinkel" också visas när vi klickar på någon av länkarna i tabellen. Ämnes-id visas också samtidigt som texten.
Aktivera HTML5-routing
HTML5-routing används i princip för att skapa ren URL. Det betyder att hashtaggen tas bort från webbadressen. Så routnings-URL: erna, när HTML5-routing används, visas som visas nedan
Exempel.html / Vinkel / 1
Exempel.html / Vinkel / 2
Exempel.html / Vinkel / 3
Detta koncept är normalt känt som att presentera vacker URL för användaren.
Det finns två huvudsteg som måste utföras för HTML5-routing.
- Konfigurerar $ locationProvider
- Ställa in vår bas för relativa länkar
Låt oss titta på detaljerna i hur man utför de ovan nämnda stegen i vårt exempel ovan
Steg 1) Lägg till relevant kod i vinkelmodulen
- Lägg till en baseURL-konstant i applikationen - Detta krävs för HTML5-routing så att applikationen vet vilken applikationsbasplats som är.
- Lägg till $ locationProvider-tjänsterna. Med den här tjänsten kan du definiera html5Mode.
- Ställ in html5Mode för $ locationProvider-tjänsten till true.
Steg 2) Ta bort alla # taggar för länkarna ('Angular / 1', 'Angular / 2', 'Angular / 3') för att skapa en lättläst 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 |
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen,
- Du kan se att # -taggen inte finns där när du öppnar appen.
Sammanfattning
- Routing används för att presentera olika vyer för användaren på samma webbsida. Detta är i princip konceptet som används i enstaka sidapplikationer som implementeras för nästan alla moderna webbapplikationer
- En standardrutt kan ställas in för vinklad.JS-routing. Den används för att avgöra vilken standardvy som ska visas för användaren
- Parametrar kan skickas till rutten via URL: en som ruttparametrar. Därefter nås dessa parametrar med parametern $ routeParams i styrenheten
- $ Rutttjänsten kan användas för att definiera anpassade nyckel-värdepar i rutten som sedan kan nås inifrån vyn
- HTML5-routing används för att ta bort #taggen från routing-URL i vinkel för att bilda en vacker URL