AngularJS ng-view met voorbeeld: View implementeren

Tegenwoordig heeft iedereen wel eens gehoord van de “Single Page Applications”. Veel van de bekende websites zoals Gmail gebruiken het concept van Single Page Applications (SPA's).

SPA's is het concept waarbij wanneer een gebruiker om een ​​andere pagina vraagt, de applicatie niet naar die pagina navigeert, maar in plaats daarvan de weergave van de nieuwe pagina binnen de bestaande pagina zelf weergeeft.

Het geeft de gebruiker het gevoel dat hij de pagina überhaupt nooit heeft verlaten. Hetzelfde kan worden bereikt in de Angular met behulp van Views in combinatie met Routes.

In deze tutorial leer je-

• Wat is een weergave?
• ng-view-richtlijn in AngularJS
• Hoe ng-view in AngularJS te implementeren met voorbeeld

Wat is een weergave?

Een weergave is de inhoud die aan de gebruiker wordt getoond. In principe wat de gebruiker wil zien, dienovereenkomstig wordt die weergave van de applicatie aan de gebruiker getoond.

De combinatie van views en routes helpt je een applicatie in logische views te verdelen en verschillende views aan controllers te binden.

Door de applicatie in verschillende weergaven te verdelen en Routing te gebruiken om verschillende delen van de applicatie te laden, wordt de applicatie logisch verdeeld en beter beheersbaar gemaakt.

Laten we aannemen dat we een bestelapplicatie hebben, waarin een klant bestellingen kan bekijken en nieuwe kan plaatsen.

Het onderstaande diagram en de daaropvolgende uitleg laten zien hoe u deze applicatie kunt maken als een applicatie met één pagina.

Nu, in plaats van twee verschillende webpagina's te hebben, één voor "Bestellingen bekijken" en een andere voor "Nieuwe bestellingen", in angularjs, zou u in plaats daarvan twee verschillende weergaven maken, genaamd “Bestellingen bekijken” en “Nieuwe bestellingen” op dezelfde pagina.

We zullen ook 2 referentielinks hebben in onze applicatie genaamd #show en #new.

• Dus wanneer de applicatie naar MyApp/#show gaat, wordt de weergave van de Bekijk bestellingen weergegeven, maar verlaat deze de pagina niet. Het ververst gewoon het gedeelte van de bestaande pagina met de informatie over “Bestellingen bekijken”. Hetzelfde geldt voor de weergave “Nieuwe bestellingen”.

Op deze manier wordt het dus eenvoudiger om de applicatie in verschillende weergaven te verdelen, zodat deze beter beheersbaar wordt en er gemakkelijker wijzigingen kunnen worden aangebracht wanneer dat nodig is.

En elke weergave heeft een bijbehorende controller om de bedrijfslogica voor die functionaliteit te besturen.

ng-view-richtlijn in AngularJS

De “ngView” is een richtlijn die de service $route aanvult door de weergegeven sjabloon van de huidige route op te nemen in het hoofdlay-outbestand (index.html).

Elke keer dat de huidige route verandert, bevat de weergave wijzigingen volgens de configuratie van de $route-service zonder de pagina zelf te wijzigen.

Wij zullen dekking bieden wegen In een later hoofdstuk zullen we ons concentreren op het toevoegen van meerdere weergaven aan onze applicatie.

Hieronder vindt u het volledige stroomschema van hoe het hele proces werkt. In ons voorbeeld hieronder zullen we elk proces gedetailleerd doornemen.

Hoe ng-view te implementeren in AngularJS

Laten we een voorbeeld bekijken van hoe we ng-view in AngularJS kunnen implementeren. In ons voorbeeld gaan we twee opties aan de gebruiker presenteren:

• De ene is om een ​​“Gebeurtenis” weer te geven, en de andere is om een ​​“Gebeurtenis” toe te voegen.
• Wanneer de gebruiker op de link Een evenement toevoegen klikt, krijgt hij de weergave voor “Evenement toevoegen” te zien en hetzelfde geldt voor “Gebeurtenis weergeven”.

Volg de onderstaande stappen om dit voorbeeld te implementeren.

Stap 1) Voeg het angular-route-bestand toe als scriptreferentie.

Dit routebestand is nodig om gebruik te kunnen maken van de functionaliteiten van het hebben van meerdere routes en weergaven. Dit bestand kan worden gedownload van de angularJS-website.

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

In deze stap,

1. Voeg href-tags toe die links vertegenwoordigen naar ‘Een nieuw evenement toevoegen’ en ‘Een evenement weergeven’.
2. Voeg ook een div-tag toe met de ng-view-instructie die de weergave vertegenwoordigt. Hierdoor kan de bijbehorende weergave worden geïnjecteerd wanneer de gebruiker op de link 'Nieuw evenement toevoegen' of de link 'Gebeurtenis weergeven' klikt.

Stap 3) Voeg de volgende code toe aan uw scripttag voor Angular JS.

Laten we ons nu nog niet druk maken over de routing, dat zien we in een later hoofdstuk. Laten we nu even de code voor de views bekijken.

1. Dit codegedeelte betekent dat wanneer de gebruiker op de href-tag “NewEvent” klikt, die eerder in de div-tag was gedefinieerd. Het gaat naar de webpagina add_event.html, haalt de code daar vandaan en injecteert deze in de weergave. Ten tweede, voor het verwerken van de bedrijfslogica voor deze weergave, ga naar de “AddEventController”.
2. Dit codegedeelte betekent dat wanneer de gebruiker op de href-tag “DisplayEvent” klikt, die eerder in de div-tag was gedefinieerd. Het gaat naar de webpagina show_event.html, haalt de code daar vandaan en injecteert deze in de weergave. Ten tweede, voor het verwerken van de bedrijfslogica voor deze weergave, ga naar de “ShowDisplayController”.
3. Dit codegedeelte betekent dat de standaardweergave die aan de gebruiker wordt getoond, de DisplayEvent-weergave is

   

Stap 4) Voeg controllers toe om de bedrijfslogica te verwerken.

Vervolgens moeten controllers worden toegevoegd om de bedrijfslogica voor zowel de functionaliteit “DisplayEvent” als “Add New Event” te verwerken.

We voegen gewoon een berichtvariabele toe aan elk scope-object voor elke controller. Dit bericht wordt weergegeven wanneer de juiste weergave aan de gebruiker wordt getoond.

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

Stap 5) Maak pagina's met de naam add_event.html en show_event.html

Maak vervolgens pagina's met de namen add_event.html en show_event.html. Houd de pagina's eenvoudig, zoals hieronder weergegeven.

In ons geval heeft de add_event.html-pagina een header-tag samen met de tekst “Nieuw evenement toevoegen” en een expressie om het bericht “Dit is om een ​​nieuw evenement toe te voegen” weer te geven.

Op dezelfde manier zal de show_event.html-pagina ook een headertag hebben om de tekst ‘Show Event’ te bevatten en ook een berichtexpressie om het bericht ‘Dit is om een ​​evenement weer te geven’ weer te geven.

De waarde van de berichtvariabele wordt geïnjecteerd op basis van de controller die aan de weergave is gekoppeld.

Voor elke pagina gaan we de berichtvariabele toevoegen, die vanuit elke respectieve controller wordt geïnjecteerd.

• add_gebeurtenis.html

<h2>Add New Event</h2>

{{message}}

• show_event.html

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

Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Output:

Uit de uitvoer kunnen we twee dingen opmerken

1. De adresbalk geeft weer wat de huidige weergave is die wordt weergegeven. Omdat de standaardweergave het scherm Show Event toont, toont de adresbalk het adres voor "DisplayEvent".
2. Deze sectie is de View, die on the fly wordt gemaakt. Aangezien de standaardview de Show Event-view is, is dit wat aan de gebruiker wordt getoond.

Klik nu op de Add New Event link op de getoonde pagina. U krijgt nu de onderstaande output.

Output:

1. De adresbalk geeft nu aan dat de huidige weergave nu de weergave “Nieuwe gebeurtenis toevoegen” is. Merk op dat u zich nog steeds op dezelfde sollicitatiepagina bevindt. Je wordt niet doorverwezen naar een nieuwe sollicitatiepagina.
2. Deze sectie is de weergave en zal nu veranderen om de HTML voor de functionaliteit “Nieuwe gebeurtenis toevoegen”. Dus nu wordt in deze sectie de headertag “Nieuwe gebeurtenis toevoegen” en de tekst “Dit is om een ​​nieuwe gebeurtenis toe te voegen” aan de gebruiker getoond.