Bevor wir mit dem Routing beginnen, werfen wir einen kurzen Überblick über einseitige Anwendungen.
Was sind Einzelseitenanwendungen?
Single-Page-Anwendungen oder (SPAs) sind Webanwendungen, die eine einzelne HTML-Seite laden und die Seite basierend auf der Benutzerinteraktion mit der Webanwendung dynamisch aktualisieren.
Was ist Routing in AngularJS?
In AngularJS können Sie durch Routing Einzelseitenanwendungen erstellen.
- Mit AngularJS-Routen können Sie unterschiedliche URLs für unterschiedliche Inhalte in Ihrer Anwendung erstellen.
- Mit AngularJS-Routen können je nach gewählter Route mehrere Inhalte angezeigt werden.
- Eine Route wird in der URL nach dem # -Zeichen angegeben.
Nehmen wir ein Beispiel für eine Site, die über die URL http://example.com/index.html gehostet wird .
Auf dieser Seite würden Sie die Hauptseite Ihrer Anwendung hosten. Angenommen, die Anwendung hat ein Ereignis organisiert und Sie möchten die verschiedenen angezeigten Ereignisse anzeigen oder die Details eines bestimmten Ereignisses anzeigen oder ein Ereignis löschen. Wenn in einer Einzelseitenanwendung das Routing aktiviert ist, sind alle diese Funktionen über die folgenden Links verfügbar
http://example.com/index.html#ShowEvent
http://example.com/index.html#DisplayEvent
http://example.com/index.html#DeleteEvent
Das Symbol # wird zusammen mit den verschiedenen Routen (ShowEvent, DisplayEvent und DeleteEvent) verwendet.
- Wenn der Benutzer also alle Ereignisse sehen möchte, wird er auf den Link ( http://example.com/index.html#ShowEvent ) weitergeleitet
- Wenn sie nur ein bestimmtes Ereignis sehen möchten, werden sie auf den Link ( http://example.com/index.html#DisplayEvent ) oder weitergeleitet
- Wenn sie ein Ereignis löschen möchten, werden sie auf den Link http://example.com/index.html#DeleteEvent weitergeleitet .
Beachten Sie, dass die Haupt-URL gleich bleibt.
In diesem Tutorial lernen Sie:
- Hinzufügen einer Winkelroute ($ routeProvider)
- Erstellen einer Standardroute
- Zugriff auf Parameter von der Route
- Verwenden des Angular $ route-Dienstes
- Aktivieren des HTML5-Routings
Hinzufügen einer Winkelroute ($ routeProvider)
Wie bereits erwähnt, werden Routen in AngularJS verwendet, um den Benutzer zu einer anderen Ansicht Ihrer Anwendung zu leiten. Dieses Routing erfolgt auf derselben HTML-Seite, sodass der Benutzer die Erfahrung hat, dass er die Seite nicht verlassen hat.
Um das Routing zu implementieren, müssen die folgenden Hauptschritte in einer bestimmten Reihenfolge in Ihrer Anwendung implementiert werden.
- Verweis auf angle-route.js. Dies ist eine von Google entwickelte JavaScript-Datei, die über alle Funktionen des Routings verfügt. Dies muss in Ihrer Anwendung platziert werden, damit es auf alle Hauptmodule verweisen kann, die für das Routing erforderlich sind.
-
Der nächste wichtige Schritt besteht darin, dem ngRoute-Modul in Ihrer Anwendung eine Abhängigkeit hinzuzufügen. Diese Abhängigkeit ist erforderlich, damit die Routing-Funktionalität innerhalb der Anwendung verwendet werden kann. Wenn diese Abhängigkeit nicht hinzugefügt wird, kann das Routing in der Angular.JS-Anwendung nicht verwendet werden.
Nachfolgend finden Sie die allgemeine Syntax dieser Anweisung. Dies ist nur eine normale Deklaration eines Moduls mit dem Schlüsselwort ngRoute.
var module = angular.module("sampleApp", ['ngRoute']);
- Der nächste Schritt wäre die Konfiguration Ihres $ routeProvider. Dies ist erforderlich, um die verschiedenen Routen in Ihrer Anwendung bereitzustellen.
Nachfolgend finden Sie die allgemeine Syntax dieser Anweisung, die sehr selbsterklärend ist. Es wird lediglich angegeben, dass bei Auswahl des entsprechenden Pfads die Route verwendet wird, um dem Benutzer die angegebene Ansicht anzuzeigen.
when(path, route)
- Links zu Ihrer Route aus Ihrer HTML-Seite. Auf Ihrer HTML-Seite fügen Sie Referenzlinks zu den verschiedenen verfügbaren Routen in Ihrer Anwendung hinzu.
Route 1
- Schließlich wäre die Aufnahme der ng-view-Direktive, die normalerweise in einem div-Tag enthalten wäre. Dies würde verwendet, um den Inhalt der Ansicht einzufügen, wenn die relevante Route ausgewählt wird.
Schauen wir uns nun ein Beispiel für das Routing mit den oben genannten Schritten an.
In unserem Beispiel
Wir werden dem Benutzer 2 Links präsentieren,
- Zum einen werden die Themen für einen Angular JS- Kurs angezeigt , zum anderen für den Node.js- Kurs.
- Wenn der Benutzer auf einen der Links klickt, werden die Themen für diesen Kurs angezeigt.
Schritt 1) Fügen Sie die Angle-Route-Datei als Skriptreferenz hinzu.
Diese Routendatei ist erforderlich, um die Funktionen mehrerer Routen und Ansichten nutzen zu können. Diese Datei kann von der Website angle.JS 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 Anweisung ng-view hinzu, das die Ansicht darstellt.
Auf diese Weise kann die entsprechende Ansicht 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:
- Der erste Schritt besteht darin, sicherzustellen, dass das "ngRoute-Modul" enthalten ist. Mit dieser Option übernimmt Angular automatisch das Routing in Ihrer Anwendung. Das von Google entwickelte ngRoute-Modul verfügt über alle Funktionen, die ein Routing ermöglichen. Durch Hinzufügen dieses Moduls versteht die Anwendung automatisch alle Routing-Befehle.
- Der $ routeprovider ist ein Dienst, mit dem Angular im Hintergrund die aufgerufenen Routen abhört. Wenn der Benutzer auf einen Link klickt, erkennt der Routeprovider dies und entscheidet dann, welche Route er nehmen soll.
- Erstellen einer Route für den Angular-Link - Dieser Block bedeutet, dass beim Klicken auf den Angular-Link die Datei Angular.html eingefügt und der Controller 'AngularController' zum Verarbeiten von Geschäftslogik verwendet wird.
- Erstellen einer Route für den Knotenlink - Dieser Block bedeutet, dass beim Klicken auf den Knotenlink die Datei Node.html eingefügt und der Controller 'NodeController' zum Verarbeiten von Geschäftslogik verwendet wird.
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 Bereichsobjekt für jeden Controller hinzugefügt.
Event Registration Guru99 Global Event
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.
- Verwenden Sie die Anweisung ng-repeat, um jedes in der Lernprogrammvariablen definierte Schlüssel-Wert-Paar durchzugehen.
- Anzeige des Namens und der Beschreibung jedes Schlüssel-Wert-Paares.
- Angular.html
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Node.html
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Wenn Sie auf den Link AngularJS Topics klicken, wird die folgende Ausgabe angezeigt.
Die Ausgabe zeigt deutlich, dass,
- Wenn Sie auf den Link "Angular JS Topics" klicken, entscheidet der in unserem Code deklarierte routeProvider, 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. Der Inhalt für die Kursbeschreibung stammt auch aus der "Tutorial-Variablen", die Teil des im AngularController definierten Bereichsobjekts war.
- Wenn man auf die Node.js-Themen klickt, wird das gleiche Ergebnis erzielt und die Ansicht für Node.js-Themen wird angezeigt.
- Beachten Sie außerdem, dass die Seiten-URL gleich bleibt. Nur die Route nach dem # -Tag ändert sich. Und das ist das Konzept von Einzelseitenanwendungen. Das # hash-Tag in der URL ist ein Trennzeichen, das die Route (in unserem Fall "Angular", wie im obigen Bild gezeigt) und die Haupt-HTML-Seite (Sample.html) trennt.
Erstellen einer Standardroute
Das Routing in AngularJS bietet auch die Möglichkeit, eine Standardroute zu erstellen. Dies ist die Route, die ausgewählt wird, wenn die vorhandene Route nicht übereinstimmt.
Die Standardroute wird erstellt, indem beim Definieren des Dienstes $ routeProvider die folgende Bedingung hinzugefügt wird.
Die folgende Syntax bedeutet einfach, auf eine andere Seite umzuleiten, wenn eine der vorhandenen Routen nicht übereinstimmt.
otherwise ({redirectTo: 'page'});
Verwenden wir das gleiche Beispiel oben und fügen unserem $ routeProvider-Service eine Standardroute hinzu.
function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);
Code Erläuterung:
- Hier verwenden wir denselben Code wie oben, mit dem einzigen Unterschied, dass wir die else-Anweisung und die Option "redirectTo" verwenden, um anzugeben, welche Ansicht geladen werden soll, wenn keine Route angegeben ist. In unserem Fall möchten wir, dass die Ansicht '/ Angular' angezeigt wird.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Aus der Ausgabe,
- Sie können deutlich sehen, dass die angezeigte Standardansicht die eckige JS-Ansicht ist.
- Dies liegt daran, dass beim Laden der Seite die Option 'else' in der Funktion $ routeProvider aufgerufen und die Ansicht '/ Angular' geladen wird.
Zugriff auf Parameter von der Route
Angular bietet auch die Funktionalität, Parameter während des Routings bereitzustellen. Die Parameter werden am Ende der Route in der URL hinzugefügt, z. B. http: //guru99/index.html#/Angular/1 . In diesem Beispiel
- , http: //guru99/index.html ist unsere Hauptanwendungs-URL
- Das Symbol # ist das Trennzeichen zwischen der URL der Hauptanwendung und der Route.
- Winkel ist unsere Route
- Und schließlich ist '1' der Parameter, der unserer Route hinzugefügt wird
Die Syntax, wie Parameter in der URL aussehen, ist unten dargestellt:
HTMLPage # / route / parameter
Hier werden Sie feststellen, dass der Parameter nach der Route in der URL übergeben wird.
In unserem obigen Beispiel für die Angular JS-Themen können wir also einen Parameter übergeben, wie unten gezeigt
Sample.html # / Angular / 1
Sample.html # / Angular / 2
Sample.html # / Angular / 3
Hier können die Parameter 1, 2 und 3 tatsächlich die Topic-ID darstellen.
Schauen wir uns im Detail an, wie wir dies umsetzen können.
Schritt 1) Fügen Sie Ihrer Ansicht den folgenden Code hinzu
-
Fügen Sie eine Tabelle hinzu, um dem Benutzer alle Themen für den Angular JS-Kurs anzuzeigen
-
Fügen Sie eine Tabellenzeile hinzu, um das Thema "Controller" anzuzeigen. Ändern Sie für diese Zeile das href-Tag in "Angular / 1". Wenn der Benutzer auf dieses Thema klickt, wird der Parameter 1 zusammen mit der Route in der URL übergeben.
-
Fügen Sie eine Tabellenzeile hinzu, um das Thema "Modelle" anzuzeigen. Ändern Sie für diese Zeile das href-Tag in "Angular / 2". Wenn der Benutzer auf dieses Thema klickt, wird der Parameter 2 zusammen mit der Route in der URL übergeben.
-
Fügen Sie eine Tabellenzeile hinzu, um das Thema "Direktiven" anzuzeigen. Ändern Sie für diese Zeile das href-Tag in "Angular / 3". Wenn der Benutzer auf dieses Thema klickt, wird der Parameter 3 zusammen mit der Route in der URL übergeben.
Schritt 2) Fügen Sie in der Routeprovider-Dienstfunktion die: topicId hinzu, um anzugeben, dass alle Parameter, die in der URL nach der Route übergeben werden, der Variablen topicId zugewiesen werden sollen.
Schritt 3) Fügen Sie dem Controller den erforderlichen Code hinzu
- Stellen Sie sicher, dass Sie zuerst "$ routeParams" als Parameter hinzufügen, wenn Sie die Controller-Funktion definieren. Dieser Parameter hat Zugriff auf alle in der URL übergebenen Routenparameter.
- Der Parameter "routeParams" verweist auf das topicId-Objekt, das als route-Parameter übergeben wird. Hier hängen wir die Variable '$ routeParams.topicId' als Variable '$ scope.tutotialid' an unser Bereichsobjekt an. Dies geschieht, damit in unserer Ansicht über die Variable tutorialid darauf verwiesen werden kann.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Schritt 4) Fügen Sie den Ausdruck hinzu, um die Tutorialid-Variable auf der Seite Angular.html anzuzeigen.
Anguler
{{tutorialid}}
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Im Ausgabebildschirm
- Wenn Sie für das erste Thema auf den Link Themendetails klicken, wird die Nummer 1 an die URL angehängt.
- Diese Nummer wird dann vom Angular.JS-Routeprovider-Dienst als "Routeparam" -Argument verwendet und kann dann von unserem Controller abgerufen werden.
Verwenden des Angular $ route-Dienstes
Mit dem Dienst $ route können Sie auf die Eigenschaften der Route zugreifen. Der Dienst $ route ist als Parameter verfügbar, wenn die Funktion in der Steuerung definiert ist. Die allgemeine Syntax, wie der Parameter $ route vom Controller verfügbar ist, ist unten dargestellt.
myApp.controller('MyController',function($scope,$route)
- myApp ist das angle.JS-Modul, das für Ihre Anwendungen definiert ist
- MyController ist der Name des Controllers, der für Ihre Anwendung definiert wurde
- Genau wie die Variable $ scope für Ihre Anwendung verfügbar gemacht wird, mit der Informationen vom Controller an die Ansicht übergeben werden. Mit dem Parameter $ route wird auf die Eigenschaften der Route zugegriffen.
Lassen Sie uns einen Blick darauf werfen, wie wir den $ route-Service nutzen können.
In diesem Beispiel ist
- Wir werden eine einfache benutzerdefinierte Variable namens "mytext" erstellen, die die Zeichenfolge "This is angle" enthält.
- Wir werden diese Variable an unsere Route anhängen. Und später werden wir über den $ route-Dienst von unserem Controller aus auf diese Zeichenfolge zugreifen und anschließend das scope-Objekt verwenden, um dies in unserer Ansicht anzuzeigen.
Schauen 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 angle" zu.
Schritt 2) Fügen Sie dem Controller den entsprechenden Code hinzu
- Fügen Sie der Controller-Funktion den Parameter $ route hinzu. Der Parameter $ route ist ein in Angular definierter Schlüsselparameter, mit dem auf die Eigenschaften der Route zugegriffen werden kann.
- Auf die in der Route definierte Variable "mytext" kann über die Referenz $ route.current zugegriffen werden. Dies wird dann der Variablen 'text' des Bereichsobjekts zugewiesen. Auf die Textvariable kann dann aus der Ansicht entsprechend zugegriffen werden.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Schritt 3) Fügen Sie als Ausdruck einen Verweis auf die Textvariable aus dem Bereichsobjekt hinzu. Dies wird unserer Angular.html-Seite wie unten gezeigt hinzugefügt.
Dadurch wird der Text "Dies ist eckig" in die Ansicht eingefügt. Der Ausdruck {{tutorialid}} ist der gleiche wie im vorherigen Thema und zeigt die Nummer '1' an.
Anguler
{{text}}
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Aus der Ausgabe,
- Wir können sehen, dass der Text "Dies ist eckig" auch angezeigt wird, wenn wir auf einen der Links in der Tabelle klicken. Die Themen-ID wird gleichzeitig mit dem Text angezeigt.
Aktivieren des HTML5-Routings
HTML5-Routing wird grundsätzlich verwendet, um eine saubere URL zu erstellen. Dies bedeutet das Entfernen des Hashtags aus der URL. Wenn das HTML5-Routing verwendet wird, werden die Routing-URLs wie folgt angezeigt
Sample.html / Angular / 1
Sample.html / Angular / 2
Sample.html / Angular / 3
Dieses Konzept wird normalerweise als Darstellung einer hübschen URL für den Benutzer bezeichnet.
Für das HTML5-Routing müssen zwei Hauptschritte ausgeführt werden.
- $ LocationProvider konfigurieren
- Festlegen unserer Basis für relative Links
Schauen wir uns die Details an, wie die oben genannten Schritte in unserem obigen Beispiel ausgeführt werden
Schritt 1) Fügen Sie dem Winkelmodul den entsprechenden Code hinzu
- Hinzufügen einer baseURL-Konstante zur Anwendung - Dies ist für das HTML5-Routing erforderlich, damit die Anwendung den Basisspeicherort der Anwendung kennt.
- Fügen Sie die Dienste $ locationProvider hinzu. Mit diesem Dienst können Sie den HTML5-Modus definieren.
- Setzen Sie den html5Mode des $ locationProvider-Dienstes auf true.
Schritt 2) Entfernen Sie alle #Tags für die Links ('Angular / 1', 'Angular / 2', 'Angular / 3'), um eine einfach zu lesende URL zu erstellen.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Aus der Ausgabe,
- Sie können sehen, dass das # -Tag beim Zugriff auf die Anwendung nicht vorhanden ist.
Zusammenfassung
- Das Routing wird verwendet, um dem Benutzer verschiedene Ansichten auf derselben Webseite anzuzeigen. Dies ist im Grunde das Konzept, das in Einzelseitenanwendungen verwendet wird, die für fast alle modernen Webanwendungen implementiert sind
- Für das Angular.JS-Routing kann eine Standardroute eingerichtet werden. Es wird verwendet, um zu bestimmen, welche Standardansicht dem Benutzer angezeigt wird
- Parameter können über die URL als Routenparameter an die Route übergeben werden. Auf diese Parameter wird anschließend mithilfe des Parameters $ routeParams in der Steuerung zugegriffen
- Mit dem Dienst $ route können benutzerdefinierte Schlüssel-Wert-Paare in der Route definiert werden, auf die anschließend in der Ansicht zugegriffen werden kann
- HTML5-Routing wird verwendet, um das #Tag aus der Routing-URL in einem Winkel zu entfernen und eine hübsche URL zu bilden