Heutzutage hätte jeder von den "Single Page Applications" gehört. Viele der bekannten Websites wie Google Mail verwenden das Konzept der Single Page Applications (SPAs).
SPAs ist das Konzept, bei dem die Anwendung nicht zu dieser Seite navigiert, wenn ein Benutzer eine andere Seite anfordert, sondern stattdessen die Ansicht der neuen Seite auf der vorhandenen Seite selbst anzeigt.
Es gibt dem Benutzer das Gefühl, dass er die Seite überhaupt nicht verlassen hat. Dasselbe kann im Winkel mit Hilfe von Ansichten in Verbindung mit Routen erreicht werden.
In diesem Tutorial lernen Sie:
- Was ist eine Ansicht?
- ng-view-Richtlinie in AngularJS
- ng-view Beispiel
Was ist eine Ansicht?
Eine Ansicht ist der Inhalt, der dem Benutzer angezeigt wird. Grundsätzlich, was der Benutzer sehen möchte, wird dem Benutzer dementsprechend diese Ansicht der Anwendung angezeigt.
Die Kombination von Ansichten und Routen hilft dabei, eine Anwendung in logische Ansichten zu unterteilen und verschiedene Ansichten an Controller zu binden.
Das Aufteilen der Anwendung in verschiedene Ansichten und das Verwenden von Routing zum Laden verschiedener Teile der Anwendung hilft dabei, die Anwendung logisch zu unterteilen und die Verwaltung zu vereinfachen.
Nehmen wir an, wir haben eine Bestellanwendung, in der ein Kunde Bestellungen anzeigen und neue aufgeben kann.
Das folgende Diagramm und die nachfolgende Erläuterung zeigen, wie diese Anwendung als Einzelseitenanwendung erstellt wird.
Anstatt zwei verschiedene Webseiten zu haben, eine für "Bestellungen anzeigen" und eine für "Neue Bestellungen", würden Sie in AngularJS stattdessen zwei verschiedene Ansichten mit den Namen "Bestellungen anzeigen" und "Neue Bestellungen" auf derselben Seite erstellen.
Wir werden auch 2 Referenzlinks in unserer Anwendung haben, die #show und #new heißen.
- Wenn die Anwendung zu MyApp / # show wechselt, wird die Ansicht der View Orders angezeigt, und gleichzeitig wird die Seite nicht verlassen. Es wird lediglich der Abschnitt der vorhandenen Seite mit den Informationen unter "Bestellungen anzeigen" aktualisiert. Gleiches gilt für die Ansicht "Neue Bestellungen".
Auf diese Weise wird es einfacher, die Anwendung in verschiedene Ansichten zu unterteilen, um die Verwaltung zu vereinfachen und bei Bedarf einfach Änderungen vorzunehmen.
Und jede Ansicht verfügt über einen entsprechenden Controller, um die Geschäftslogik für diese Funktionalität zu steuern.
ng-view-Richtlinie in AngularJS
Die "ngView" ist eine Direktive, die den $ route-Dienst ergänzt, indem sie die gerenderte Vorlage der aktuellen Route in die Hauptlayoutdatei (index.html) einfügt.
Jedes Mal, wenn sich die aktuelle Route ändert, enthält die Ansicht Änderungen entsprechend der Konfiguration des $ route-Dienstes, ohne die Seite selbst zu ändern.
Wir werden uns in einem späteren Kapitel mit Routen befassen. Im Moment konzentrieren wir uns darauf, unserer Anwendung mehrere Ansichten hinzuzufügen.
Unten finden Sie das gesamte Flussdiagramm der Funktionsweise des gesamten Prozesses. Wir werden jeden Prozess in unserem unten gezeigten Beispiel detailliert durchgehen.
ng-view Beispiel
Schauen wir uns ein Beispiel an, wie wir Ansichten implementieren können.
In unserem Beispiel werden wir dem Benutzer zwei Optionen vorstellen:
- Eine besteht darin, ein "Ereignis" anzuzeigen, und die andere darin, ein "Ereignis" hinzuzufügen.
- Wenn der Benutzer auf den Link Ereignis hinzufügen klickt, wird ihm die Ansicht für "Ereignis hinzufügen" und das Gleiche für "Ereignis anzeigen" angezeigt.
Befolgen Sie die nachstehenden Schritte, um dieses Beispiel zu installieren.
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 angleJS-Website heruntergeladen werden.
Schritt 2) In diesem Schritt
- Fügen Sie href-Tags hinzu, die Links zu "Hinzufügen eines neuen Ereignisses" und "Anzeigen eines Ereignisses" darstellen.
- Fügen Sie außerdem 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 den Link "Neues Ereignis hinzufügen" oder auf den Link "Ereignis anzeigen" klickt.
Schritt 3) Fügen Sie in Ihrem Skript-Tag für Angular JS den folgenden Code hinzu.
Machen wir uns keine Sorgen um das Routing. Wir werden dies vorerst in einem späteren Kapitel sehen. Sehen wir uns jetzt nur den Code für die Ansichten an.
- Dieser Codeabschnitt bedeutet, dass der Benutzer auf das href-Tag "NewEvent" klickt, das zuvor im div-Tag definiert wurde. Es geht zur Webseite add_event.html und nimmt den Code von dort und fügt ihn in die Ansicht ein. Zweitens, um die Geschäftslogik für diese Ansicht zu verarbeiten, gehen Sie zum "AddEventController".
- Dieser Codeabschnitt bedeutet, dass der Benutzer auf das href-Tag "DisplayEvent" klickt, das zuvor im div-Tag definiert wurde. Es geht zur Webseite show_event.html, nimmt den Code von dort und fügt ihn in die Ansicht ein. Zweitens, um die Geschäftslogik für diese Ansicht zu verarbeiten, gehen Sie zum "ShowDisplayController".
- Dieser Codeabschnitt bedeutet, dass die dem Benutzer angezeigte Standardansicht die DisplayEvent-Ansicht ist
Schritt 4) Als Nächstes müssen Controller hinzugefügt werden, um die Geschäftslogik sowohl für die Funktionen "DisplayEvent" als auch "Add New Event" zu verarbeiten.
Wir fügen einfach eine Nachrichtenvariable zu jedem Bereichsobjekt für jeden Controller hinzu. Diese Meldung wird angezeigt, wenn dem Benutzer die entsprechende Ansicht angezeigt wird.
Event Registration Guru99 Global Event
Schritt 5) Erstellen Sie Seiten mit den Namen add_event.html und show_event.html. Halten Sie die Seiten einfach wie unten gezeigt.
In unserem Fall hat die Seite add_event.html ein Header-Tag zusammen mit dem Text "Neues Ereignis hinzufügen" und einen Ausdruck, um die Meldung "Dies ist zum Hinzufügen eines neuen Ereignisses" anzuzeigen.
In ähnlicher Weise verfügt die Seite show_event.html über ein Header-Tag für den Text "Ereignis anzeigen" und einen Nachrichtenausdruck zum Anzeigen der Nachricht "Dies dient zum Anzeigen eines Ereignisses".
Der Wert der Nachrichtenvariablen wird basierend auf dem Controller eingefügt, der an die Ansicht angehängt ist.
Für jede Seite fügen wir die Nachrichtenvariable hinzu, die von den jeweiligen Controllern eingefügt wird.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
An der Ausgabe können wir zwei Dinge erkennen
- In der Adressleiste wird die aktuell angezeigte Ansicht angezeigt. Da in der Standardansicht der Bildschirm "Ereignis anzeigen" angezeigt wird, wird in der Adressleiste die Adresse für "DisplayEvent" angezeigt.
- Dieser Abschnitt ist die Ansicht, die im laufenden Betrieb erstellt wird. Da die Standardansicht die Option "Ereignis anzeigen" ist, wird dies dem Benutzer angezeigt.
Klicken Sie nun auf der angezeigten Seite auf den Link Neues Ereignis hinzufügen. Sie erhalten nun die folgende Ausgabe.
Ausgabe:
- Die Adressleiste zeigt nun an, dass die aktuelle Ansicht jetzt die Ansicht "Neues Ereignis hinzufügen" ist. Beachten Sie, dass Sie sich weiterhin auf derselben Anwendungsseite befinden. Sie werden nicht zu einer neuen Bewerbungsseite weitergeleitet.
- Dieser Abschnitt ist die Ansicht und wird nun geändert, um den HTML-Code für die Funktion "Neues Ereignis hinzufügen" anzuzeigen. In diesem Abschnitt wird dem Benutzer nun das Header-Tag "Neues Ereignis hinzufügen" und der Text "Dies dient zum Hinzufügen eines neuen Ereignisses" angezeigt.