I dag ville alle ha hørt om "Single Page Applications". Mange av de kjente nettstedene som Gmail bruker konseptet Single Page Applications (SPA).
SPA er konseptet der når en bruker ber om en annen side, vil applikasjonen ikke navigere til den siden, men i stedet vise visningen av den nye siden på selve den eksisterende siden.
Det gir følelsen til brukeren at han aldri forlot siden i utgangspunktet. Det samme kan oppnås i Angular ved hjelp av Views i forbindelse med Routes.
I denne veiledningen vil du lære-
- Hva er en visning?
- ng-view-direktivet i AngularJS
- ng-view Eksempel
Hva er en visning?
En visning er innholdet som vises til brukeren. I utgangspunktet hva brukeren vil se, følgelig vil visningen av applikasjonen bli vist for brukeren.
Kombinasjonen av visninger og ruter hjelper en til å dele en applikasjon i logiske visninger og binde forskjellige visninger til kontrollere.
Å dele applikasjonen i forskjellige visninger og bruke Routing til å laste inn en annen del av applikasjonen, hjelper deg med å logisk dele applikasjonen og gjøre den mer håndterbar.
La oss anta at vi har en bestillingsapplikasjon, hvor en kunde kan se bestillinger og plassere nye.
Diagrammet nedenfor og påfølgende forklaring viser hvordan du lager denne applikasjonen som en enkeltsidesøknad.
Nå, i stedet for å ha to forskjellige websider, en for "Vis ordrer" og en for "Nye ordrer", i AngularJS, oppretter du i stedet to forskjellige visninger kalt "Vis ordrer" og "Nye ordrer" på samme side.
Vi vil også ha to referanselinker i applikasjonen vår som heter #show og #new.
- Så når applikasjonen går til MyApp / # show, vil den vise visningen av View Orders, samtidig som den ikke forlater siden. Det oppdaterer bare delen av den eksisterende siden med informasjonen "Vis ordrer". Det samme gjelder "New Orders" -visningen.
Så på denne måten blir det bare enklere å skille applikasjonen i forskjellige visninger for å gjøre det mer håndterbart og enkelt å gjøre endringer når det er nødvendig.
Og hver visning vil ha en tilsvarende kontroller for å kontrollere forretningslogikken for den funksjonaliteten.
ng-view-direktivet i AngularJS
"NgView" er et direktiv som utfyller $ rutetjenesten ved å inkludere den gjengitte malen for den nåværende ruten i hovedoppsettfilen (index.html).
Hver gang den nåværende ruten endres, inkluderte visningen endringer i den i henhold til konfigurasjonen til $ rutetjenesten uten å endre selve siden.
Vi vil dekke ruter i et senere kapittel, for nå vil vi fokusere på å legge til flere visninger i applikasjonen vår.
Nedenfor er hele flytskjemaet over hvordan hele prosessen fungerer. Vi vil gå gjennom i detalj for hver prosess i eksemplet vårt vist nedenfor.
ng-view Eksempel
La oss se på et eksempel på hvordan vi kan implementere visninger.
I vårt eksempel skal vi presentere to alternativer for brukeren,
- Den ene er å vise et "arrangement", og det andre er å legge til et "arrangement".
- Når brukeren klikker på koblingen Legg til en hendelse, blir de vist visningen for "Legg til hendelse", og det samme gjelder for "Vis hendelse."
Følg trinnene nedenfor for å få dette eksemplet på plass.
Trinn 1) Inkluder vinkelrute-filen som skriptreferanse.
Denne rutefilen er nødvendig for å kunne bruke funksjonene til å ha flere ruter og visninger. Denne filen kan lastes ned fra nettstedet angularJS.
Trinn 2) I dette trinnet,
- Legg til href-koder som representerer lenker til "Legge til en ny hendelse" og "Vise en hendelse".
- Legg også til en div-tag med ng-view-direktivet som vil representere visningen.
Dette vil tillate at den tilsvarende visningen blir injisert når brukeren klikker på enten "Legg til ny hendelseslenke" eller "Vis hendelseslenke."
Trinn 3) Legg til følgende kode i skriptekoden din for Angular JS.
La oss ikke bekymre deg for rutingen, for nå vil vi se dette i et senere kapittel. La oss bare se koden for visningene for nå.
- Denne delen av koden betyr at når brukeren klikker på href-koden "NewEvent" som ble definert i div-koden tidligere. Den går til nettsiden add_event.html, og tar koden derfra og injiserer den i visningen. For det andre for å behandle forretningslogikken for denne visningen, gå til "AddEventController".
- Denne delen av koden betyr at når brukeren klikker på href-koden "DisplayEvent" som ble definert i div-koden tidligere. Den går til nettsiden show_event.html, tar koden derfra og injiserer den i visningen. For det andre, for å behandle forretningslogikken for denne visningen, gå til "ShowDisplayController".
- Denne delen av koden betyr at standardvisningen som vises for brukeren, er DisplayEvent-visningen
Trinn 4) Neste er å legge til kontrollere for å behandle forretningslogikken for både "DisplayEvent" og "Add New Event" -funksjonaliteten.
Vi legger bare til en meldingsvariabel til hvert omfangsobjekt for hver kontroller. Denne meldingen vises når riktig visning vises for brukeren.
Event Registration Guru99 Global Event
Trinn 5) Opprett sider kalt add_event.html og show_event.html. Hold sidene enkle som vist nedenfor.
I vårt tilfelle vil add_event.html-siden ha en topptekst sammen med teksten "Legg til ny hendelse" og ha et uttrykk for å vise meldingen "Dette er for å legge til en ny hendelse".
På samme måte vil show_event.html-siden også ha en topptekst for å inneholde teksten "Show Event" og også ha et meldingsuttrykk for å vise meldingen "This is to display an Event."
Verdien av meldingsvariabelen vil bli injisert basert på kontrolleren som er festet til visningen.
For hver side skal vi legge til meldingsvariabelen, som vil bli injisert fra hver respektive kontroller.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Fra utgangen kan vi legge merke til to ting
- Adressefeltet vil gjenspeile hva som er gjeldende visning. Så siden standardvisningen er å vise skjermbildet Vis hendelse, viser adresselinjen adressen til "DisplayEvent".
- Denne delen er Visningen, som blir opprettet på farten. Siden standardvisningen er Vis hendelse, blir dette vist for brukeren.
Klikk nå på koblingen Legg til ny hendelse på siden som vises. Du vil nå få utdataene nedenfor.
Produksjon:
- Adresselinjen vil nå gjenspeile at den nåværende visningen nå er "Legg til ny hendelse" -visningen. Legg merke til at du fortsatt vil være på samme applikasjonsside. Du vil ikke bli sendt til en ny applikasjonsside.
- Denne delen er visningen, og den vil nå endres for å vise HTML for funksjonen "Legg til ny hendelse". Så i denne delen vises toppteksten "Add New Event" og teksten "This is to Add a new Event" for brukeren.