Numera skulle alla ha hört talas om "Single Page Applications". Många av de välkända webbplatserna som Gmail använder konceptet Single Page Applications (SPA).
SPA är konceptet där när en användare begär en annan sida, kommer applikationen inte att navigera till den sidan utan istället visa vyn på den nya sidan på själva befintliga sidan.
Det ger användaren en känsla av att han aldrig lämnade sidan i första hand. Detsamma kan uppnås i vinkeln med hjälp av vyer i samband med rutter.
I den här handledningen lär du dig-
- Vad är en vy?
- ng-view-direktivet i AngularJS
- ng-view Exempel
Vad är en vy?
En vy är det innehåll som visas för användaren. I grund och botten vad användaren vill se, följaktligen kommer den vyn av applikationen att visas för användaren.
Kombinationen av vyer och rutter hjälper en att dela upp ett program i logiska vyer och binda olika vyer till styrenheter.
Att dela upp applikationen i olika vyer och använda Routing för att ladda olika delar av applikationen hjälper till att logiskt dela applikationen och göra den mer hanterbar.
Låt oss anta att vi har en beställningsapplikation, där en kund kan se beställningar och placera nya.
Nedanstående diagram och efterföljande förklaring visar hur man gör den här applikationen som en en-sidig applikation.
Nu, istället för att ha två olika webbsidor, en för "Visa beställningar" och en för "Nya beställningar", i AngularJS, skulle du istället skapa två olika vyer som heter "Visa beställningar" och "Nya beställningar" på samma sida.
Vi kommer också att ha två referenslänkar i vår applikation som heter #show och #new.
- Så när applikationen går till MyApp / # show kommer den att visa vyn för View Orders, samtidigt som den inte lämnar sidan. Det uppdaterar bara avsnittet på den befintliga sidan med informationen "Visa beställningar". Detsamma gäller för vyn "Nya beställningar".
Så på det här sättet blir det bara enklare att separera applikationen i olika vyer för att göra det mer hanterbart och enkelt att göra ändringar när det behövs.
Och varje vy kommer att ha en motsvarande styrenhet för att styra affärslogiken för den funktionen.
ng-view-direktivet i AngularJS
"NgView" är ett direktiv som kompletterar $ ruttjänsten genom att inkludera den renderade mallen för den aktuella rutten i huvudlayoutfilen (index.html).
Varje gång den aktuella rutten ändras inkluderade vyn ändringar i den enligt konfigurationen för $ ruttjänsten utan att själva sidan ändrades.
Vi kommer att täcka rutter i ett senare kapitel, för nu kommer vi att fokusera på att lägga till flera vyer i vår applikation.
Nedan finns hela flödesschemat för hur hela processen fungerar. Vi kommer att gå igenom i detalj för varje process i vårt exempel som visas nedan.
ng-view Exempel
Låt oss titta på ett exempel på hur vi kan implementera vyer.
I vårt exempel kommer vi att presentera två alternativ för användaren,
- Den ena är att visa en "händelse", och den andra är att lägga till en "händelse".
- När användaren klickar på länken Lägg till en händelse visas de vyn för "Lägg till händelse" och detsamma gäller för "Visa händelse".
Följ stegen nedan för att få det här exemplet på plats.
Steg 1) Inkludera vinkelruttfilen som skripthänvisning.
Denna ruttfil är nödvändig för att kunna utnyttja funktionerna i att ha flera rutter och vyer. Den här filen kan laddas ner från angularJS webbplats.
Steg 2) I detta steg,
- Lägg till href-taggar som representerar länkar till "Lägga till en ny händelse" och "Visa en händelse".
- Lägg också till en div-tagg med ng-view-direktivet som representerar vyn.
Detta gör att motsvarande vy kan injiceras när användaren klickar på antingen "Lägg till ny händelselänk" eller "Visa händelselänk".
Steg 3) Lägg till följande kod i din skripttagg för Angular JS.
Låt oss inte oroa oss för routingen, för nu kommer vi att se detta i ett senare kapitel. Låt oss bara se koden för vyerna för tillfället.
- Detta avsnitt av kod betyder att när användaren klickar på href-taggen "NewEvent" som definierades i div-taggen tidigare. Det går till webbsidan add_event.html och tar koden därifrån och injicerar den i vyn. För det andra för att bearbeta affärslogiken för den här vyn, gå till "AddEventController".
- Denna koddel betyder att när användaren klickar på href-taggen "DisplayEvent" som definierades i div-taggen tidigare. Det går till webbsidan show_event.html, tar koden därifrån och injicerar den i vyn. För det andra, för att bearbeta affärslogiken för den här vyn, gå till "ShowDisplayController".
- Denna koddel betyder att standardvyn som visas för användaren är vyn DisplayEvent
Steg 4) Nästa är att lägga till styrenheter för att bearbeta affärslogiken för både "DisplayEvent" och "Add New Event" -funktionaliteten.
Vi lägger bara till en meddelandevariabel till varje scope-objekt för varje controller. Detta meddelande visas när användaren visar lämplig vy.
Event Registration Guru99 Global Event
Steg 5) Skapa sidor som heter add_event.html och show_event.html. Håll sidorna enkla enligt nedan.
I vårt fall kommer sidan add_event.html att ha en rubriktagg tillsammans med texten "Lägg till ny händelse" och ha ett uttryck för att visa meddelandet "Detta är att lägga till en ny händelse".
På samma sätt kommer show_event.html-sidan också att ha en rubriktagg för att hålla texten "Visa händelse" och också ha ett meddelandeuttryck för att visa meddelandet "Detta är för att visa en händelse."
Värdet på meddelandevariabeln kommer att injiceras baserat på styrenheten som är kopplad till vyn.
För varje sida ska vi lägga till meddelandevariabeln, som kommer att injiceras från respektive kontroller.
- add_event.html
Add New Event
{{message}}
- visa_event.html
Show Event
{{message}}
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen kan vi märka två saker
- Adressfältet återspeglar den aktuella vyn som visas. Så eftersom standardvyn är att visa skärmen Visa händelse, visar adressfältet adressen för "DisplayEvent".
- Det här avsnittet är vyn som skapas direkt. Eftersom standardvyn är en Visa händelse, visas det här för användaren.
Klicka nu på länken Lägg till ny händelse på sidan som visas. Du får nu utdata nedan.
Produktion:
- Adressfältet återspeglar nu att den aktuella vyn nu är vyn "Lägg till ny händelse". Observera att du fortfarande kommer att vara på samma applikationssida. Du kommer inte att dirigeras till en ny applikationssida.
- Detta avsnitt är vyn, och det kommer nu att ändras för att visa HTML för funktionen "Lägg till ny händelse". Så nu i detta avsnitt visas rubriktaggen "Lägg till ny händelse" och texten "Detta är för att lägga till en ny händelse" för användaren.