Tegenwoordig zou iedereen gehoord hebben 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 zal navigeren, 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
- ng-view Voorbeeld
Wat is een weergave?
Een weergave is de inhoud die aan de gebruiker wordt getoond. In feite wat de gebruiker wil zien, dienovereenkomstig zal die weergave van de applicatie aan de gebruiker worden getoond.
De combinatie van views en routes helpt een applicatie in logische views te verdelen en verschillende views aan controllers te binden.
Het verdelen van de applicatie in verschillende weergaven en het gebruik van Routing om verschillende delen van de applicatie te laden, helpt bij het logisch verdelen van de applicatie en het beter beheersbaar maken.
Laten we aannemen dat we een bestelapplicatie hebben, waarin een klant bestellingen kan inzien 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 "Bekijk bestellingen" en een andere voor "Nieuwe Bestellingen", zou je in AngularJS in plaats daarvan twee verschillende weergaven creëren genaamd "Bekijk bestellingen" en "Nieuwe Bestellingen" op dezelfde pagina.
We hebben ook 2 referentielinks in onze applicatie genaamd #show en #new.
- Dus wanneer de applicatie naar MyApp / # show gaat, toont het de weergave van de View Orders, terwijl het de pagina niet verlaat. Het zal gewoon het gedeelte van de bestaande pagina vernieuwen met de informatie van "Bekijk bestellingen". Hetzelfde geldt voor de weergave "Nieuwe bestellingen".
Op deze manier wordt het dus gewoon eenvoudiger om de applicatie in verschillende weergaven te scheiden om het beheersbaarder te maken en gemakkelijk om wijzigingen aan te brengen 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 $ route-service aanvult door het 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.
We zullen routes in een later hoofdstuk behandelen, voor nu zullen we ons concentreren op het toevoegen van meerdere weergaven aan onze applicatie.
Hieronder ziet u het volledige stroomschema van hoe het hele proces werkt. We zullen elk proces in ons onderstaande voorbeeld in detail bespreken.
ng-view Voorbeeld
Laten we eens kijken naar een voorbeeld van hoe we weergaven kunnen implementeren.
In ons voorbeeld gaan we de gebruiker twee opties presenteren,
- Een daarvan is om een "Evenement" weer te geven, en de andere is om een "Evenement" 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 "Evenement weergeven".
Volg de onderstaande stappen om dit voorbeeld op zijn plaats te krijgen.
Stap 1) Voeg het angular-routebestand toe als scriptreferentie.
Dit routebestand is nodig om gebruik te kunnen maken van de functionaliteiten van meerdere routes en views. Dit bestand kan worden gedownload vanaf de angularJS-website.
Stap 2) In deze stap,
- Voeg href-tags toe die links vertegenwoordigen naar "Een nieuw evenement toevoegen" en "Een evenement weergeven".
- Voeg ook een div-tag toe met de instructie ng-view die de weergave vertegenwoordigt.
Hierdoor kan de overeenkomstige weergave worden geïnjecteerd wanneer de gebruiker op de "Add New Event-link" of de "Display Event-link" klikt.
Stap 3) Voeg de volgende code toe aan uw script-tag voor Angular JS.
Laten we ons geen zorgen maken over de routing, voorlopig zullen we dit in een later hoofdstuk zien. Laten we voorlopig de code voor de weergaven bekijken.
- Dit codegedeelte betekent dat wanneer de gebruiker op de href-tag "NewEvent" klikt, die eerder in de div-tag is gedefinieerd. Het gaat naar de webpagina add_event.html, en neemt de code van daaruit en injecteert deze in de weergave. Ten tweede voor het verwerken van de bedrijfslogica voor deze weergave, ga naar de "AddEventController".
- Dit codegedeelte betekent dat wanneer de gebruiker op de href-tag "DisplayEvent" klikt, die eerder in de div-tag is gedefinieerd. Het zal naar de webpagina show_event.html gaan, de code van daaruit halen en in de weergave injecteren. Ten tweede, voor het verwerken van de bedrijfslogica voor deze weergave, ga naar de "ShowDisplayController".
- Dit codegedeelte betekent dat de standaardweergave die aan de gebruiker wordt getoond, de weergave DisplayEvent is
Stap 4) De volgende is om controllers toe te voegen om de bedrijfslogica te verwerken voor zowel de "DisplayEvent" als de "Add New Event" -functionaliteit.
We voegen gewoon een berichtvariabele toe aan elk bereikobject voor elke controller. Dit bericht wordt weergegeven wanneer de juiste weergave aan de gebruiker wordt getoond.
Event Registration Guru99 Global Event
Stap 5) Maak pagina's genaamd add_event.html en show_event.html. Houd de pagina's eenvoudig, zoals hieronder wordt weergegeven.
In ons geval heeft de pagina add_event.html een header-tag samen met de tekst "Nieuwe gebeurtenis toevoegen" en een uitdrukking om het bericht "Dit is om een nieuwe gebeurtenis toe te voegen" weer te geven.
Evenzo zal de show_event.html-pagina ook een header-tag hebben om de tekst "Show Event" te bevatten en ook een berichtuitdrukking om het bericht "This is to display an Event" 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 wordt geïnjecteerd vanuit elke respectieve controller.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Aan de output kunnen we 2 dingen opmerken
- De adresbalk geeft weer wat de huidige weergave is die wordt weergegeven. Dus aangezien de standaardweergave het Show Event-scherm is, toont de adresbalk het adres voor "DisplayEvent".
- Dit gedeelte is de weergave, die direct wordt gemaakt. Aangezien de standaardweergave de Show Event is, wordt dit aan de gebruiker getoond.
Klik nu op de link Nieuw evenement toevoegen op de weergegeven pagina. U krijgt nu de onderstaande uitvoer.
Uitgang:
- 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 aanmeldingspagina bevindt. U wordt niet doorgestuurd naar een nieuwe sollicitatiepagina.
- Dit gedeelte is de weergave, en het zal nu veranderen om de HTML weer te geven voor de functie "Nieuwe gebeurtenis toevoegen". Dus nu wordt in deze sectie de header-tag "Nieuwe gebeurtenis toevoegen" en de tekst "Dit is om een nieuwe gebeurtenis toe te voegen" getoond aan de gebruiker.