AngularJS ng-weergave met voorbeeld

Bekende locaties zoals Gmail Maak gebruik van het concept van Single Page Applications. Wanneer een gebruiker een andere pagina opvraagt, navigeert de applicatie niet weg; de weergave van de nieuwe pagina wordt binnen de bestaande pagina getoond, waardoor het lijkt alsof de gebruiker de applicatie nooit heeft verlaten. Hetzelfde effect wordt bereikt in AngularJS met behulp van views in combinatie met routes.

⚠️ Ondersteuningsbericht: AngularJS bereikte einde levensduur op 31 december 2021 en ontvangt geen verdere patches of beveiligingsupdates. De onderstaande richtlijn blijft van toepassing voor het onderhouden van bestaande AngularJS 1.x-applicaties; in moderne gevallen Angular het equivalent is <router-outlet>.

Wat is een weergave?

Een weergave is de inhoud die aan de gebruiker wordt getoond. Wat de gebruiker ook wil zien, de bijbehorende weergave van de applicatie wordt getoond.

Door weergaven en routes te combineren, wordt een applicatie opgedeeld in logische weergaven en wordt elk daarvan gekoppeld aan een route. controleurwaardoor de applicatie beter beheersbaar wordt.

Stel je een bestelapplicatie voor waarin een klant bestellingen kan bekijken en nieuwe bestellingen kan plaatsen. Het onderstaande diagram laat zien hoe dit een single-page applicatie wordt.

In plaats van twee aparte webpagina's, één voor 'Bestellingen bekijken' en één voor 'Nieuwe bestellingen', angularjs maakt gebruik van twee weergaven op dezelfde pagina, die via twee referentielinks bereikbaar zijn. #show en #new:

• Navigeren naar MyApp/#show Toont de weergave 'Bestellingen bekijken' zonder de pagina te verlaten. Alleen dat gedeelte van de bestaande pagina wordt vernieuwd.
• Navigeren naar MyApp/#new Doet hetzelfde voor het overzicht van nieuwe bestellingen.

Door een applicatie op deze manier in weergaven op te splitsen, blijft deze beheersbaar en gemakkelijk aan te passen. Elke weergave heeft een bijbehorende controller die de bedrijfslogica voor die functie bevat.

ng-view-richtlijn in AngularJS

De ngBekijk Richtlijnen complementeert de $route service door de weergegeven sjabloon van de huidige route in het hoofdlayoutbestand op te nemen, normaal gesproken index.html.

Telkens wanneer de huidige route verandert, verandert de bijbehorende weergave mee. $route configuratie, zonder dat de pagina zelf opnieuw wordt geladen. routes worden afzonderlijk behandeld; hier ligt de nadruk op het toevoegen van meerdere weergaven.

Het onderstaande stroomdiagram toont het hele proces, dat vervolgens in het voorbeeld stap voor stap wordt doorlopen.

Hoe ng-view te implementeren in AngularJS

Dit voorbeeld biedt de gebruiker twee opties: een evenement weergeven en een evenement toevoegen. Klikken Voeg een evenement toe Dit toont de weergave 'Gebeurtenis toevoegen', en hetzelfde geldt voor 'Gebeurtenis weergeven'.

Stap 1) Voeg het angular-route-bestand toe als scriptreferentie. Dit bestand is vereist voor het gebruik van meerdere routes en weergaven en is beschikbaar op de AngularJS-website.

Stap 2) Voeg de href-tags en de div-tag toe.

1. Voeg href-tags toe die linken naar “Nieuw evenement toevoegen” en “Evenement weergeven”.
2. Voeg een div toe die de inhoud bevat ng-view Een instructie om het weergavegebied te markeren. De bijbehorende weergave wordt daar ingevoegd wanneer op een van beide links wordt geklikt.

Stap 3) Voeg de routingconfiguratie toe in de AngularJS-scripttag.

1. Wanneer de gebruiker klikt op de Nieuw evenement link, AngularJS laadt add_event.html, injecteert zijn markup in de weergave en gebruikt AddEventController voor de bedrijfslogica.
2. Wanneer de gebruiker klikt op de DisplayEvent link, het laadt show_event.html en gebruikt ShowDisplayController.
3. De otherwise Deze clausule bepaalt de standaardweergave die aan de gebruiker wordt getoond, in dit geval DisplayEvent.

Stap 4) Voeg controllers toe om de bedrijfslogica voor beide functies te verwerken. Elke controller stelt eenvoudigweg een bericht in op het bijbehorende object, dat wordt weergegeven wanneer de corresponderende weergave wordt getoond.

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

⚠️ Drie correcties op de oorspronkelijke advertentie. Ten eerste lezen de links #!NewEvent zonder schuine streep, terwijl de routes worden aangegeven als /NewEvent, dus er kwam niets overeen. Vanaf AngularJS 1.6 is het standaard hash-voorvoegsel !, wat het juiste adres oplevert #!/NewEvent — een schuine streep na het uitroepteken. Ten tweede, ShowDisplayController Stel het bericht in op "Dit is een evenement weergeven", waarbij het woord ontbreekt. naar dat de omringende tekst citeert. Ten derde, lib/bootstrap.js Het bestand werd geladen vanaf een relatief pad dat nergens naartoe verwijst en nooit wordt gebruikt, daarom is het verwijderd.

Stap 5) Maak de pagina's aan add_event.html en show_event.htmlElk element bevat een header en een expressie die het bericht weergeeft dat door de controller is geïnjecteerd.

• add_gebeurtenis.html

<h2>Add New Event</h2>

{{message}}

• show_event.html

<h2>Show Event</h2>

{{message}}

Als de code succesvol wordt uitgevoerd, wordt de volgende uitvoer in de browser weergegeven.

Output:

Veelvoorkomende ng-view-fouten en hoe je ze kunt oplossen

Vrijwel elke fout bij het gebruik van ng-view komt voort uit de bedrading van de module, het adresformaat of de manier waarop de pagina wordt weergegeven, in plaats van uit de directive zelf.

• Het weergavegebied blijft leeg: the ngRoute De module stond niet vermeld als afhankelijkheid, of angular-route.js was niet geladen. Beide zijn vereist en het script moet erna komen. angular.min.js.
• Links wijzigen het adres, maar er wordt niets weergegeven: De href komt niet overeen met de route. Vanaf AngularJS 1.6 moet het adres voldoen aan de vereisten. #!/Route; oudere code geschreven voor versie 1.5 gebruikt #/Route.
• Sjablonen kunnen niet worden geladen vanwege een CORS-fout: De pagina werd rechtstreeks vanaf de schijf geopend. Serveer deze via HTTP, omdat templateUrl Als het bestand via een AJAX-verzoek wordt opgehaald, blokkeert het bestandsprotocol.
• Alleen de laatst weergegeven weergave verschijnt: Meer dan één element draagt ​​de ng-view-eigenschap. AngularJS respecteert één weergavegebied per pagina.
• Bij de eerste keer laden wordt niets weergegeven: geen otherwise De clausule is zo geconfigureerd dat een leeg adres niet overeenkomt met een route.

Veelgestelde vragen