AngularJS ng-view mit Beispiel

Bekannte Seiten wie zum Beispiel Gmail Das Konzept der Single-Page-Anwendung (SPA) wird genutzt. Fordert ein Benutzer eine andere Seite an, navigiert die Anwendung nicht weg, sondern zeigt die Ansicht der neuen Seite innerhalb der bestehenden Seite an. Dadurch entsteht der Eindruck, der Benutzer habe die Anwendung nie verlassen. Dasselbe wird in AngularJS mithilfe von Views und Routen erreicht.

⚠️ Supporthinweis: AngularJS hat erreicht Lebensende am 31. Dezember 2021 und erhält keine weiteren Patches oder Sicherheitskorrekturen. Die folgende Anweisung bleibt für die Wartung bestehender AngularJS 1.x-Anwendungen gültig; in modernen Angular Das Äquivalent ist <router-outlet>.

Was ist eine Ansicht?

Eine Ansicht ist der Inhalt, der dem Benutzer angezeigt wird. Was auch immer der Benutzer sehen möchte, die entsprechende Ansicht der Anwendung wird angezeigt.

Durch die Kombination von Ansichten und Routen wird eine Anwendung in logische Ansichten unterteilt und jede einzelne an eine Route gebunden. Controller, wodurch die Anwendung besser handhabbar wird.

Angenommen, wir haben eine Bestellanwendung, in der Kunden Bestellungen einsehen und neue aufgeben können. Das folgende Diagramm zeigt, wie daraus eine Single-Page-Anwendung wird.

Statt zweier separater Webseiten, eine für „Bestellungen anzeigen“ und eine für „Neue Bestellungen“, AngularJS nutzt zwei Ansichten auf derselben Seite, die über zwei Verweislinks erreichbar sind. #show und #new:

• Navigieren zu MyApp/#show Die Ansicht „Bestellungen anzeigen“ wird angezeigt, ohne dass die Seite verlassen werden muss. Nur dieser Abschnitt der aktuellen Seite wird aktualisiert.
• Navigieren zu MyApp/#new Dasselbe gilt für die Ansicht „Neue Aufträge“.

Durch die Aufteilung einer Anwendung in Ansichten bleibt sie übersichtlich und leicht änderbar, und jede Ansicht verfügt über einen entsprechenden Controller, der die Geschäftslogik für diese Funktion enthält.

ng-view-Direktive in AngularJS

Das ngView Richtlinien ergänzt die $route Der Service wird durch Einbindung der gerenderten Vorlage der aktuellen Route in die Hauptlayoutdatei bereitgestellt, normalerweise index.html.

Jedes Mal, wenn sich die aktuelle Route ändert, ändert sich auch die zugehörige Ansicht entsprechend. $route Konfiguration, ohne dass die Seite selbst neu geladen wird. Routen werden separat behandelt; hier liegt der Schwerpunkt auf dem Hinzufügen mehrerer Ansichten.

Das untenstehende Flussdiagramm zeigt den gesamten Prozess, der im Beispiel dann Schritt für Schritt erläutert wird.

So implementieren Sie ng-view in AngularJS

Dieses Beispiel bietet dem Benutzer zwei Optionen: ein Ereignis anzeigen und ein Ereignis hinzufügen. Klicken Fügen Sie ein Ereignis hinzu zeigt die Ansicht "Ereignis hinzufügen" an, und dasselbe gilt für die Ansicht "Ereignis anzeigen".

Schritt 1) Fügen Sie die Datei angular-route als Skriptreferenz hinzu. Diese Datei wird benötigt, um mehrere Routen und Ansichten zu verwenden, und ist auf der AngularJS-Website verfügbar.

Schritt 2) Füge die href-Tags und das div-Tag hinzu.

1. Fügen Sie href-Tags hinzu, die auf „Neues Ereignis hinzufügen“ und „Ereignis anzeigen“ verlinken.
2. Füge ein Div-Element hinzu, das den Inhalt enthält. ng-view Anweisung zum Markieren des Ansichtsbereichs. Die entsprechende Ansicht wird dort eingefügt, sobald einer der Links angeklickt wird.

Schritt 3) Fügen Sie im AngularJS-Skript-Tag die Routing-Konfiguration hinzu.

1. Wenn der Benutzer auf die Neues Ereignis Link, AngularJS lädt add_event.html, fügt sein Markup in die Ansicht ein und verwendet AddEventController für die Geschäftslogik.
2. Wenn der Benutzer auf die DisplayEvent Link, er lädt show_event.html und verwendet ShowDisplayController.
3. Das otherwise Die Klausel legt die Standardansicht fest, die dem Benutzer angezeigt wird, in diesem Fall DisplayEvent.

Schritt 4) Fügen Sie Controller hinzu, um die Geschäftslogik für beide Funktionen zu verarbeiten. Jeder Controller setzt lediglich eine Nachricht in seinem Scope-Objekt, die angezeigt wird, wenn die entsprechende Ansicht angezeigt wird.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <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>
</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 to display an Event";
    });
</script>

</body>
</html>

⚠️ Drei Korrekturen zum ursprünglichen Angebot. Zunächst einmal lesen die Links #!NewEvent ohne Schrägstrich, während die Routen wie folgt deklariert werden: /NewEventDaher gab es keine Übereinstimmung. Ab AngularJS 1.6 ist das Standard-Hash-Präfix !, wodurch die korrekte Adresse entsteht #!/NewEvent — ein Schrägstrich nach dem Ausrufezeichen. Zweitens, ShowDisplayController Die Nachricht sollte auf „Dies ist eine Ereignisanzeige“ gesetzt werden, wobei das Wort fehlt. zu dass der umgebende Text zitiert. Drittens, lib/bootstrap.js wurde von einem relativen Pfad geladen, der nirgendwo aufgelöst wird und nie verwendet wird, daher wurde er entfernt.

Schritt 5) Erstellen Sie die Seiten add_event.html und show_event.htmlJeder dieser Ausdrücke enthält einen Header und einen Ausdruck, der die vom zugehörigen Controller eingefügte Nachricht anzeigt.

• 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 im Browser angezeigt.

Ausgang:

Häufige ng-view-Fehler und wie man sie behebt

Fast alle Fehler bei ng-view lassen sich auf die Modulverdrahtung, das Adressformat oder die Art und Weise, wie die Seite ausgeliefert wird, zurückführen und nicht auf die Direktive selbst.

• Der Ansichtsbereich bleibt leer: die ngRoute Das Modul wurde nicht als Abhängigkeit aufgeführt, oder angular-route.js wurde nicht geladen. Beide werden benötigt, und das Skript muss danach kommen. angular.min.js.
• Links ändern die Adresse, aber es wird nichts angezeigt: Der href-Wert stimmt nicht mit der Route überein. Ab AngularJS 1.6 muss die Adresse angepasst werden. #!/Route; älterer Code, geschrieben für Version 1.5, verwendet #/Route.
• Vorlagen können aufgrund eines CORS-Fehlers nicht geladen werden: Die Seite wurde direkt von der Festplatte geöffnet. Stellen Sie sie über HTTP bereit, weil templateUrl wird durch eine AJAX-Anfrage abgerufen, das Dateiprotokoll blockiert.
• Es erscheint immer nur die letzte Ansicht: Mehrere Elemente tragen ng-view. AngularJS unterstützt nur eine einzige View-Region pro Seite.
• Beim ersten Laden wird nichts angezeigt: nicht otherwise Die Klausel ist so konfiguriert, dass eine leere Adresse keiner Route entspricht.

Häufig gestellte Fragen