AngularJS ng-vy med exempel: Hur man implementerar vy
James Hartman
Numera har alla säkert hört talas om "Single Page Applications". Många av de välkända webbplatserna som Gmail använd konceptet med enkelsidiga applikationer (SPA).
SPA's ä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 av den nya sidan på den befintliga sidan själv.
Det ger användaren en känsla av att han aldrig lämnade sidan i första hand. Detsamma kan uppnås i Angular med hjälp av Views i samband med Routes.
I den här handledningen kommer du att lära dig-
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 en applikation i logiska vyer och binda olika vyer till Controllers.
Att dela upp programmet i olika vyer och använda Routing för att ladda olika delar av programmet hjälper till att logiskt dela upp programmet och göra det mer hanterbart.
Låt oss anta att vi har en beställningsapplikation, där en kund kan se beställningar och lägga nya.
Diagrammet nedan och efterföljande förklaring visar hur man gör denna ansökan som en ensidig applikation.
Nu, istället för att ha två olika webbsidor, en för "Visa beställningar" och en annan för "Nya beställningar", in 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 2 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 av View Orders, samtidigt som den inte lämnar sidan. Det kommer bara att uppdatera avsnittet på den befintliga sidan med informationen om "Visa beställningar". Detsamma gäller för vyn "Nya beställningar".
Så på detta sätt blir det bara enklare att dela upp applikationen i olika vyer för att göra det mer hanterbart och enkelt att göra ändringar närhelst det behövs.
Och varje vy kommer att ha en motsvarande styrenhet för att styra affärslogiken för den funktionaliteten.
ng-view-direktivet i AngularJS
"ngView" är ett direktiv som kompletterar $route-tjä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 av den enligt konfigurationen av $route-tjänsten utan att ändra själva sidan.
Vi kommer att täcka rutter i ett senare kapitel, för nu, kommer vi att fokusera på att lägga till flera vyer till vår applikation.
Nedan finns hela flödesschemat över hur hela processen fungerar. Vi kommer att gå igenom i detalj för varje process i vårt exempel som visas nedan.
Hur man implementerar ng-view i AngularJS
Låt oss ta en titt på ett exempel på hur vi kan implementera ng-view i AngularJS. I vårt exempel kommer vi att presentera två alternativ för användaren,
- Den ena är att visa en "Event" och den andra är att lägga till en "Event".
- När användaren klickar på länken Lägg till en händelse visas 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å detta exempel på plats.
Steg 1) Inkludera angular-route-filen som en skriptreferens.
Denna ruttfil är nödvändig för att kunna använda funktionerna i att ha flera rutter och vyer. Den här filen kan laddas ner från webbplatsen angularJS.
Steg 2) Lägg till href-taggar och div-taggar.
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 kommer att representera vyn. Detta gör att motsvarande vy kan injiceras när användaren klickar på antingen "Lägg till ny händelse-lä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 routing, för nu kommer vi att se detta i ett senare kapitel. Låt oss bara se koden för vyerna för nu.
- Detta avsnitt av kod betyder att när användaren klickar på href-taggen "NewEvent" som definierades i div-taggen tidigare. Den kommer att gå 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 denna vy, gå till "AddEventController".
- Detta avsnitt av kod betyder att när användaren klickar på href-taggen "DisplayEvent" som definierades i div-taggen tidigare. Den kommer att gå till webbsidan show_event.html, ta koden därifrån och injicera den i vyn. För det andra, för att bearbeta affärslogiken för denna vy, gå till "ShowDisplayController".
- Detta kodavsnitt betyder att standardvyn som visas för användaren är DisplayEvent-vyn
Steg 4) Lägg till kontroller för att bearbeta affärslogiken.
Nästa är att lägga till kontroller för att bearbeta affärslogiken för både "DisplayEvent" och "Add New Event" funktionalitet.
Vi lägger helt enkelt till en meddelandevariabel till varje scope-objekt för varje styrenhet. Detta meddelande kommer att visas när lämplig vy visas för användaren.
<!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>
Steg 5) Skapa sidor som heter add_event.html och show_event.html
Skapa sedan sidor som heter add_event.html och show_event.html. Håll sidorna enkla, som visas nedan.
I vårt fall kommer sidan add_event.html att ha en rubriktagg tillsammans med texten "Lägg till ny händelse" och har ett uttryck för att visa meddelandet "Detta är att lägga till en ny händelse".
På samma sätt kommer sidan show_event.html också att ha en rubriktagg för att hålla texten "Visa händelse" och även 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 kommer vi att lägga till meddelandevariabeln, som kommer att injiceras från respektive styrenhet.
- add_event.html
<h2>Add New Event</h2>
{{message}}
- show_event.html
<h2>Show Event</h2>
{{message}}
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Från utgången kan vi märka 2 saker
- Adressfältet kommer att spegla vad som är den aktuella vyn som visas. Så eftersom standardvyn är att visa skärmen Show Event visar adressfältet adressen för "DisplayEvent".
- Det här avsnittet är vyn, som skapas i farten. Eftersom standardvyn är Show Event one, är detta vad som visas för användaren.
Klicka nu på länken Lägg till ny händelse på sidan som visas. Du kommer nu att få utdata nedan.
Produktion:
- Adressfältet kommer nu att reflektera att den aktuella vyn nu är vyn "Lägg till ny händelse". Observera att du fortfarande kommer att vara på samma ansökningssida. Du kommer inte att dirigeras till en ny ansökningssida.
- Det här avsnittet ä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 det här avsnittet visas rubriktaggen "Lägg till ny händelse" och texten "Detta är att lägga till en ny händelse" för användaren.
