AngularJS-routering met parameters: toepassingsvoorbeeld van één pagina

Voordat we beginnen met routing, laten we eerst een kort overzicht hebben van Single-Page Applications.

Wat zijn toepassingen met één pagina?

Toepassingen met één pagina of (SPA's) zijn webtoepassingen die een enkele HTML-pagina laden en de pagina dynamisch bijwerken op basis van de gebruikersinteractie met de webtoepassing.

Wat is routering in AngularJS?

In AngularJS is routing wat u in staat stelt om Single Page Applications te maken.

• Met AngularJS-routes kunt u verschillende URL's maken voor verschillende inhoud in uw applicatie.
• Met AngularJS-routes kan men meerdere inhoud weergeven, afhankelijk van de gekozen route.
• Een route wordt gespecificeerd in de URL na het # -teken.

Laten we een voorbeeld nemen van een site die wordt gehost via de URL http://example.com/index.html .

Op deze pagina zou u de hoofdpagina van uw applicatie hosten. Stel dat de applicatie een Evenement aan het organiseren was en men wil zien wat de verschillende getoonde evenementen zijn, of de details van een bepaald evenement willen zien of een evenement willen verwijderen. Als routing is ingeschakeld in een toepassing met één pagina, is al deze functionaliteit beschikbaar via de volgende links

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

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

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

Het # -symbool zou samen met de verschillende routes (ShowEvent, DisplayEvent en DeleteEvent) worden gebruikt.

• Dus als de gebruiker alle evenementen wil zien, worden ze naar de link ( http://example.com/index.html#ShowEvent ) geleid , anders
• Als ze alleen een bepaald evenement wilden zien, zouden ze worden omgeleid naar de link ( http://example.com/index.html#DisplayEvent ) of
• Als ze een evenement wilden verwijderen, zouden ze naar de link http://example.com/index.html#DeleteEvent worden geleid .

Merk op dat de hoofd-URL hetzelfde blijft.

In deze tutorial leer je-

• Angular Route toevoegen ($ routeProvider)
• Een standaardroute maken
• Toegang tot parameters van de route
• Angular $ route-service gebruiken
• HTML5-routering inschakelen

Angular Route toevoegen ($ routeProvider)

Zoals we eerder hebben besproken, worden routes in AngularJS gebruikt om de gebruiker naar een andere weergave van uw applicatie te leiden. En deze routing gebeurt op dezelfde HTML-pagina, zodat de gebruiker de ervaring heeft dat hij de pagina niet heeft verlaten.

Om routing te implementeren, moeten de volgende hoofdstappen in een specifieke volgorde in uw applicatie worden geïmplementeerd.

1. Verwijzing naar angular-route.js. Dit is een JavaScript-bestand ontwikkeld door Google dat alle functionaliteit van routing heeft. Dit moet in uw applicatie worden geplaatst, zodat het kan verwijzen naar alle hoofdmodules die nodig zijn voor routering.

2. De volgende belangrijke stap is om een ​​afhankelijkheid toe te voegen aan de ngRoute-module vanuit uw applicatie. Deze afhankelijkheid is vereist zodat routeringsfunctionaliteit binnen de applicatie kan worden gebruikt. Als deze afhankelijkheid niet wordt toegevoegd, zal men geen routing kunnen gebruiken binnen de angular.JS-applicatie.

   Hieronder staat de algemene syntaxis van deze verklaring. Dit is gewoon een normale declaratie van een module met de opname van het trefwoord ngRoute.

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

3. De volgende stap zou zijn om uw $ routeProvider te configureren. Dit is nodig om de verschillende routes in uw applicatie aan te kunnen bieden.

   Hieronder vindt u de algemene syntaxis van deze verklaring, die zeer vanzelfsprekend is. Het stelt alleen dat wanneer het relevante pad is gekozen, de route wordt gebruikt om de gegeven weergave aan de gebruiker weer te geven.

when(path, route)

4. Links naar uw route vanuit uw HTML-pagina. Op uw HTML-pagina voegt u referentielinks toe naar de verschillende beschikbare routes in uw applicatie.

 Route 1 

5. Ten slotte zou de opname van de ng-view-richtlijn zijn, die normaal gesproken in een div-tag zou staan. Dit zou worden gebruikt om de inhoud van de weergave te injecteren wanneer de relevante route wordt gekozen.

Laten we nu eens kijken naar een voorbeeld van routering met behulp van de bovengenoemde stappen.

In ons voorbeeld

We zullen 2 links aan de gebruiker presenteren,

• Een daarvan is om de onderwerpen voor een Angular JS- cursus weer te geven en de andere is voor de Node.js- cursus.
• Wanneer de gebruiker op een van beide links klikt, worden de onderwerpen voor die cursus weergegeven.

Stap 1) Voeg het angular-routebestand toe als scriptreferentie.

Dit routebestand is nodig om gebruik te kunnen maken van de functionaliteiten van meerdere routes en views. Dit bestand kan worden gedownload van de angular.JS-website.

Stap 2) Voeg href-tags toe die links naar "Angular JS Topics" en "Node JS Topics" vertegenwoordigen.

Stap 3) Voeg een div-tag toe met de ng-view-instructie die de weergave zal vertegenwoordigen.

Hierdoor kan de overeenkomstige weergave worden geïnjecteerd wanneer de gebruiker op "Angular JS Topics" of "Node JS Topics" klikt.

Stap 4) Voeg in uw script-tag voor AngularJS de "ngRoute-module" en de "$ routeProvider" -service toe.

Code Verklaring:

1. De eerste stap is om ervoor te zorgen dat u de "ngRoute-module" opneemt. Als dit op zijn plaats is, zal Angular automatisch de routing in uw applicatie afhandelen. De door Google ontwikkelde ngRoute-module heeft alle functionaliteit die routing mogelijk maakt. Door deze module toe te voegen, zal de applicatie automatisch alle routeringscommando's begrijpen.
2. De $ routeprovider is een service die angular gebruikt om op de achtergrond te luisteren naar de routes die worden aangeroepen. Dus wanneer de gebruiker op een link klikt, zal de routeprovider dit detecteren en vervolgens beslissen welke route hij moet nemen.
3. Maak één route voor de Angular-link - Dit blok betekent dat wanneer op de Angular-link wordt geklikt, het bestand Angular.html wordt geïnjecteerd en ook de Controller 'AngularController' wordt gebruikt om alle bedrijfslogica te verwerken.
4. Maak één route voor de Node-link - Dit blok betekent dat wanneer op de Node-link wordt geklikt, het bestand Node.html wordt geïnjecteerd en ook de Controller 'NodeController' wordt gebruikt om alle bedrijfslogica te verwerken.

Stap 5) Vervolgens moeten controllers worden toegevoegd om de bedrijfslogica voor zowel AngularController als NodeController te verwerken.

In elke controller maken we een reeks sleutel / waarde-paren om de onderwerpnamen en beschrijvingen voor elke cursus op te slaan. De arrayvariabele 'tutorial' wordt voor elke controller aan het scope-object toegevoegd.

Guru99 Global Event


Angular JS Topics
Node JS Topics

Stap 6) Maak pagina's genaamd Angular.html en Node.html. Voor elke pagina voeren we de onderstaande stappen uit.

Deze stappen zorgen ervoor dat alle sleutel / waarde-paren van de array op elke pagina worden weergegeven.

1. De instructie ng-repeat gebruiken om door elk sleutelwaardepaar te gaan dat is gedefinieerd in de zelfstudievariabele.
2. De naam en beschrijving van elk sleutel / waarde-paar weergeven.

• Angular.html

Anguler

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

• Node.html

Node

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

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Als u op de AngularJS Topics-link klikt, wordt de onderstaande uitvoer weergegeven.

De output laat duidelijk zien dat,

• Wanneer op de link "Angular JS Topics" wordt geklikt, beslist de routeProvider die we in onze code hebben aangegeven dat de Angular.html-code moet worden geïnjecteerd.
• Deze code wordt geïnjecteerd in de "div" -tag, die de ng-view-instructie bevat. De inhoud van de cursusbeschrijving is ook afkomstig van de "tutorialvariabele" die deel uitmaakte van het scope-object dat is gedefinieerd in AngularController.
• Wanneer men op de Node.js-onderwerpen klikt, zal hetzelfde resultaat plaatsvinden en zal de weergave voor Node.js-onderwerpen worden gemanifesteerd.
• Merk ook op dat de pagina-URL hetzelfde blijft, het is alleen de route na de # -tag die verandert. En dit is het concept van toepassingen met één pagina. De #hash-tag in de URL is een scheidingsteken dat de route (die in ons geval 'Angular' is zoals weergegeven in bovenstaande afbeelding) en de HTML-hoofdpagina (Sample.html) van elkaar scheidt

Een standaardroute maken

Routing in AngularJS biedt ook de mogelijkheid om een ​​standaardroute te hebben. Dit is de route die wordt gekozen als er geen match is voor de bestaande route.

De standaardroute wordt gemaakt door de volgende voorwaarde toe te voegen bij het definiëren van de $ routeProvider-service.

De onderstaande syntaxis betekent simpelweg omleiden naar een andere pagina als een van de bestaande routes niet overeenkomt.

otherwise ({redirectTo: 'page'});

Laten we hetzelfde voorbeeld hierboven gebruiken en een standaardroute toevoegen aan onze $ routeProvider-service.

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

Code Verklaring:

1. Hier gebruiken we dezelfde code als hierboven, met het enige verschil dat we de anders-instructie en de "redirectTo" -optie gebruiken om te specificeren welke view moet worden geladen als er geen route is opgegeven. In ons geval willen we dat de weergave '/ Angular' wordt weergegeven.

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Van de output,

• U kunt duidelijk zien dat de standaardweergave die wordt weergegeven de hoekige JS-weergave is.
• Dit komt doordat wanneer de pagina wordt geladen, deze naar de optie 'anders' in de functie $ routeProvider gaat en de weergave '/ Angular' laadt.

Toegang tot parameters van de route

Angular biedt ook de functionaliteit om parameters te verstrekken tijdens het routeren. De parameters worden aan het einde van de route in de URL toegevoegd, bijvoorbeeld http: //guru99/index.html#/Angular/1 . In dit voorbeeld

1. , http: //guru99/index.html is onze belangrijkste applicatie-URL
2. Het # -symbool is het scheidingsteken tussen de URL van de hoofdtoepassing en de route.
3. Hoekig is onze route
4. En tenslotte is '1' de parameter die aan onze route wordt toegevoegd

De syntaxis van hoe parameters er in de URL uitzien, wordt hieronder weergegeven:

HTMLPage # / route / parameter

Hier zult u zien dat de parameter wordt doorgegeven na de route in de URL.

Dus in ons voorbeeld hierboven voor de Angular JS-onderwerpen, kunnen we een parameter doorgeven zoals hieronder getoond

Sample.html # / Angular / 1

Sample.html # / Angular / 2

Sample.html # / Angular / 3

Hier kunnen de parameters van 1, 2 en 3 feitelijk de topicid vertegenwoordigen.

Laten we in detail kijken hoe we dit kunnen implementeren.

Stap 1) Voeg de volgende code toe aan uw weergave

1. Voeg een tabel toe om alle onderwerpen voor de Angular JS-cursus aan de gebruiker te tonen

2. Voeg een tabelrij toe om het onderwerp "Controllers" weer te geven. Wijzig voor deze rij de href-tag in "Angular / 1", wat betekent dat wanneer de gebruiker op dit onderwerp klikt, parameter 1 samen met de route in de URL wordt doorgegeven.

3. Voeg een tabelrij toe om het onderwerp "Modellen" weer te geven. Wijzig voor deze rij de href-tag in "Angular / 2", wat betekent dat wanneer de gebruiker op dit onderwerp klikt, parameter 2 samen met de route in de URL wordt doorgegeven.

4. Voeg een tabelrij toe om het onderwerp "Richtlijnen" weer te geven. Wijzig voor deze rij de href-tag in "Angular / 3", wat betekent dat wanneer de gebruiker op dit onderwerp klikt, parameter 3 samen met de route in de URL wordt doorgegeven.

Stap 2) Voeg in de routeprovider-servicefunctie de: topicId toe om aan te geven dat elke parameter die in de URL na de route wordt doorgegeven, moet worden toegewezen aan de variabele topicId.

Stap 3) Voeg de benodigde code toe aan de controller

1. Zorg ervoor dat u eerst de "$ routeParams" als parameter toevoegt bij het definiëren van de controllerfunctie. Deze parameter heeft toegang tot alle routeparameters die in de URL zijn doorgegeven.
2. De parameter "routeParams" heeft een verwijzing naar het object topicId, dat wordt doorgegeven als een routeparameter. Hier koppelen we de variabele '$ routeParams.topicId' aan ons scope-object als de variabele '$ scope.tutotialid'. Dit wordt gedaan zodat er in onze visie naar kan worden verwezen via de variabele tutorialid.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Stap 4) Voeg de uitdrukking toe om de variabele tutorialid weer te geven op de Angular.html-pagina.

Anguler


{{tutorialid}}

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

In het uitvoerscherm,

• Als u voor het eerste onderwerp op de link Onderwerpdetails klikt, wordt het cijfer 1 aan de URL toegevoegd.
• Dit nummer wordt dan door de Angular.JS routeprovider-service als een "routeparam" -argument gebruikt en is vervolgens toegankelijk voor onze controller.

Angular $ route-service gebruiken

De $ route-service geeft u toegang tot de eigenschappen van de route. De $ route-service is beschikbaar als parameter wanneer de functie is gedefinieerd in de controller. De algemene syntaxis van hoe de $ route parameter beschikbaar is vanaf de controller wordt hieronder getoond;

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

1. myApp is de angular.JS-module die is gedefinieerd voor uw applicaties
2. MyController is de naam van de controller die voor uw applicatie is gedefinieerd
3. Net zoals de $ scope-variabele beschikbaar wordt gemaakt voor uw applicatie, die wordt gebruikt om informatie van de controller door te geven aan de view. De parameter $ route wordt gebruikt om toegang te krijgen tot de eigenschappen van de route.

Laten we eens kijken hoe we de $ route-service kunnen gebruiken.

In dit voorbeeld

• We gaan een eenvoudige aangepaste variabele maken genaamd "mytext", die de string "This is angular" zal bevatten.
• We gaan deze variabele aan onze route koppelen. En later gaan we toegang krijgen tot deze string vanaf onze controller met behulp van de $ route-service en vervolgens het scope-object gebruiken om dat in onze visie weer te geven.

Laten we dus eens kijken welke stappen we moeten nemen om dit te bereiken.

Stap 1) Voeg een aangepast sleutel / waarde-paar toe aan de route. Hier voegen we een sleutel toe met de naam 'mytext' en kennen deze de waarde 'This is angular' toe.

Stap 2) Voeg de relevante code toe aan de controller

1. Voeg de parameter $ route toe aan de controllerfunctie. De parameter $ route is een sleutelparameter die is gedefinieerd in angular, waarmee men toegang heeft tot de eigenschappen van de route.
2. De variabele "mytext" die in de route werd gedefinieerd, is toegankelijk via de referentie $ route.current. Dit wordt dan toegewezen aan de 'text'-variabele van het scope-object. De tekstvariabele is dan dienovereenkomstig toegankelijk vanuit de weergave.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Stap 3) Voeg een verwijzing naar de tekstvariabele uit het scope-object toe als een uitdrukking. Dit wordt toegevoegd aan onze Angular.html-pagina zoals hieronder weergegeven.

Hierdoor wordt de tekst "This is angular" in het beeld geïnjecteerd. De uitdrukking {{tutorialid}} is dezelfde als die in het vorige onderwerp is gezien en hierdoor wordt het nummer '1' weergegeven.

Anguler


{{text}}

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Van de output,

• We kunnen zien dat de tekst "This is angular" ook wordt weergegeven als we op een van de links in de tabel klikken. De onderwerp-id wordt ook tegelijk met de tekst weergegeven.

HTML5-routering inschakelen

HTML5-routering wordt in principe gebruikt om een ​​schone URL te maken. Het betekent het verwijderen van de hashtag uit de URL. Dus de routerings-URL's, wanneer HTML5-routering wordt gebruikt, worden weergegeven zoals hieronder wordt weergegeven

Sample.html / Angular / 1

Sample.html / Angular / 2

Sample.html / Angular / 3

Dit concept staat normaal gesproken bekend als het presenteren van een mooie URL aan de gebruiker.

Er zijn 2 hoofdstappen die moeten worden uitgevoerd voor HTML5-routering.

1. $ LocationProvider
2. Onze basis leggen voor relatieve links

Laten we eens kijken naar de details van het uitvoeren van de bovengenoemde stappen in ons bovenstaande voorbeeld

Stap 1) Voeg de relevante code toe aan de hoekmodule

1. Voeg een baseURL-constante toe aan de applicatie - Dit is vereist voor HTML5-routering zodat de applicatie weet wat de basislocatie van de applicatie is.
2. Voeg de $ locationProvider-services toe. Met deze service kunt u de html5Mode definiëren.
3. Stel de html5Mode van de $ locationProvider-service in op true.

Stap 2) Verwijder alle #tags voor de links ('Angular / 1', 'Angular / 2', 'Angular / 3') om een ​​gemakkelijk leesbare URL te maken.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Van de output,

• U kunt zien dat de # -tag er niet is wanneer u de applicatie opent.

Overzicht

• Routing wordt gebruikt om verschillende weergaven aan de gebruiker op dezelfde webpagina te presenteren. Dit is eigenlijk het concept dat wordt gebruikt in applicaties met één pagina die worden geïmplementeerd voor bijna alle moderne webapplicaties
• Er kan een standaardroute worden ingesteld voor angular.JS-routing. Het wordt gebruikt om te bepalen wat de standaardweergave is die aan de gebruiker wordt getoond
• Parameters kunnen via de URL als routeparameters aan de route worden doorgegeven. Deze parameters zijn vervolgens toegankelijk via de parameter $ routeParams in de controller
• De $ route-service kan worden gebruikt om aangepaste sleutel / waarde-paren in de route te definiëren die vervolgens vanuit de weergave kunnen worden benaderd
• HTML5-routering wordt gebruikt om de #tag uit de routerings-URL in hoekig te verwijderen om een ​​mooie URL te vormen