AngularJS ng-view mit Beispiel: So implementieren Sie View

Heutzutage hat wohl jeder schon einmal von „Single Page Applications“ gehört. Viele bekannte Websites wie zum Beispiel Gmail Nutzen Sie das Konzept der Single Page Applications (SPAs).

Bei SPAs handelt es sich um 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 innerhalb der vorhandenen Seite selbst anzeigt.

Es gibt dem Benutzer das Gefühl, dass er die Seite überhaupt nicht verlassen hat. Das Gleiche kann im Angular mit Hilfe von Views in Verbindung mit Routes erreicht werden.

In diesem Tutorial lernen Sie-

• Was ist eine Ansicht?
• ng-view-Direktive in AngularJS
• So implementieren Sie ng-view in AngularJS anhand eines Beispiels

Was ist eine Ansicht?

Eine Ansicht ist der Inhalt, der dem Benutzer angezeigt wird. Grundsätzlich das, was der Benutzer sehen möchte, dementsprechend wird ihm 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.

Die Aufteilung der Anwendung in verschiedene Ansichten und die Verwendung von Routing zum Laden verschiedener Teile der Anwendung tragen dazu bei, die Anwendung logisch aufzuteilen und sie besser verwaltbar zu machen.

Nehmen wir an, wir haben eine Bestellanwendung, in der ein Kunde Bestellungen einsehen und neue aufgeben kann.

Das folgende Diagramm und die anschließende Erklärung zeigen, wie diese Anwendung als einseitige Anwendung erstellt wird.

Anstatt jetzt zwei verschiedene Webseiten zu haben, eine für „Bestellungen anzeigen“ und eine für „Neue Bestellungen“, in AngularJS, würden Sie stattdessen zwei verschiedene Ansichten namens „Bestellungen anzeigen“ und „Neue Bestellungen“ auf derselben Seite erstellen.

Wir werden in unserer Anwendung auch zwei Referenzlinks mit den Namen #show und #new haben.

• Wenn die Anwendung also zu MyApp/#show wechselt, wird die Ansicht „Bestellungen anzeigen“ angezeigt, gleichzeitig wird die Seite nicht verlassen. Es wird lediglich der Abschnitt der vorhandenen Seite mit der Information „Bestellungen anzeigen“ aktualisiert. Das Gleiche gilt für die Ansicht „Neue Bestellungen“.

Auf diese Weise wird es einfacher, die Anwendung in verschiedene Ansichten zu unterteilen, um sie einfacher zu verwalten und bei Bedarf Änderungen vorzunehmen.

Und jede Ansicht verfügt über einen entsprechenden Controller zur Steuerung der Geschäftslogik für diese Funktionalität.

ng-view-Direktive in AngularJS

„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 dass die Seite selbst geändert wird.

Wir werden abdecken Routen In einem späteren Kapitel konzentrieren wir uns zunächst auf das Hinzufügen mehrerer Ansichten zu unserer Anwendung.

Nachfolgend finden Sie das gesamte Flussdiagramm zur Funktionsweise des gesamten Prozesses. Wir werden jeden Prozess in unserem unten gezeigten Beispiel im Detail durchgehen.

So implementieren Sie ng-view in AngularJS

Schauen wir uns ein Beispiel an, wie wir ng-view in AngularJS implementieren können. In unserem Beispiel werden wir dem Benutzer zwei Optionen präsentieren:

• Die eine besteht darin, ein „Ereignis“ anzuzeigen, die andere darin, ein „Ereignis“ hinzuzufügen.
• Wenn der Benutzer auf den Link „Ereignis hinzufügen“ klickt, wird ihm die Ansicht „Ereignis hinzufügen“ angezeigt, und das Gleiche gilt für „Ereignis anzeigen“.

Bitte befolgen Sie die folgenden Schritte, um dieses Beispiel umzusetzen.

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. Diese Datei kann von der AngularJS-Website heruntergeladen werden.

Schritt 2) Fügen Sie href-Tags und div-Tags hinzu.

In diesem Schritt

1. Fügen Sie href-Tags hinzu, die Links zu „Hinzufügen eines neuen Ereignisses“ und „Anzeigen eines Ereignisses“ darstellen.
2. Fügen Sie außerdem 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 den Link „Neues Ereignis hinzufügen“ oder den Link „Ereignis anzeigen“ klickt.

Schritt 3) Fügen Sie in Ihrem Skripttag für Angular JS den folgenden Code hinzu.

Machen wir uns vorerst keine Gedanken über das Routing, das werden wir in einem späteren Kapitel sehen. Sehen wir uns vorerst nur den Code für die Ansichten an.

1. 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, übernimmt den Code von dort und fügt ihn in die Ansicht ein. Zweitens gehen Sie zum Verarbeiten der Geschäftslogik für diese Ansicht zu „AddEventController“.
2. 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 gehen Sie zum Verarbeiten der Geschäftslogik für diese Ansicht zum „ShowDisplayController“.
3. Dieser Codeabschnitt bedeutet, dass die Standardansicht, die dem Benutzer angezeigt wird, die DisplayEvent-Ansicht ist

   

Schritt 4) Fügen Sie Controller hinzu, um die Geschäftslogik zu verarbeiten.

Als nächstes müssen Controller hinzugefügt werden, um die Geschäftslogik sowohl für die „DisplayEvent“- als auch für die „Add New Event“-Funktionalität zu verarbeiten.

Wir fügen einfach jedem Bereichsobjekt für jeden Controller eine Nachrichtenvariable hinzu. Diese Nachricht wird angezeigt, wenn dem Benutzer die entsprechende Ansicht angezeigt wird.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="lib/bootstrap.js"></script>

</head>
<body ng-app="sampleApp">

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul><li><a href="#!NewEvent"> Add New Event</a></li>
        <li><a href="#!DisplayEvent"> Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp',["ngRoute"]);
    app.config(function($routeProvider){
        $routeProvider.
        when("/NewEvent",{
            templateUrl : "add_event.html",
            controller: "AddEventController"
        }).
        when("/DisplayEvent", {
            templateUrl: "show_event.html",
            controller: "ShowDisplayController"
        }).
        otherwise ({
            redirectTo: '/DisplayEvent'
        });
    });
    app.controller("AddEventController", function($scope) {

        $scope.message = "This is to Add a new Event";

    });
    app.controller("ShowDisplayController",function($scope){

        $scope.message = "This is display an Event";

    });
</script>
</body>
</html>

Schritt 5) Erstellen Sie Seiten mit den Namen add_event.html und show_event.html

Als nächstes erstellen Sie Seiten mit den Namen add_event.html und show_event.html. Halten Sie die Seiten einfach, wie unten gezeigt.

In unserem Fall verfügt die Seite add_event.html über ein Header-Tag mit dem Text „Neues Ereignis hinzufügen“ und einen Ausdruck zum Anzeigen der Meldung „Hiermit wird ein neues Ereignis hinzugefügt“.

Ebenso verfügt die Seite show_event.html über ein Header-Tag für den Text „Show Event“ und einen Nachrichtenausdruck für die Anzeige der Nachricht „This is to display an Event“.

Der Wert der Nachrichtenvariablen wird basierend auf dem Controller eingefügt, der der Ansicht zugeordnet ist.

Für jede Seite werden wir die Nachrichtenvariable hinzufügen, die von jedem jeweiligen Controller eingefügt wird.

• add_event.html

<h2>Add New Event</h2>

{{message}}

• show_event.html

<h2>Show Event</h2>
	
{{message}}

Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Aus der Ausgabe können wir zwei Dinge erkennen

1. Die Adressleiste gibt die aktuell angezeigte Ansicht wieder. Da die Standardansicht den Bildschirm „Ereignis anzeigen“ anzeigt, wird in der Adressleiste die Adresse für „DisplayEvent“ angezeigt.
2. Dieser Abschnitt ist die Ansicht, die im laufenden Betrieb erstellt wird. Da die Standardansicht „Ereignis anzeigen“ ist, wird dem Benutzer diese Ansicht angezeigt.

Klicken Sie nun auf der angezeigten Seite auf den Link Neues Ereignis hinzufügen. Sie erhalten nun die folgende Ausgabe.

Ausgang:

1. In der Adressleiste wird nun angezeigt, dass die aktuelle Ansicht nun die Ansicht „Neues Ereignis hinzufügen“ ist. Beachten Sie, dass Sie sich immer noch auf derselben Bewerbungsseite befinden. Sie werden nicht auf eine neue Bewerbungsseite weitergeleitet.
2. Dieser Abschnitt ist die Ansicht und wird nun geändert, um die anzuzeigen HTML für die Funktion „Neues Ereignis hinzufügen“. In diesem Abschnitt wird dem Benutzer jetzt der Header-Tag „Neues Ereignis hinzufügen“ und der Text „Hiermit wird ein neues Ereignis hinzugefügt“ angezeigt.