AngularJs-routing med parametrar

Innan vi tittar på hur routing fungerar i AngularJS är det bra att förstå vilken typ av applikationsrouting som den byggdes för. Avsnittet nedan anger det sammanhanget, och varje teknik som följer bygger vidare på det.

Vad är Single Page Applications?

Enkelsidiga applikationer, eller SPA:er, är webbapplikationer som laddar en enda HTML-sida och sedan uppdaterar sidan dynamiskt när användaren interagerar med den. Istället för att begära ett nytt dokument från servern för varje klick, byter ett SPA bara ut den del av sidan som ändrats.

Den designen skapar ett problem. Om webbläsaren aldrig navigerar till ett nytt dokument ändras adressfältet aldrig, så användaren kan inte bokmärka en skärm, dela den eller använda bakåtknappen. Routing löser just detta problem.

Vad är routing i AngularJS?

Routing i AngularJS är en metod som låter dig skapa applikationer med en sida. Den gör det möjligt att skapa olika URLs för olika innehåll i dina webbapplikationer. AngularJS-routing hjälper också till att visa flera innehåll beroende på vilken rutt som väljs. Det specificeras i URL efter #-tecknet.

Låt oss ta ett exempel på en webbplats som är värd via URL http://example.com/index.html.

Den här sidan är värd för huvudskärmen i din applikation. Anta att applikationen organiserar en händelse och användaren vill lista händelserna, visa en i detalj eller ta bort en. I en Single Page-applikation med routing aktiverad är allt detta tillgängligt via följande länkar.

Symbolen # skulle användas tillsammans med de olika rutterna (ShowEvent, DisplayEvent och DeleteEvent).

• För att se alla händelser hänvisas användaren till http://example.com/index.html#ShowEvent
• För att se en specifik händelse hänvisas de till http://example.com/index.html#DisplayEvent
• För att ta bort en händelse hänvisas de till http://example.com/index.html#DeleteEvent

Observera att huvuddelen URL förblir detsamma. Endast fragmentet efter # ändras, och det fragmentet är vad AngularJS tittar på. Med konceptet etablerat täcker nästa avsnitt de delar du måste koppla ihop innan något av det fungerar.

Lägger till AngularJS Route med $routeProvider

Som tidigare diskuterats, rutter i AngularJS används för att dirigera användaren till en annan vy av din applikation. Denna dirigering sker på samma HTML-sida, så användaren har upplevelsen av att de inte har lämnat sidan.

För att implementera routing måste följande huvudsteg implementeras i din applikation i valfri ordning.

1. Referens angular-route.js. Detta JavaScript fil, utvecklad av Google, innehåller all routingfunktionalitet och måste inkluderas så att applikationen kan referera till modulens routingbehov.
2. Lägg till ett beroende till ngRoute-modulen inifrån din applikation. Utan detta beroende kan routing inte användas alls i AngularJS-applikationen.

Nedan är den allmänna syntaxen för detta uttalande. Detta är bara en normal deklaration av en modul med inkludering av nyckelordet ngRoute.

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

3. Konfigurera din $routeProvider. Detta tillhandahåller de olika rutterna i din applikation, och syntaxen anger helt enkelt att när den relevanta sökvägen är vald, använd rutten för att visa den givna vyn.

when(path, route)

4. Länkar till din rutt från din HTML-sida. På din HTML-sida kommer du att lägga till referenslänkar till de olika tillgängliga vägarna i din applikation.

<a href="#!/route1">Route 1</a><br/>

5. Slutligen skulle vara införandet av ng-view direktiv, som normalt skulle finnas i en div-tagg. Detta skulle användas för att injicera innehållet i vyn när den relevanta vägen väljs.

👍 Dricks: Alla fem steg är obligatoriska. En saknad angular-route.js-referens är den vanligaste anledningen till att en rutt i tysthet inte gör någonting, eftersom $routeProvider inte existerar utan den. Nästa avsnitt sammanställer alla fem i ett fungerande exempel.

AngularJS Routing Exempel

Låt oss nu titta på ett exempel på routing med de ovan nämnda stegen.

I vårt AngularJS-routingexempel med parametrar,

• En länk är till för att visa ämnena för en AngularJS kurs, och den andra är för node.js Naturligtvis.
• När användaren klickar på någon av länkarna kommer ämnena för den kursen att visas.

Steg 1) Inkludera angular-route-filen som en skriptreferens.

Denna ruttfil är nödvändig för att kunna använda funktionerna med att ha flera rutter och vyer. Filen kan laddas ner från AngularJS webbplats.

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 kommer att representera vyn.

Detta gör att motsvarande vy kan injiceras när användaren klickar på antingen "Angular JS Topics" eller "Node JS Topics".

Steg 4) I din skripttagg för AngularJS lägger du till "ngRoute-modulen" och tjänsten "$routeProvider".

Code Förklaring:

1. Inkludera "ngRoute-modulen". Med detta på plats hanterar Angular routing automatiskt och förstår alla routingkommandon.
2. $routeProvider är en tjänst som lyssnar i bakgrunden på de rutter som anropas. När användaren klickar på en länk detekterar den detta och bestämmer vilken rutt den ska ta.
3. Skapa en rutt för Angular-länken: när den klickas, injicera Angular.html och använd 'AngularController' för affärslogiken.
4. Skapa en rutt för Node-länken, som injicerar Node.html och använder 'NodeController' på samma sätt.

Steg 5) Nästa är att lägga till kontroller för att bearbeta affärslogiken för både AngularController och NodeController.

I varje kontroller skapar vi en array av nyckel-värde-par för att lagra ämnesnamn och beskrivningar för varje kurs. Arrayvariabeln 'tutorial' läggs till i scope-objektet för varje kontroller.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
<ul>
<li><a href="#!/Angular">Angular JS Topics</a></li>
<li><a href="#!/Node">Node JS Topics</a></li>
</ul>
<div ng-view></div>
</div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  }).
  when('/Node', {
    templateUrl: 'Node.html',
    controller: 'NodeController'
  });
}]);

sampleApp.controller('AngularController', function($scope) {
  $scope.tutorial = [
    {Name: "Controllers", Description: "Controllers in action"},
    {Name: "Models", Description: "Models and binding data"},
    {Name: "Directives", Description: "Flexibility of Directives"}
  ];
});

// NodeController follows the same shape with Node.js topics
sampleApp.controller('NodeController', function($scope) {
  $scope.tutorial = [{Name: "Promises", Description: "Power of Promises"}];
});
</script>
</body>
</html>

⚠️ Korrigeringar har tillämpats. Ocuco-landskapet <title> etiketten satt inuti <body>, chrset="UTF 8" var felstavat, den andra länken pekade på #Node.html istället för den registrerade rutten /Node, och mallsökvägar hade ett inledande snedstreck som utgår från domänroten.

Steg 6) Skapa sidor som heter Angular.html och Node.html. För varje sida utför vi stegen nedan.

Dessa steg säkerställer att alla nyckel-värdepar i arrayen visas på varje sida.

1. Använda ng-upprepa direktiv för att gå igenom varje nyckel-värdepar som definieras i handledningsvariabeln.
2. Visar namn och beskrivning av varje nyckel-värdepar.

• Angular.html

<h2>Angular</h2>
<ul ng-repeat="ptutor in tutorial">
<li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

• Node.html — identisk med listan ovan, med rubriken ändrad till ”Nod”. Båda mallarna har samma lydelse. tutorial variabel, som varje styrenhet tillhandahåller från sitt eget scope.

⚠️ Rättelse: Rubriken i den ursprungliga Angular.html-filen löd ”Anguler”. Stavningen är korrigerad ovan.

Om koden körs korrekt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

Om du klickar på länken AngularJS Topics visas följande utdata.

Utgången visar tydligt att,

• När länken "Angular JS Topics" klickas, bestämmer routeProvider som vi deklarerade i vår kod att Angular.html-koden ska injiceras.
• Denna kod kommer att injiceras i "div"-taggen, som innehåller ng-view-direktivet. Innehållet för kursbeskrivningen kommer också från "handledningsvariabeln" som var en del av scope-objektet definierat i AngularController.
• När man klickar på node.js Ämnen, samma resultat kommer att ske, och vyn för Node.js-ämnen kommer att manifesteras.
• Observera också att sidan URL förblir densamma. Det är bara rutten efter #-taggen som ändras, och det är detta som är konceptet med ensidiga applikationer. #hash-taggen i URL är en avgränsare mellan rutten (som i vårt fall är 'Angular') och den huvudsakliga HTML-sidan (Sample.html).

Exemplet fungerar bara när användaren klickar på en länk som matchar en registrerad rutt. Nästa avsnitt behandlar vad som ska hända när ingenting matchar.

Skapa en standardrutt i AngularJS

Routing i AngularJS ger också möjlighet att ha en standardrutt. Detta är rutten som väljs om det inte finns någon matchning för den befintliga rutten.

Standardrutten skapas genom att lägga till följande villkor när du definierar tjänsten $routeProvider.

Syntaxen nedan betyder helt enkelt att omdirigera till en annan sida om någon av de befintliga rutten inte matchar.

otherwise({
  redirectTo: 'page'
});

Låt oss använda samma exempel ovan och lägga till en standardrutt till vår $routeProvider-tjänst.

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

Code Förklaring:

1. Här använder vi samma kod som ovan, med den enda skillnaden att vi använder kommandot otherwise och alternativet "redirectTo" för att ange vilken vy som ska läsas in om ingen rutt anges. I vårt fall vill vi att vyn '/Angular' ska visas.

Om koden körs korrekt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

Från utgången,

• Du kan tydligt se att standardvyn som visas är AngularJS-vyn.
• Detta beror på att när sidan laddas går den till alternativet 'annat' i $routeProvider-funktionen och laddar vyn '/Angular'.

En standardrutt avgör vilken vy som laddas. Nästa avsnitt behandlar hur en enda rutt kan hantera många poster genom att bära ett värde i URL.

Hur man får åtkomst till parametrar från AngularJS-rutten

Angular erbjuder även funktionalitet för att skicka parametrar under routing. Parametrarna läggs till i slutet av routen i URL, Till exempel, http://guru99/index.html#/Angular/1. I detta Angular routing-exempel,

1. http://guru99/index.html är vår huvudsakliga applikation URL
2. #-tecknet är avgränsaren mellan huvudapplikationen URL och rutten
3. Angular är vår rutt
4. Och slutligen är '1' parametern som läggs till vår rutt

Den allmänna syntaxen är HTMLPage#/route/parameter, så de tidigare ämnena blir Sample.html#/Angular/1, #/Angular/2 och #/Angular/3, där siffran är ämnes-id:t.

Låt oss titta i detalj på hur vi kan implementera en Angular-rutt med en parameter.

Steg 1) Lägg till följande kod till din vy

1. Lägg till en tabell för att visa alla ämnen för Angular JS-kursen för användaren.
2. Lägg till en tabellrad för att visa ämnet "Kontrollörer". För den här raden, sätt href till "#!/Angular/1", så att klicka på ämnet skickar parameter 1 i URL tillsammans med rutten.
3. Lägg till en rad för ämnet "Modeller", med href satt till "#!/Angular/2" så att parameter 2 färdas i URL.
4. Lägg till en rad för ämnet "Direktiv", med href satt till "#!/Angular/3" så att parameter 3 färdas i URL.

Steg 2) Lägg till ämnes-ID i routeProvider-tjänstfunktionen
I routeProvider-tjänstfunktionen lägger du till :topicId platshållare för att ange att vilken parameter som helst som skickas i URL efter att rutten ska tilldelas variabeln topicId.

Steg 3) Lägg till den nödvändiga koden till styrenheten

1. Se till att först lägga till "$routeParams" som en parameter när du definierar regulatorfunktionen. Denna parameter kommer att ha åtkomst till alla ruttparametrar som skickas i URL.
2. "$routeParams" innehåller topicId som skickats i rutten. Bifogar $routeParams.topicId till omfattningen som $scope.tutorialid gör den tillgänglig för vyn som tutorialid.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
<tbody>
<tr><td>1</td><td>Controllers</td>
<td><a href="#!/Angular/1">Topic details</a></td></tr>
<!-- rows 2 and 3 repeat with /Angular/2 and /Angular/3 -->
</tbody>
</table>
<div ng-view></div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams',
function($scope, $routeParams) {
  $scope.tutorialid = $routeParams.topicId;
}]);
</script>
</body>
</html>

⚠️ Korrigeringar har tillämpats. Originalet använde bokstaven l istället för siffran 1 in href="#Angular/l", utelämnade ng-view containern så att mallen inte hade någonstans att rendera, och laddade angular-route.js innan angular.min.js, vilket utlöser ett modulfel.

Steg 4) Lägg till uttrycket för att visa variabeln
Lägg till uttrycket för att visa tutorialid-variabeln på sidan Angular.html.

<h2>Angular</h2>

<br><br>{{tutorialid}}

Om koden körs korrekt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

På utgångsskärmen,

• Om du klickar på länken Ämnesdetaljer för det första ämnet läggs siffran 1 till. URL.
• Det numret tas som ett "routeParams"-argument och blir tillgängligt i kontrollenheten.

Det är enkelt att läsa en parameter. Att hämta den post som parametern identifierar, innan vyn visas, är den uppgift som egenskapen behandlar härnäst.

Hur man förladdar data med resolve-egenskapen

Kontrollern i föregående avsnitt läser ett ämnes-ID och visar det omedelbart. Verkliga applikationer måste först hämta posten från en server, och om vyn renderas innan den begäran returneras ser användaren en tom mall som fylls i ett ögonblick senare. resolve egenskapen tar bort det där blixthålet av tomt innehåll.

Varje tangent inuti en resolve objekt är ett beroende som AngularJS förbereder innan rutten aktiveras. Om värdet är ett löfte väntar routern på att det ska stabiliseras. Först när varje löfte har lösts instansierar AngularJS kontrollanten och renderar mallen, och de lösta värdena injiceras i kontrollanten med namn, precis som vilken annan tjänst som helst.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController',
    resolve: {
      // The router waits for this promise before rendering
      topic: ['$http', '$route', function($http, $route) {
        var id = $route.current.params.topicId;
        return $http.get('/api/topics/' + id).then(function(response) {
          return response.data;
        });
      }]
    }
  });
}]);

// 'topic' is injected already resolved, so no loading state is needed
sampleApp.controller('AngularController', ['$scope', 'topic',
function($scope, topic) {
  $scope.topic = topic;
}]);

Två beteenden är viktiga här. Ett avvisat löfte avbryter ruttändringen och lämnar webbläsaren i den aktuella vyn, så en misslyckad begäran producerar aldrig en trasig sida. Men eftersom routern blockerar medan löftet väntar, gör en långsam slutpunkt att applikationen ser fryst ut. resolve med en framstegsindikator driven av $routeChangeStart och $routeChangeSuccess evenemang.

⚠️ Varning: Placera aldrig autentiseringskontroller endast inuti resolveAtt avvisa en rutt döljer en vy men skyddar inte data bakom den, och API-slutpunkten måste fortfarande framtvinga åtkomst på servern.

Utöver att förinläsa data kan en rutt även bära statiska konfigurationsvärden. Tjänsten som beskrivs härnäst handlar om hur en styrenhet läser dem.

Hur man använder Angular $route Service

Tjänsten $route låter dig komma åt ruttens egenskaper. Tjänsten $route är tillgänglig som en parameter när funktionen är definierad i kontrollenheten. Den allmänna syntaxen för hur parametern $route görs tillgänglig från kontrollenheten visas nedan.

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

1. myApp är AngularJS-modulen som är definierad för din applikation.
2. MyController är namnet på den kontrollenhet som definierats för din applikation.
3. Precis som $scope skickar information från kontrollenheten till vyn, exponerar $route egenskaperna för den aktuella rutten.

Låt oss ta en titt på hur vi kan använda $route-tjänsten.

I detta exempel,

• Vi kommer att skapa en enkel anpassad variabel som heter "mytext", som kommer att innehålla strängen "This is angular."
• Vi kommer att koppla den här variabeln till vår rutt. Later Vi kommer att komma åt den här strängen från vår kontroller med hjälp av $route-tjänsten och sedan använda scope-objektet för att visa den i vår vy.

Så, låt oss se vilka steg 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 'mintext' och tilldelar den värdet "Detta är kantigt."

Steg 2) Lägg till relevant kod i kontrollenheten.

1. Lägg till parametern $route till controllerfunktionen. Parametern $route är en nyckelparameter som definieras i Angular, vilken ger åtkomst till routens egenskaper.
2. Variabeln "mytext" som definierades i rutten kan nås via referensen $route.current. Detta tilldelas sedan till variabeln 'text' för scope-objektet. Textvariabeln kan sedan nås från vyn.

// Only the config and controller change; the page markup is unchanged
sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    mytext: "This is angular",   // custom key attached to the route
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams', '$route',
function($scope, $routeParams, $route) {
  $scope.tutorialid = $routeParams.topicId;
  $scope.text = $route.current.mytext;
}]);

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 gör att texten "This is angular" injiceras i vyn. {{tutorialid}}-uttrycket är detsamma som i föregående avsnitt och detta kommer att visa siffran '1'.

<h2>Angular</h2>

<br><br>{{text}}
<br><br>{{tutorialid}}

Om koden körs korrekt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

Från utgången,

• Vi kan se att texten "This is angular" också visas när vi klickar på någon av länkarna i tabellen. Ämnes-ID visas också samtidigt som texten.

Var URL som visats hittills har fortfarande ett #-symbol. Det tas bort i det sista konfigurationssteget.

Aktiverar HTML5-routing

HTML5-routing används för att skapa en renare version URLs. Det innebär att hashtaggen tas bort från URLSå routingen URLs, när HTML5-routing används, skulle se ut som visas nedan.

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Detta koncept är normalt känt som att presentera en vacker URL till användaren.

Det finns två huvudsteg som måste utföras för HTML2-routing.

1. Konfigurerar $locationProvider
2. Att sätta vår bas för relativa länkar

Låt oss titta närmare på hur man utför ovannämnda steg i vårt exempel.

Steg 1) Lägg till relevant kod i Angular-modulen.

1. Lägg till <base> taggen till dokumenthuvudet. Detta krävs för HTML5-routning så att applikationen vet var applikationens basplats är.
2. Lägg till tjänsten $locationProvider. Den här tjänsten låter dig definiera html5Mode.
3. Ställ in html5Mode för $locationProvider-tjänsten till sant.

Steg 2) Ta bort alla #-taggar för länkarna ('Angular/1', 'Angular/2', 'Angular/3') för att skapa lättlästa URLs.

<!-- In the head: required by html5Mode so relative templates resolve -->
<base href="/">

<!-- In the body: the # is dropped from every link -->
<a href="Angular/1">Topic details</a>

<script>
sampleApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);
</script>

⚠️ Rättelse: originalet deklarerade en baseUrl konstant pekning mot en lokal IDE-sökväg, vilket inte har någon effekt på html5Mode. AngularJS läser basplatsen från <base href> tagg. Originalet injicerades också $locationProvider utan att någonsin ringa html5Mode(true), så hashen togs aldrig bort.

Om koden körs korrekt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

Från utgången,

• Du kan se att #-taggen inte finns där när du kommer åt programmet.

Allt ovan använder ngRoute, routern som levereras av AngularJS-teamet. Det är inte det enda alternativet, och jämförelsen nedan förklarar när alternativet passar bättre.

ngRoute vs ui-router: Vilken router ska man välja?

ngRoute underhålls av AngularJS-teamet och matchar en URL direkt till en enda mall och kontroller. ui-router är ett communityprojekt byggt för att ta bort ngRoutes huvudsakliga begränsning: den matchar på applikation tillstånd snarare än på URL ensam, vilket gör att en skärm kan innehålla flera oberoende dirigerade regioner.

Välj ngRoute när varje URL mappas till en helsidesvy, eftersom den inte behöver något extra beroende och hela API:et får plats på en enda sida. Välj ui-router när en skärm har rutor som navigerar oberoende, eller när undervyer måste återanvända data som laddats av en förälder. Att migrera senare är möjligt men inte trivialt, eftersom tillståndsnamn ersätter URL mönster i alla mallar.

Vanliga AngularJS-routingfel och hur man åtgärdar dem

De flesta routingfel ger en tom ng-vy snarare än ett konsolfel, vilket gör dem svårare att diagnostisera än de borde vara. Varje symptom nedan anger dess orsak och dess lösning.

• Okänd leverantör: $routeProvider: angular-route.js laddades aldrig, eller laddades före angular.min.js. Referera till kärnbiblioteket först.
• Vyn förblir tom utan fel: inget element bär ng-view-direktivet, så mallen har ingenstans att rendera.
• Ingenting laddas vid första besöket: ingen rutt matchar den tomma sökvägen. Lägg till ett otherwise-block med ett redirectTo-värde.
• $routeParams är tom: Mönstret saknar sin platshållare för kolon. Det måste stå '/Angular/:topicId'.
• Mallar 404 efter html5Mode: konfigurera servern så att den skriver om omatchade sökvägar till bassidan och bekräfta att base href-taggen finns.
• Styrenheten körs aldrig om: Endast parametern ändrades, så AngularJS återanvände kontrollerinstansen istället för att bygga om den. Lyssna efter $routeUpdate-händelsen istället för att förlita dig på att kontrollerfunktionen aktiveras igen.

Vanliga frågor