AngularJs-ruting med parametere

Før vi ser på hvordan ruting fungerer i AngularJS, er det nyttig å forstå hva slags applikasjonsruting som ble bygget for. Avsnittet nedenfor setter denne konteksten, og hver teknikk som følger bygger på den.

Hva er enkeltsideapplikasjoner?

Enkeltsideapplikasjoner, eller SPA-er, er webapplikasjoner som laster inn én HTML-side og deretter oppdaterer siden dynamisk når brukeren samhandler med den. I stedet for å be om et nytt dokument fra serveren for hvert klikk, bytter en SPA bare ut den delen av siden som endret seg.

Den utformingen skaper ett problem. Hvis nettleseren aldri navigerer til et nytt dokument, endres aldri adressefeltet, slik at brukeren ikke kan bokmerke en skjerm, dele den eller bruke tilbakeknappen. Ruting løser nettopp dette problemet.

Hva er ruting i AngularJS?

Ruting i AngularJS er en metode som lar deg lage applikasjoner med én side. Den lar deg lage forskjellige URLs for ulikt innhold i webapplikasjonene dine. AngularJS-ruting hjelper også med å vise flere innholdstyper avhengig av hvilken rute som velges. Det er spesifisert i URL etter #-tegnet.

La oss ta et eksempel på et nettsted som hostes via URL http://example.com/index.html.

Denne siden er hovedskjermen til applikasjonen din. La oss si at applikasjonen organiserer en hendelse, og brukeren ønsker å liste opp hendelsene, se en i detalj eller slette en. I en applikasjon med én side og ruting aktivert er alt dette tilgjengelig via følgende lenker.

Symbolet # vil bli brukt sammen med de forskjellige rutene (ShowEvent, DisplayEvent og DeleteEvent).

• For å se alle hendelser, blir brukeren henvist til http://example.com/index.html#ShowEvent
• For å se én bestemt hendelse, blir de henvist til http://example.com/index.html#DisplayEvent
• For å slette en hendelse, blir de henvist til http://example.com/index.html#DeleteEvent

Merk at hoveddelen URL forblir den samme. Bare fragmentet etter # endres, og det er det AngularJS ser på. Med konseptet etablert, dekker neste avsnitt delene du må koble til før noe av det fungerer.

Legger til AngularJS Route ved å bruke $routeProvider

Som diskutert tidligere, ruter i AngularJS brukes til å rute brukeren til en annen visning av applikasjonen din. Denne rutingen gjøres på samme HTML-side, slik at brukeren opplever at de ikke har forlatt siden.

For å implementere ruting må følgende hovedtrinn implementeres i applikasjonen din i en spesifikk rekkefølge.

1. Referanse angular-route.js. Dette JavaScript fil, utviklet av Google, inneholder all rutingsfunksjonalitet og må inkluderes slik at applikasjonen kan referere til modulenes rutingsbehov.
2. Legg til en avhengighet til ngRoute-modulen fra applikasjonen din. Uten denne avhengigheten kan ikke ruting brukes i AngularJS-applikasjonen i det hele tatt.

Nedenfor er den generelle syntaksen til denne uttalelsen. Dette er bare en normal erklæring av en modul med inkludering av nøkkelordet ngRoute.

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

3. Konfigurer din $routeProvider. Denne gir de ulike rutene i applikasjonen din, og syntaksen sier ganske enkelt at når den relevante banen er valgt, bruk ruten til å vise den gitte visningen.

when(path, route)

4. Lenker til ruten din fra HTML-siden din. På HTML-siden din vil du legge til referanselenker til de forskjellige tilgjengelige rutene i applikasjonen din.

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

5. Til slutt ville være inkludering av ng-view-direktivet, som normalt vil være i en div-tag. Dette vil bli brukt til å injisere innholdet i visningen når den relevante ruten er valgt.

👍 Tips: Alle fem trinnene er obligatoriske. En manglende angular-route.js-referanse er den vanligste grunnen til at en rute ikke gjør noe i stillhet, fordi $routeProvider ikke eksisterer uten den. Neste avsnitt setter alle fem sammen i et fungerende eksempel.

Eksempel på AngularJS-ruting

La oss nå se på et eksempel på ruting ved å bruke de ovennevnte trinnene.

I vårt AngularJS-rutingseksempel med parametere,

• En lenke er for å vise emnene for en AngularJS selvfølgelig, og den andre er for node.js kurs.
• Når brukeren klikker på en av koblingene, vil emnene for kurset vises.

Trinn 1) Ta med angular-rute-filen som en skriptreferanse.

Denne rutefilen er nødvendig for å kunne bruke funksjonaliteten ved å ha flere ruter og visninger. Denne filen kan lastes ned fra AngularJS-nettstedet.

Trinn 2) Legg til href-tagger som vil representere lenker til "Angular JS Topics" og "Node JS Topics."

Trinn 3) Legg til en div-tag med ng-view-direktivet som vil representere visningen.

Dette vil tillate at den tilsvarende visningen injiseres hver gang brukeren klikker på enten "Angular JS Topics" eller "Node JS Topics."

Trinn 4) I skriptkoden for AngularJS legger du til "ngRoute-modulen" og "$routeProvider"-tjenesten.

Code Forklaring:

1. Inkluder «ngRoute-modulen». Med denne på plass håndterer Angular ruting automatisk og forstår alle rutingskommandoene.
2. $routeProvider er en tjeneste som lytter i bakgrunnen til rutene som kalles. Når brukeren klikker på en lenke, oppdager den dette og bestemmer hvilken rute den skal ta.
3. Opprett én rute for Angular-lenken: når den klikkes, injiser Angular.html og bruk 'AngularController' for forretningslogikken.
4. Opprett én rute for Node-lenken, som injiserer Node.html og bruker 'NodeController' på samme måte.

Trinn 5) Neste er å legge til kontrollere for å behandle forretningslogikken for både AngularController og NodeController.

I hver kontroller oppretter vi en matrise med nøkkelverdipar for å lagre emnenavn og beskrivelser for hvert kurs. Matrisevariabelen «tutorial» legges til omfangsobjektet for hver 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>

⚠️ Rettelser er iverksatt. Ocuco <title> merkelappen satt inni <body>, chrset="UTF 8" var feilstavet, den andre lenken pekte på #Node.html i stedet for den registrerte ruten /Node, og malbanene hadde en innledende skråstrek som løses fra domeneroten.

Trinn 6) Lag sider kalt Angular.html og Node.html. For hver side utfører vi trinnene nedenfor.

Disse trinnene vil sikre at alle nøkkelverdi-parene i matrisen vises på hver side.

1. Bruke ng-gjenta direktiv for å gå gjennom hvert nøkkel-verdi-par som er definert i veiledningsvariabelen.
2. Viser navn og beskrivelse av hvert nøkkelverdi-par.

• Angular.html

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

• Node.html — identisk med listen ovenfor, med overskriften endret til «Node». Begge malene har samme lesemåte. tutorial variabel, som hver kontroller leverer fra sitt eget omfang.

⚠️ Korreksjon: Overskriften i den originale Angular.html-filen var «Anguler». Stavemåten er korrigert ovenfor.

Hvis koden kjøres uten problemer, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Hvis du klikker på lenken AngularJS Topics, vil resultatet nedenfor vises.

Utgangen viser tydelig at

• Når koblingen "Angular JS Topics" klikkes, bestemmer ruteleverandøren som vi deklarerte i koden vår at Angular.html-koden skal injiseres.
• Denne koden vil bli injisert i "div"-taggen, som inneholder ng-view-direktivet. Innholdet i kursbeskrivelsen kommer også fra "veiledningsvariabelen" som var en del av scope-objektet definert i AngularController.
• Når man klikker på node.js Emner, det samme resultatet vil finne sted, og visningen for Node.js-emner vil bli manifestert.
• Legg også merke til at siden URL forblir den samme. Det er bare ruten etter #-taggen som endres, og dette er konseptet med enkeltsideapplikasjoner. #hash-taggen i URL er et skilletegn mellom ruten (som i vårt tilfelle er «Angular») og den primære HTML-siden (Sample.html).

Eksemplet fungerer bare mens brukeren klikker på en lenke som samsvarer med en registrert rute. Neste avsnitt tar for seg hva som skal skje når ingenting samsvarer.

Opprette en standardrute i AngularJS

Ruting i AngularJS gir også muligheten til å ha en standardrute. Dette er ruten som velges hvis det ikke er samsvar for den eksisterende ruten.

Standardruten opprettes ved å legge til følgende betingelse når du definerer $routeProvider-tjenesten.

Syntaksen nedenfor betyr ganske enkelt å omdirigere til en annen side hvis noen av de eksisterende rutene ikke samsvarer.

otherwise({
  redirectTo: 'page'
});

La oss bruke samme eksempel ovenfor og legge til en standardrute til vår $routeProvider-tjeneste.

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

Code Forklaring:

1. Her bruker vi samme kode som ovenfor, med den eneste forskjellen at vi bruker otherwise-setningen og alternativet «redirectTo» for å spesifisere hvilken visning som skal lastes inn hvis ingen rute er spesifisert. I vårt tilfelle ønsker vi at '/Angular'-visningen skal vises.

Hvis koden kjøres uten problemer, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Fra utgangen,

• Du kan tydelig se at standardvisningen som vises er AngularJS-visningen.
• Dette er fordi når siden lastes, går den til alternativet 'ellers' i $routeProvider-funksjonen og laster '/Angular'-visningen.

En standardrute bestemmer hvilken visning som lastes inn. Neste avsnitt dekker hvordan en enkelt rute kan betjene mange poster ved å ha en verdi i URL.

Hvordan få tilgang til parametere fra AngularJS-ruten

Angular tilbyr også funksjonalitet for å sende parametere under ruting. Parameterne legges til på slutten av ruten i URL, For eksempel, http://guru99/index.html#/Angular/1. I dette Angular routing-eksemplet,

1. http://guru99/index.html er vår hovedapplikasjon URL
2. #-tegnet er skillet mellom hovedapplikasjonen URL og ruten
3. Kantet er vår rute
4. Og til slutt er '1' parameteren som legges til ruten vår

Den generelle syntaksen er HTMLPage#/rute/parameter, så de tidligere emnene blir Sample.html#/Angular/1, #/Angular/2 og #/Angular/3, hvor sifferet er emne-ID-en.

La oss se nærmere på hvordan vi kan implementere en Angular-rute med en parameter.

Trinn 1) Legg til følgende kode i visningen

1. Legg til en tabell for å vise alle emnene for Angular JS-kurset til brukeren.
2. Legg til en tabellrad for å vise emnet «Kontrollere». For denne raden setter du href til «#!/Angular/1», slik at når du klikker på emnet, sendes parameter 1 i URL sammen med ruten.
3. Legg til en rad for emnet «Modeller», med href satt til «#!/Angular/2» slik at parameter 2 beveger seg i URL.
4. Legg til en rad for emnet «Direktiver», med href satt til «#!/Angular/3» slik at parameter 3 beveger seg i URL.

Trinn 2) Legg til emne-ID i routeProvider-tjenestefunksjonen
I routeProvider-tjenestefunksjonen legger du til :topicId plassholder for å angi at enhver parameter som sendes i URL etter at ruten skal tilordnes variabelen topicId.

Trinn 3) Legg til den nødvendige koden til kontrolleren

1. Sørg for å først legge til «$routeParams» som en parameter når du definerer kontrollerfunksjonen. Denne parameteren vil ha tilgang til alle ruteparametrene som sendes i URL.
2. «$routeParams» inneholder emne-ID-en som er sendt i ruten. Vedlegger $routeParams.topicId til omfanget som $scope.tutorialid gjør den tilgjengelig for visningen 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>

⚠️ Rettelser er iverksatt. Originalen brukte bokstaven l i stedet for sifferet 1 in href="#Angular/l", utelatt ng-view beholderen slik at malen ikke hadde noe sted å gjengi, og lastet inn angular-route.js før du angular.min.js, som kaster en modulfeil.

Trinn 4) Legg til uttrykket for å vise variabelen
Legg til uttrykket for å vise tutorialid-variabelen på Angular.html-siden.

<h2>Angular</h2>

<br><br>{{tutorialid}}

Hvis koden kjøres uten problemer, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

I utdataskjermen,

• Hvis du klikker på lenken Emnedetaljer for det første emnet, legges tallet 1 til. URL.
• Det tallet tas som et «routeParams»-argument og blir tilgjengelig i kontrolleren.

Det er enkelt å lese en parameter. Det er egenskapens jobb som dekkes videre å hente posten som parameteren identifiserer, før visningen vises.

Slik forhåndslaster du data med resolve-egenskapen

Kontrolleren i forrige avsnitt leser en emne-ID og viser den umiddelbart. Ekte applikasjoner må først hente posten fra en server, og hvis visningen gjengis før forespørselen returneres, ser brukeren en tom mal som fylles ut et øyeblikk senere. resolve egenskapen fjerner det glimtet av tomt innhold.

Hver nøkkel inni en resolve objektet er en avhengighet som AngularJS forbereder før ruten aktiveres. Hvis verdien er et løfte, venter ruteren på at det skal løses. Først når hvert løfte er løst, instansierer AngularJS kontrolleren og gjengir malen, og de løste verdiene injiseres i kontrolleren etter navn, akkurat som enhver annen tjeneste.

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;
}]);

To virkemåter er viktige her. Et avvist løfte avbryter ruteendringen og lar nettleseren stå i gjeldende visning, slik at en mislykket forespørsel aldri produserer en ødelagt side. Men fordi ruteren blokkerer mens løftet venter, får et tregt endepunkt applikasjonen til å virke frossen. resolve med en fremdriftsindikator drevet av $routeChangeStart og $routeChangeSuccess arrangementer.

⚠️ Advarsel: Plasser aldri autentiseringskontroller bare inni resolveÅ avvise en rute skjuler en visning, men beskytter ikke dataene bak den, og API-endepunktet må fortsatt håndheve tilgang på serveren.

Utover forhåndslasting av data, kan en rute også inneholde statiske konfigurasjonsverdier. Tjenesten som beskrives nedenfor er hvordan en kontroller leser dem.

Slik bruker du Angular $route-tjenesten

Tjenesten $route gir deg tilgang til egenskapene til ruten. Tjenesten $route er tilgjengelig som en parameter når funksjonen er definert i kontrolleren. Den generelle syntaksen for hvordan $route-parameteren gjøres tilgjengelig fra kontrolleren vises nedenfor.

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

1. myApp er AngularJS-modulen som er definert for applikasjonen din.
2. MyController er navnet på kontrolleren som er definert for applikasjonen din.
3. Akkurat som $scope sender informasjon fra kontrolleren til viewet, eksponerer $route egenskapene til gjeldende rute.

La oss se på hvordan vi kan bruke $route-tjenesten.

I dette eksemplet,

• Vi skal lage en enkel tilpasset variabel kalt "mytext", som vil inneholde strengen "This is angular."
• Vi skal legge til denne variabelen i ruten vår. Later Vi skal få tilgang til denne strengen fra kontrolleren vår ved hjelp av $route-tjenesten, og deretter bruke scope-objektet til å vise den i visningen vår.

Så la oss se trinnene vi må utføre for å oppnå dette.

Trinn 1) Legg til et egendefinert nøkkelverdi-par til ruten. Her legger vi til en nøkkel kalt "min tekst" og tildeler den verdien "Dette er kantet."

Trinn 2) Legg til den relevante koden i kontrolleren.

1. Legg til $route-parameteren i kontrollerfunksjonen. $route-parameteren er en nøkkelparameter definert i Angular, som gir tilgang til egenskapene til ruten.
2. Variabelen "mytext" som ble definert i ruten kan nås via $route.current-referansen. Dette tilordnes deretter 'tekst'-variabelen til scope-objektet. Tekstvariabelen kan deretter nås fra visningen tilsvarende.

// 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;
}]);

Trinn 3) Legg til en referanse til tekstvariabelen fra scope-objektet som et uttrykk. Dette vil bli lagt til vår Angular.html-side som vist nedenfor.

Dette vil føre til at teksten "This is angular" sprøytes inn i visningen. {{tutorialid}}-uttrykket er det samme som det som ble sett i forrige emne, og dette vil vise tallet '1'.

<h2>Angular</h2>

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

Hvis koden kjøres uten problemer, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Fra utgangen,

• Vi kan se at teksten "This is angular" også vises når vi klikker på noen av lenkene i tabellen. Emne-ID-en vises også samtidig med teksten.

Hver URL vist så langt har fortsatt et #-symbol. Det siste konfigurasjonstrinnet fjerner det.

Aktiverer HTML5-ruting

HTML5-ruting brukes til å lage rene URLs. Det betyr at emneknaggen fjernes fra URLSå rutingen URLs, når HTML5-ruting brukes, vil se ut som vist nedenfor.

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Dette konseptet er vanligvis kjent som å presentere en pen URL til brukeren.

Det er 2 hovedtrinn som må utføres for HTML5-ruting.

1. Konfigurerer $locationProvider
2. Setter vår base for relative koblinger

La oss se nærmere på hvordan du utfører trinnene nevnt ovenfor i eksemplet vårt.

Trinn 1) Legg til relevant kode i Angular-modulen.

1. legge en <base> taggen til dokumenthodet. Dette er nødvendig for HTML5-ruting, slik at applikasjonen vet hva applikasjonens baseplassering er.
2. Legg til tjenesten $locationProvider. Denne tjenesten lar deg definere html5Mode.
3. Sett html5Mode for $locationProvider-tjenesten til true.

Trinn 2) Fjern alle #-taggene for lenkene ('Angular/1', 'Angular/2', 'Angular/3') for å lage lettleste 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>

⚠️ Korreksjon: originalen erklærte en baseUrl konstant peking på en lokal IDE-sti, som ikke har noen effekt på html5Mode. AngularJS leser basisplasseringen fra <base href> taggen. Originalen ble også injisert $locationProvider uten å noen gang ringe html5Mode(true), så hashen ble aldri fjernet.

Hvis koden kjøres uten problemer, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Fra utgangen,

• Du kan se at #-taggen ikke er der når du åpner applikasjonen.

Alt ovenfor bruker ngRoute, ruteren levert av AngularJS-teamet. Det er ikke det eneste alternativet, og sammenligningen nedenfor forklarer når alternativet passer bedre.

ngRoute vs. ui-router: Hvilken ruter du skal velge

ngRoute vedlikeholdes av AngularJS-teamet og samsvarer med en URL direkte til en enkelt mal og kontroller. ui-router er et fellesskapsprosjekt bygget for å fjerne ngRoutes hovedbegrensning: den matcher på applikasjonen stat snarere enn på URL alene, noe som gjør at én skjerm kan inneholde flere uavhengig rutede regioner.

Velg ngRoute når hver URL kartlegges til én helsidesvisning, siden den ikke trenger noen ekstra avhengighet og hele API-et får plass på én enkelt side. Velg ui-router når en skjerm har ruter som navigerer uavhengig, eller når undervisninger må gjenbruke data lastet inn av en overordnet visning. Migrering senere er mulig, men ikke trivielt, fordi tilstandsnavn erstatter URL mønstre gjennom hele malene.

Vanlige AngularJS-rutingsfeil og hvordan du fikser dem

De fleste rutingsfeil produserer en blank ng-visning i stedet for en konsollfeil, noe som gjør dem vanskeligere å diagnostisere enn de burde være. Hvert symptom nedenfor angir årsaken og løsningen.

• Ukjent leverandør: $routeProvider: angular-route.js ble aldri lastet inn, eller lastet inn før angular.min.js. Se først på kjernebiblioteket.
• Visningen forblir tom uten feil: ingen elementer bærer ng-view-direktivet, så malen har ingen steder å gjengis.
• Ingenting lastes inn ved første besøk: Ingen rute samsvarer med den tomme banen. Legg til en ellers-blokk med en redirectTo-verdi.
• $ruteParams er tom: Mønsteret mangler kolonplassholderen sin. Det må stå '/Angular/:topicId'.
• Maler 404 etter html5Mode: konfigurer serveren til å omskrive umatchede stier til basissiden, og bekreft at base href-taggen er til stede.
• Kontrolleren kjører aldri på nytt: Bare parameteren ble endret, så AngularJS brukte kontrollerinstansen på nytt i stedet for å gjenoppbygge den. Lytt etter $routeUpdate-hendelsen i stedet for å stole på at kontrollerfunksjonen utløses på nytt.

Spørsmål og svar