AngularJS-Routing mit Parametern

Bevor wir uns mit der Funktionsweise des Routings in AngularJS befassen, ist es hilfreich zu verstehen, für welche Art von Anwendung das Routing entwickelt wurde. Der folgende Abschnitt erläutert diesen Kontext, und alle nachfolgenden Techniken bauen darauf auf.

Was sind Single-Page-Anwendungen?

Single-Page-Anwendungen (SPAs) sind Webanwendungen, die eine einzelne HTML-Seite laden und diese dann dynamisch aktualisieren, sobald der Benutzer mit ihr interagiert. Anstatt bei jedem Klick ein neues Dokument vom Server anzufordern, tauscht eine SPA nur den geänderten Teil der Seite aus.

Dieses Design birgt ein Problem: Wenn der Browser nie zu einem neuen Dokument navigiert, ändert sich die Adressleiste nicht, sodass der Benutzer weder eine Seite als Lesezeichen speichern, noch teilen oder die Zurück-Taste verwenden kann. Routing löst genau dieses Problem.

Was ist Routing in AngularJS?

Routing in AngularJS ist eine Methode, mit der Sie Single-Page-Anwendungen erstellen können. Sie ermöglicht es Ihnen, verschiedene URLAngularJS-Routing ermöglicht die Anzeige unterschiedlicher Inhalte in Ihren Webanwendungen. Es hilft dabei, je nach gewählter Route verschiedene Inhalte anzuzeigen. Dies wird in der Datei `/json/s` spezifiziert. URL nach dem #-Zeichen.

Nehmen wir als Beispiel eine Website, die über den URL http://example.com/index.html.

Diese Seite enthält die Hauptseite Ihrer Anwendung. Angenommen, die Anwendung organisiert eine Veranstaltung und der Benutzer möchte die Veranstaltungen auflisten, eine einzelne detailliert anzeigen oder eine löschen. In einer Single-Page-Anwendung mit aktiviertem Routing ist all dies über die folgenden Links möglich.

Das #-Symbol würde zusammen mit den verschiedenen Routen (ShowEvent, DisplayEvent und DeleteEvent) verwendet werden.

• Um alle Ereignisse zu sehen, wird der Benutzer weitergeleitet zu http://example.com/index.html#ShowEvent
• Um eine bestimmte Veranstaltung zu sehen, werden sie weitergeleitet zu http://example.com/index.html#DisplayEvent
• Um ein Ereignis zu löschen, werden sie weitergeleitet zu http://example.com/index.html#DeleteEvent

Beachten Sie, dass das Haupt URL Es bleibt alles gleich. Nur der Teil nach dem # ändert sich, und genau diesen Teil überwacht AngularJS. Nachdem das Konzept geklärt ist, behandelt der nächste Abschnitt die Komponenten, die Sie miteinander verbinden müssen, damit alles funktioniert.

Hinzufügen einer AngularJS-Route mit $routeProvider

Wie bereits erwähnt, Routen in AngularJS Sie dienen dazu, den Benutzer zu einer anderen Ansicht Ihrer Anwendung weiterzuleiten. Diese Weiterleitung erfolgt auf derselben HTML-Seite, sodass der Benutzer den Eindruck hat, die Seite nicht verlassen zu haben.

Um das Routing zu implementieren, müssen die folgenden Hauptschritte in beliebiger Reihenfolge in Ihrer Anwendung implementiert werden.

1. Verweisen Sie auf angular-route.js. JavaSkript Datei, entwickelt von Google, enthält die gesamte Routing-Funktionalität und muss eingebunden werden, damit die Anwendung auf die Routing-Anforderungen der Module zugreifen kann.
2. Fügen Sie in Ihrer Anwendung eine Abhängigkeit zum ngRoute-Modul hinzu. Ohne diese Abhängigkeit kann das Routing in der AngularJS-Anwendung überhaupt nicht verwendet werden.

Nachfolgend finden Sie die allgemeine Syntax dieser Anweisung. Dies ist lediglich eine normale Deklaration eines Moduls unter Einbeziehung des Schlüsselworts ngRoute.

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

3. Konfigurieren Sie Ihren $routeProvider. Dieser stellt die verschiedenen Routen in Ihrer Anwendung bereit, und die Syntax legt einfach fest, dass beim Auswählen des entsprechenden Pfades die Route verwendet wird, um die angegebene Ansicht anzuzeigen.

when(path, route)

4. Links zu Ihrer Route von Ihrer HTML-Seite aus. Auf Ihrer HTML-Seite fügen Sie Referenzlinks zu den verschiedenen verfügbaren Routen in Ihrer Anwendung hinzu.

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

5. Schließlich wäre die Aufnahme der ng-view-Direktive, was normalerweise in einem div-Tag wäre. Dies würde verwendet werden, um den Inhalt der Ansicht einzufügen, wenn die relevante Route ausgewählt wird.

💡 TIPP: Alle fünf Schritte sind zwingend erforderlich. Ein fehlender Verweis auf angular-route.js ist die häufigste Ursache dafür, dass eine Route keine Funktion hat, da $routeProvider ohne diesen Verweis nicht existiert. Im nächsten Abschnitt werden alle fünf Schritte in einem funktionierenden Beispiel zusammengeführt.

AngularJS-Routing-Beispiel

Schauen wir uns nun ein Beispiel für das Routing mit den oben genannten Schritten an.

In unserem AngularJS-Routing-Beispiel mit Parametern:

• Ein Link dient dazu, die Themen für ein AngularJS Natürlich, und der andere ist für die Node.js an.
• Wenn der Benutzer auf einen der Links klickt, werden die Themen für diesen Kurs angezeigt.

Schritt 1) Fügen Sie die Angular-Route-Datei als Skriptreferenz ein.

Diese Routendatei ist erforderlich, um die Funktionalität mehrerer Routen und Ansichten nutzen zu können. Sie kann von der AngularJS-Website heruntergeladen werden.

Schritt 2) Fügen Sie href-Tags hinzu, die Links zu „Angular JS Topics“ und „Node JS Topics“ darstellen.

Schritt 3) Fügen Sie ein div-Tag mit der ng-view-Direktive hinzu, das die Ansicht darstellt.

Dadurch kann die entsprechende Ansicht immer dann eingefügt werden, wenn der Benutzer entweder auf „Angular JS Topics“ oder „Node JS Topics“ klickt.

Schritt 4) Fügen Sie in Ihrem Skript-Tag für AngularJS das „ngRoute-Modul“ und den „$routeProvider“-Dienst hinzu.

Code Erläuterung:

1. Binden Sie das „ngRoute-Modul“ ein. Damit übernimmt Angular das Routing automatisch und versteht alle Routing-Befehle.
2. Der $routeProvider ist ein Dienst, der im Hintergrund auf aufgerufene Routen lauscht. Wenn der Benutzer auf einen Link klickt, erkennt er dies und entscheidet, welche Route aufgerufen werden soll.
3. Erstellen Sie eine Route für den Angular-Link: Wenn darauf geklickt wird, injizieren Sie Angular.html und verwenden Sie 'AngularController' für die Geschäftslogik.
4. Erstellen Sie eine Route für den Node-Link, die Node.html einbindet und 'NodeController' auf die gleiche Weise verwendet.

Schritt 5) Als Nächstes müssen Controller hinzugefügt werden, um die Geschäftslogik sowohl für den AngularController als auch für den NodeController zu verarbeiten.

In jedem Controller erstellen wir ein Array von Schlüssel-Wert-Paaren, um die Themennamen und -beschreibungen für jeden Kurs zu speichern. Die Array-Variable „tutorial“ wird dem Scope-Objekt jedes Controllers hinzugefügt.

<!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>

⚠️ Korrekturen wurden vorgenommen. Das <title> Das Etikett saß innen <body>, chrset="UTF 8" war falsch geschrieben, der zweite Link verwies auf #Node.html anstelle der registrierten Route /Nodeund die Vorlagenpfade enthielten einen führenden Schrägstrich, der vom Domain-Root aus aufgelöst wurde.

Schritt 6) Erstellen Sie Seiten mit den Namen Angular.html und Node.html. Für jede Seite führen wir die folgenden Schritte aus.

Diese Schritte stellen sicher, dass alle Schlüssel-Wert-Paare des Arrays auf jeder Seite angezeigt werden.

1. Verwendung der ng-repeat-Direktive um jedes in der Tutorial-Variable definierte Schlüssel-Wert-Paar durchzugehen.
2. Zeigt den Namen und die Beschreibung jedes Schlüssel-Wert-Paares an.

• Angular.html

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

• Node.html — identisch mit dem obigen Eintrag, nur dass die Überschrift in „Knoten“ geändert wurde. Beide Vorlagen enthalten denselben Text. tutorial Variable, die jeder Controller aus seinem eigenen Gültigkeitsbereich bereitstellt.

⚠️ Korrektur: Die Überschrift in der ursprünglichen Angular.html-Datei lautete „Anguler“. Die Schreibweise wurde oben korrigiert.

Wenn der Code erfolgreich ausgeführt wird, wird beim Ausführen des Codes im Browser die folgende Ausgabe angezeigt.

Ausgang:

Wenn Sie auf den Link „AngularJS Topics“ klicken, wird die unten stehende Ausgabe angezeigt.

Die Ausgabe zeigt deutlich, dass

• Wenn auf den Link „Angular JS Topics“ geklickt wird, entscheidet der routeProvider, den wir in unserem Code deklariert haben, dass der Angular.html-Code eingefügt werden soll.
• Dieser Code wird in das „div“-Tag eingefügt, das die ng-view-Direktive enthält. Außerdem stammt der Inhalt der Kursbeschreibung aus der „Tutorial-Variable“, die Teil des im AngularController definierten Scope-Objekts war.
• Wenn man auf klickt Node.js Themen wird das gleiche Ergebnis erzielt und die Ansicht für Node.js-Themen wird angezeigt.
• Beachten Sie außerdem, dass die Seite URL Die Route bleibt gleich. Nur die Route nach dem #-Tag ändert sich, und das ist das Konzept von Single-Page-Anwendungen. Der #-Hash-Tag im URL ist ein Trennzeichen zwischen der Route (in unserem Fall 'Angular') und der Haupt-HTML-Seite (Sample.html).

Das Beispiel funktioniert nur, solange der Benutzer auf einen Link klickt, der einer registrierten Route entspricht. Im nächsten Abschnitt wird beschrieben, was passieren soll, wenn keine Übereinstimmung gefunden wird.

Erstellen einer Standardroute in AngularJS

Routing in AngularJS bietet auch die Möglichkeit, eine Standardroute zu haben. Dies ist die Route, die ausgewählt wird, wenn es keine Übereinstimmung mit der vorhandenen Route gibt.

Die Standardroute wird erstellt, indem beim Definieren des Dienstes $routeProvider die folgende Bedingung hinzugefügt wird.

Die unten stehende Syntax bedeutet einfach, dass auf eine andere Seite umgeleitet wird, falls keine der vorhandenen Routen übereinstimmt.

otherwise({
  redirectTo: 'page'
});

Verwenden wir das gleiche Beispiel oben und fügen wir eine Standardroute zu unserem $routeProvider-Dienst hinzu.

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

Code Erläuterung:

1. Wir verwenden hier denselben Code wie oben, mit dem einzigen Unterschied, dass wir die `otherwise`-Anweisung und die Option `redirectTo` verwenden, um festzulegen, welche Ansicht geladen werden soll, wenn keine Route angegeben ist. In unserem Fall soll die Ansicht `/Angular` angezeigt werden.

Wenn der Code erfolgreich ausgeführt wird, wird beim Ausführen des Codes im Browser die folgende Ausgabe angezeigt.

Ausgang:

Aus der Ausgabe,

• Man kann deutlich sehen, dass die standardmäßig angezeigte Ansicht die AngularJS-Ansicht ist.
• Dies liegt daran, dass beim Laden der Seite die Option „Andernfalls“ in der Funktion $routeProvider aufgerufen wird und die Ansicht „/Angular“ geladen wird.

Eine Standardroute legt fest, welche Ansicht geladen wird. Im nächsten Abschnitt wird erläutert, wie eine einzelne Route viele Datensätze bedienen kann, indem sie einen Wert im URL.

So greifen Sie über die AngularJS-Route auf Parameter zu

Angular bietet außerdem die Möglichkeit, Parameter während des Routings zu übergeben. Die Parameter werden am Ende der Route hinzugefügt. URL, beispielsweise, http://guru99/index.html#/Angular/1. In diesem Angular-Routing-Beispiel:

1. http://guru99/index.html ist unsere Hauptanwendung URL
2. Das #-Symbol dient als Trennzeichen zwischen der Hauptanwendung URL und die Route
3. Angular ist unsere Route
4. Und schließlich ist „1“ der Parameter, der unserer Route hinzugefügt wird

Die allgemeine Syntax lautet HTMLPage#/route/parameterDie früheren Themen werden also zu Sample.html#/Angular/1, #/Angular/2 und #/Angular/3, wobei die Ziffer die Themen-ID ist.

Schauen wir uns im Detail an, wie wir eine Angular-Route mit einem Parameter implementieren können.

Schritt 1) ​​Fügen Sie Ihrer Ansicht den folgenden Code hinzu

1. Füge eine Tabelle hinzu, die dem Benutzer alle Themen des Angular JS-Kurses anzeigt.
2. Fügen Sie eine Tabellenzeile zum Thema „Controller“ hinzu. Setzen Sie für diese Zeile den href-Wert auf „#!/Angular/1“, sodass beim Klicken auf das Thema der Parameter 1 übergeben wird. URL entlang der Route.
3. Fügen Sie eine Zeile für das Thema „Modelle“ hinzu, wobei der href-Wert auf „#!/Angular/2“ gesetzt ist, sodass Parameter 2 in der URL.
4. Fügen Sie eine Zeile für das Thema „Direktiven“ hinzu, wobei der href-Wert auf „#!/Angular/3“ gesetzt ist, sodass Parameter 3 im URL.

Schritt 2) Fügen Sie die Themen-ID in der RouteProvider-Dienstfunktion hinzu.
Fügen Sie in der routeProvider-Servicefunktion Folgendes hinzu: :topicId Platzhalter, der angibt, dass jeder übergebene Parameter im URL Anschließend sollte die Route der Variablen topicId zugewiesen werden.

Schritt 3) Fügen Sie dem Controller den erforderlichen Code hinzu

1. Stellen Sie sicher, dass Sie beim Definieren der Controller-Funktion zuerst „$routeParams“ als Parameter hinzufügen. Dieser Parameter hat Zugriff auf alle übergebenen Routenparameter. URL.
2. „$routeParams“ enthält die in der Route übergebene Topic-ID. Anhängen $routeParams.topicId bis zum Umfang als $scope.tutorialid stellt es der Ansicht als tutorialid zur Verfügung.

<!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>

⚠️ Korrekturen wurden vorgenommen. Im Original wurde der Buchstabe verwendet l anstelle der Ziffer 1 in href="#Angular/l", ließ die ng-view Der Container war so beschaffen, dass die Vorlage nirgendwo gerendert werden konnte, und wurde geladen. angular-route.js bevor angular.min.jswas einen Modulfehler auslöst.

Schritt 4) Fügen Sie den Ausdruck hinzu, um die Variable anzuzeigen.
Fügen Sie den Ausdruck hinzu, um die Variable „tutorialid“ auf der Seite „Angular.html“ anzuzeigen.

<h2>Angular</h2>

<br><br>{{tutorialid}}

Wenn der Code erfolgreich ausgeführt wird, wird beim Ausführen des Codes im Browser die folgende Ausgabe angezeigt.

Ausgang:

Im Ausgabebildschirm

• Wenn Sie auf den Link „Themendetails“ für das erste Thema klicken, wird die Zahl 1 angehängt. URL.
• Diese Zahl wird als „routeParams“-Argument verwendet und ist im Controller zugänglich.

Das Auslesen eines Parameters ist unkompliziert. Das Abrufen des Datensatzes, den der Parameter identifiziert, bevor die Ansicht angezeigt wird, ist die Aufgabe der im Folgenden behandelten Eigenschaft.

Wie man Daten mit der resolve-Eigenschaft vorlädt

Der Controller im vorherigen Abschnitt liest eine Themen-ID und zeigt sie sofort an. Reale Anwendungen müssen den Datensatz zunächst von einem Server abrufen, und wenn die Ansicht gerendert wird, bevor diese Anfrage abgeschlossen ist, sieht der Benutzer eine leere Vorlage, die sich erst einen Moment später füllt. resolve Die Eigenschaft entfernt dieses kurze Aufblitzen von leerem Inhalt.

Jeder Schlüssel im Inneren eines resolve Das Objekt ist eine Abhängigkeit, die AngularJS vor der Aktivierung der Route vorbereitet. Handelt es sich bei dem Wert um ein Promise, wartet der Router auf dessen Auflösung. Erst wenn alle Promises aufgelöst sind, instanziiert AngularJS den Controller und rendert die Vorlage. Die aufgelösten Werte werden dann, wie bei jedem anderen Service, per Namen in den Controller injiziert.

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

Zwei Verhaltensweisen sind hier relevant. Ein abgelehntes Promise bricht den Routenwechsel ab und belässt den Browser in der aktuellen Ansicht, sodass eine fehlgeschlagene Anfrage niemals zu einer fehlerhaften Seite führt. Da der Router jedoch blockiert, solange das Promise aussteht, lässt ein langsamer Endpunkt die Anwendung einfrieren. resolve mit einem Fortschrittsindikator, der von der $routeChangeStart und $routeChangeSuccess Veranstaltungen.

⚠️ Warnung: Platzieren Sie Authentifizierungsprüfungen niemals nur innerhalb resolveDas Ablehnen einer Route blendet zwar eine Ansicht aus, schützt aber nicht die dahinterliegenden Daten, und der API-Endpunkt muss weiterhin den Zugriff auf dem Server erzwingen.

Neben dem Vorladen von Daten kann eine Route auch statische Konfigurationswerte enthalten. Der nachfolgend beschriebene Dienst zeigt, wie ein Controller diese Werte ausliest.

So verwenden Sie den Angular $route-Dienst

Der Dienst `$route` ermöglicht den Zugriff auf die Eigenschaften einer Route. Er steht als Parameter zur Verfügung, wenn die Funktion im Controller definiert wird. Die allgemeine Syntax für die Verwendung des Parameters `$route` im Controller wird im Folgenden dargestellt.

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

1. myApp ist das für Ihre Anwendung definierte AngularJS-Modul.
2. MyController ist der Name des für Ihre Anwendung definierten Controllers.
3. So wie $scope Informationen vom Controller an die Ansicht weitergibt, stellt $route die Eigenschaften der aktuellen Route bereit.

Schauen wir uns an, wie wir den $route-Dienst nutzen können.

In diesem Beispiel

• Wir werden eine einfache benutzerdefinierte Variable namens „mytext“ erstellen, die die Zeichenfolge „This is Angular“ enthält.
• Wir werden diese Variable an unsere Route anhängen. Later Wir werden über den $route-Dienst von unserem Controller auf diese Zeichenkette zugreifen und sie dann mithilfe des Scope-Objekts in unserer Ansicht anzeigen.

Sehen wir uns also die Schritte an, die wir ausführen müssen, um dies zu erreichen.

Schritt 1) Fügen Sie der Route ein benutzerdefiniertes Schlüssel-Wert-Paar hinzu. Hier fügen wir einen Schlüssel namens „mytext“ hinzu und weisen ihm den Wert „This is Angular“ zu.

Schritt 2) Fügen Sie den entsprechenden Code zum Controller hinzu.

1. Fügen Sie den Parameter `$route` zur Controller-Funktion hinzu. Der Parameter `$route` ist ein wichtiger Parameter in Angular, der den Zugriff auf die Eigenschaften der Route ermöglicht.
2. Auf die Variable „mytext“, die in der Route definiert wurde, kann über die Referenz $route.current zugegriffen werden. Dieser wird dann der Variablen „text“ des Scope-Objekts zugewiesen. Auf die Textvariable kann dann entsprechend aus der Ansicht zugegriffen werden.

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

Schritt 3) Fügen Sie einen Verweis auf die Textvariable aus dem Bereichsobjekt als Ausdruck hinzu. Dies wird wie unten gezeigt zu unserer Angular.html-Seite hinzugefügt.

Dadurch wird der Text „This is angle“ in die Ansicht eingefügt. Der {{tutorialid}}-Ausdruck ist derselbe wie im vorherigen Thema und zeigt die Zahl „1“ an.

<h2>Angular</h2>

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

Wenn der Code erfolgreich ausgeführt wird, wird beim Ausführen des Codes im Browser die folgende Ausgabe angezeigt.

Ausgang:

Aus der Ausgabe,

• Wir können sehen, dass der Text „Dies ist Angular“ auch angezeigt wird, wenn wir auf einen der Links in der Tabelle klicken. Die Themen-ID wird gleichzeitig mit dem Text angezeigt.

Jede URL Die bisherige Darstellung enthält noch ein #-Symbol. Im letzten Konfigurationsschritt wird es entfernt.

Aktivieren des HTML5-Routings

HTML5-Routing wird verwendet, um saubere URLs. Es bedeutet die Entfernung des Hashtags aus dem URLDie Weiterleitung erfolgt also URLWenn HTML5-Routing verwendet wird, würde dies wie unten dargestellt aussehen.

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Dieses Konzept ist gemeinhin als die Präsentation eines hübschen URL für den Benutzer.

Es gibt zwei Hauptschritte, die für das HTML2-Routing ausgeführt werden müssen.

1. Konfigurieren von $locationProvider
2. Wir legen unsere Basis für relative Links fest

Schauen wir uns nun genauer an, wie die oben genannten Schritte in unserem Beispiel durchzuführen sind.

Schritt 1) Fügen Sie den entsprechenden Code zum Angular-Modul hinzu.

1. Hinzufügen <base> Fügen Sie dem Dokumentkopf ein Tag hinzu. Dies ist für das HTML5-Routing erforderlich, damit die Anwendung ihren Basisspeicherort kennt.
2. Fügen Sie den Dienst $locationProvider hinzu. Mit diesem Dienst können Sie den html5Mode definieren.
3. Setzen Sie den html5Mode des $locationProvider-Dienstes auf true.

Schritt 2) Entfernen Sie alle #-Tags vor den Links („Angular/1“, „Angular/2“, „Angular/3“), um eine lesbare Darstellung zu gewährleisten. 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>

⚠️ Korrektur: Das Original erklärte ein baseUrl Eine Konstante verweist auf einen lokalen IDE-Pfad, der keinen Einfluss auf html5Mode hat. AngularJS liest den Basispfad aus dem <base href> Etikett. Das Original wurde ebenfalls eingefügt. $locationProvider ohne jemals anzurufen html5Mode(true)Der Hash wurde also nie entfernt.

Wenn der Code erfolgreich ausgeführt wird, wird beim Ausführen des Codes im Browser die folgende Ausgabe angezeigt.

Ausgang:

Aus der Ausgabe,

• Sie können sehen, dass das #-Tag nicht vorhanden ist, wenn Sie auf die Anwendung zugreifen.

Alle oben genannten Beispiele verwenden ngRoute, den vom AngularJS-Team mitgelieferten Router. Es ist jedoch nicht die einzige Option, und der folgende Vergleich erklärt, wann die Alternative besser geeignet ist.

ngRoute vs ui-router: Welchen Router soll ich wählen?

ngRoute wird vom AngularJS-Team gepflegt und entspricht einem URL direkt zu einer einzigen Vorlage und einem einzigen Controller. ui-router ist ein Community-Projekt, das entwickelt wurde, um die Hauptbeschränkung von ngRoute zu beseitigen: Es passt auf die Anwendung. Zustand eher als auf der URL allein, wodurch ein Bildschirm mehrere unabhängig geroutete Bereiche enthalten kann.

Wähle ngRoute, wenn jedes URL Die Darstellung erfolgt auf einer einzigen Seite, da keine zusätzlichen Abhängigkeiten benötigt werden und die gesamte API auf eine Seite passt. Wählen Sie ui-router, wenn ein Bildschirm Bereiche enthält, die unabhängig voneinander navigieren, oder wenn untergeordnete Ansichten Daten wiederverwenden müssen, die von einem übergeordneten Element geladen wurden. Eine spätere Migration ist zwar möglich, aber nicht trivial, da die Zustandsnamen ersetzt werden. URL Muster durchziehen die Vorlagen.

Häufige Routing-Fehler in AngularJS und wie man sie behebt

Die meisten Routing-Fehler führen zu einer leeren ng-view-Ansicht anstelle einer Konsolenfehlermeldung, was die Diagnose unnötig erschwert. Jedes Symptom wird im Folgenden mit seiner Ursache und Lösung beschrieben.

• Unbekannter Anbieter: $routeProvider: angular-route.js wurde entweder nie geladen oder vor angular.min.js geladen. Bitte laden Sie zuerst die Kernbibliothek.
• Die Ansicht bleibt leer, ohne dass eine Fehlermeldung angezeigt wird: Kein Element enthält die ng-view-Direktive, daher hat die Vorlage keinen Ort, an dem sie gerendert werden kann.
• Beim ersten Besuch lädt nichts: Es gibt keine passende Route für den leeren Pfad. Fügen Sie einen „otherwise“-Block mit einem „redirectTo“-Wert hinzu.
• $routeParams ist leer: Dem Muster fehlt der Doppelpunkt-Platzhalter. Es muss '/Angular/:topicId' lauten.
• Templates 404 nach html5Mode: Konfigurieren Sie den Server so, dass nicht übereinstimmende Pfade auf die Basisseite umgeschrieben werden, und stellen Sie sicher, dass das Basis-href-Tag vorhanden ist.
• Der Controller wird nie erneut ausgeführt: Da sich nur der Parameter geändert hatte, nutzte AngularJS die Controller-Instanz wieder, anstatt sie neu zu erstellen. Anstatt darauf zu warten, dass die Controller-Funktion erneut aufgerufen wird, wird auf das `$routeUpdate`-Ereignis reagiert.

Häufig gestellte Fragen