I dag ville alle have hørt om "Single Page Applications". Mange af de velkendte websteder som Gmail bruger begrebet SPA'er (Single Page Applications).
SPA'er er konceptet, hvor applikationen ikke navigerer til den side, når en bruger beder om en anden side, men i stedet viser visningen af den nye side på selve den eksisterende side.
Det giver følelsen for brugeren, at han aldrig forlod siden i første omgang. Det samme kan opnås i Angular ved hjælp af Views i forbindelse med Routes.
I denne vejledning lærer du-
- Hvad er en visning?
- ng-view-direktivet i AngularJS
- ng-view Eksempel
Hvad er en visning?
En visning er det indhold, der vises til brugeren. Grundlæggende hvad brugeren ønsker at se, følgelig vises denne visning af applikationen for brugeren.
Kombinationen af visninger og ruter hjælper en med at opdele en applikation i logiske visninger og binde forskellige visninger til controllere.
At opdele applikationen i forskellige visninger og bruge Routing til at indlæse en anden del af applikationen hjælper med at logisk opdele applikationen og gøre den mere håndterbar.
Lad os antage, at vi har en bestillingsapplikation, hvor en kunde kan se ordrer og placere nye.
Nedenstående diagram og efterfølgende forklaring viser, hvordan du laver denne applikation som en enkelt sideapplikation.
I stedet for at have to forskellige websider, en til "Vis ordrer" og en til "Nye ordrer", i AngularJS, opretter du i stedet to forskellige visninger kaldet "Vis ordrer" og "Nye ordrer" på samme side.
Vi vil også have 2 referencelinks i vores applikation kaldet #show og #new.
- Så når applikationen går til MyApp / # show, vil den vise visningen af View Orders, samtidig med at den ikke forlader siden. Det opdaterer bare sektionen på den eksisterende side med oplysningerne i "Vis ordrer". Det samme gælder for visningen "Nye ordrer".
Så på denne måde bliver det bare enklere at adskille applikationen i forskellige visninger for at gøre det mere håndterbart og let at foretage ændringer, når det er nødvendigt.
Og hver visning vil have en tilsvarende controller til at kontrollere forretningslogikken for den funktionalitet.
ng-view-direktivet i AngularJS
"NgView" er et direktiv, der supplerer $ rute-tjenesten ved at inkludere den gengivne skabelon for den aktuelle rute i hovedlayoutfilen (index.html).
Hver gang den aktuelle rute ændres, inkluderede visningen ændringer til den i henhold til konfigurationen af $ rute-tjenesten uden at ændre selve siden.
Vi vil dække ruter i et senere kapitel, for nu vil vi fokusere på at tilføje flere visninger til vores applikation.
Nedenfor er hele rutediagrammet over, hvordan hele processen fungerer. Vi gennemgår detaljeret for hver proces i vores eksempel vist nedenfor.
ng-view Eksempel
Lad os se på et eksempel på, hvordan vi kan implementere synspunkter.
I vores eksempel vil vi præsentere to muligheder for brugeren,
- Den ene er at vise en "begivenhed", og den anden er at tilføje en "begivenhed".
- Når brugeren klikker på linket Tilføj en begivenhed, vises de visningen for "Tilføj begivenhed", og det samme gælder for "Vis begivenhed."
Følg nedenstående trin for at få dette eksempel på plads.
Trin 1) Inkluder vinkelrute-filen som en scriptreference.
Denne rutefil er nødvendig for at gøre brug af funktionaliteten ved at have flere ruter og visninger. Denne fil kan downloades fra angularJS-webstedet.
Trin 2) I dette trin,
- Tilføj href-tags, som repræsenterer links til "Tilføjelse af en ny begivenhed" og "Visning af en begivenhed".
- Tilføj også et div-tag med ng-view-direktivet, som repræsenterer visningen.
Dette gør det muligt at indsprøjte den tilsvarende visning, hver gang brugeren klikker på enten "Tilføj nyt begivenhedslink" eller "Vis begivenhedslink".
Trin 3) I dit script-tag til Angular JS skal du tilføje følgende kode.
Lad os ikke bekymre os om rutingen, for nu ser vi dette i et senere kapitel. Lad os bare se koden til visningerne for nu.
- Dette afsnit af kode betyder, at når brugeren klikker på href-tagget "NewEvent", som blev defineret i div-tagget tidligere. Det går til websiden add_event.html og tager koden derfra og injicerer den i visningen. For det andet skal du gå til "AddEventController" for at behandle forretningslogikken for denne visning.
- Dette afsnit af kode betyder, at når brugeren klikker på href-tagget "DisplayEvent", som blev defineret i div-tagget tidligere. Det går til websiden show_event.html, tager koden derfra og injicerer den i visningen. For det andet skal du gå til "ShowDisplayController" for at behandle forretningslogikken for denne visning.
- Dette afsnit af kode betyder, at standardvisningen, der vises til brugeren, er DisplayEvent-visningen
Trin 4) Næste er at tilføje controllere til at behandle forretningslogikken for både "DisplayEvent" og "Add New Event" -funktionaliteten.
Vi tilføjer bare en beskedvariabel til hvert omfangsobjekt for hver controller. Denne meddelelse vises, når den relevante visning vises for brugeren.
Event Registration Guru99 Global Event
Trin 5) Opret sider kaldet add_event.html og show_event.html. Hold siderne enkle som vist nedenfor.
I vores tilfælde vil siden add_event.html have et header-tag sammen med teksten "Tilføj ny begivenhed" og have et udtryk for at vise meddelelsen "Dette er for at tilføje en ny begivenhed".
På samme måde vil show_event.html-siden også have et header-tag til at indeholde teksten "Vis begivenhed" og også have et meddelelsesudtryk for at vise meddelelsen "Dette er for at vise en begivenhed."
Værdien af meddelelsesvariablen indsprøjtes baseret på den controller, der er knyttet til visningen.
For hver side vil vi tilføje meddelelsesvariablen, som injiceres fra hver respektive controller.
- tilføj_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output kan vi bemærke 2 ting
- Adresselinjen afspejler, hvad der er den aktuelle visning, der vises. Så da standardvisningen er at vise skærmbilledet Vis begivenhed, viser adresselinjen adressen til "DisplayEvent".
- Dette afsnit er visningen, som oprettes i farten. Da standardvisningen er Vis begivenhed, er dette det, der vises for brugeren.
Klik nu på linket Tilføj ny begivenhed på den viste side. Du får nu nedenstående output.
Produktion:
- Adresselinjen afspejler nu, at den aktuelle visning nu er visningen "Tilføj ny begivenhed". Bemærk, at du stadig vil være på den samme applikationsside. Du vil ikke blive dirigeret til en ny applikationsside.
- Dette afsnit er visningen, og det ændres nu for at vise HTML for funktionen "Tilføj ny begivenhed". Så nu i dette afsnit vises header-koden "Tilføj ny begivenhed" og teksten "Dette er for at tilføje en ny begivenhed" for brugeren.