AngularJS ng-view med eksempel: Sådan implementeres visning
James Hartman
I dag ville alle have hørt om "Single Page Applications". Mange af de velkendte websteder såsom Gmail bruger konceptet Single Page Applications (SPA'er).
SPA'er er konceptet, hvor når en bruger anmoder om en anden side, vil applikationen ikke navigere til denne side, men i stedet vise visningen af den nye side på selve den eksisterende side.
Det giver en følelse 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 tutorial lærer du-
- Hvad er en visning?
- ng-view direktiv i AngularJS
- Sådan implementeres ng-view i AngularJS med eksempel
Hvad er en visning?
En visning er det indhold, der vises til brugeren. Dybest set, hvad brugeren ønsker at se, vil denne visning af applikationen derfor blive vist til brugeren.
Kombinationen af visninger og ruter hjælper en med at opdele en applikation i logiske visninger og binde forskellige visninger til controllere.
Opdeling af applikationen i forskellige visninger og brug af Routing til at indlæse forskellige dele af applikationen hjælper med logisk at opdele applikationen og gøre den mere overskuelig.
Lad os antage, at vi har en bestillingsapplikation, hvor en kunde kan se ordrer og afgive nye.
Nedenstående diagram og efterfølgende forklaring viser, hvordan man laver denne ansøgning som en enkeltsides ansøgning.
Nu, i stedet for at have to forskellige websider, en for "Se ordrer" og en anden for "Nye ordrer", i AngularJS, ville du i stedet oprette to forskellige visninger kaldet "Se 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 vil bare opdatere sektionen af den eksisterende side med oplysningerne om "Se ordrer". Det samme gælder for visningen "Nye ordrer".
Så på denne måde bliver det bare nemmere at adskille applikationen i forskellige visninger for at gøre det mere overskueligt og nemt at foretage ændringer, når det er nødvendigt.
Og hver visning vil have en tilsvarende controller til at styre forretningslogikken for den funktionalitet.
ng-view direktiv i AngularJS
"ngView" er et direktiv, der supplerer $route-tjenesten ved at inkludere den gengivede skabelon for den aktuelle rute i hovedlayout-filen (index.html).
Hver gang den aktuelle rute ændres, inkluderede visningen ændringer til den i henhold til konfigurationen af $route-tjenesten uden at ændre selve siden.
Vi vil dække veje i et senere kapitel, for nu, vil vi fokusere på at tilføje flere visninger til vores applikation.
Nedenfor er hele flowchartet over, hvordan hele processen fungerer. Vi vil gennemgå i detaljer for hver proces i vores eksempel vist nedenfor.
Sådan implementeres ng-view i AngularJS
Lad os tage et kig på et eksempel på, hvordan vi kan implementere ng-view i AngularJS. 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, vil de få vist visningen for "Tilføj begivenhed" og det samme gælder for "Vis begivenhed."
Følg venligst nedenstående trin for at få dette eksempel på plads.
Trin 1) Inkluder angular-route-filen som en scriptreference.
Denne rutefil er nødvendig for at gøre brug af funktionerne ved at have flere ruter og udsigter. Denne fil kan downloades fra angularJS-webstedet.
Trin 2) Tilføj href tags & div tag.
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 vil tillade den tilsvarende visning at blive injiceret, hver gang brugeren klikker på enten "Tilføj ny begivenhed-linket" eller "Vis begivenhedslinket".
Trin 3) Tilføj følgende kode i dit script-tag til Angular JS.
Lad os ikke bekymre os om routing, for nu vil vi se dette i et senere kapitel. Lad os lige se koden for visningerne for nu.
- Denne sektion af kode betyder, at når brugeren klikker på href-tagget "NewEvent", som blev defineret i div-tagget tidligere. Det vil gå til websiden add_event.html, og vil tage koden derfra og injicere den i visningen. For det andet for at behandle forretningslogikken for denne visning, gå til "AddEventController".
- Denne sektion af kode betyder, at når brugeren klikker på href-tagget "DisplayEvent", som blev defineret i div-tagget tidligere. Den vil gå til websiden show_event.html, tage koden derfra og injicere den i visningen. For det andet, for at behandle forretningslogikken for denne visning, skal du gå til "ShowDisplayController".
- Denne sektion af kode betyder, at standardvisningen, der vises til brugeren, er DisplayEvent-visningen
Trin 4) Tilføj controllere til at behandle forretningslogikken.
Det næste er at tilføje controllere til at behandle forretningslogikken for både "DisplayEvent" og "Add New Event" funktionaliteten.
Vi tilføjer blot en meddelelsesvariabel til hvert scope-objekt for hver controller. Denne meddelelse vil blive vist, når den relevante visning vises for brugeren.
<!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>
Trin 5) Opret sider kaldet add_event.html og show_event.html
Derefter skal du oprette 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 beskeden "Dette er for at tilføje en ny begivenhed".
Tilsvarende vil siden show_event.html også have et header-tag til at holde teksten "Vis begivenhed" og også have et beskedudtryk for at vise beskeden "Dette er for at vise en begivenhed."
Værdien af meddelelsesvariablen vil blive injiceret baseret på den controller, der er knyttet til visningen.
For hver side vil vi tilføje meddelelsesvariablen, som vil blive injiceret fra hver respektive controller.
- add_event.html
<h2>Add New Event</h2>
{{message}}
- show_event.html
<h2>Show Event</h2>
{{message}}
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
Fra outputtet kan vi bemærke 2 ting
- Adresselinjen vil afspejle, hvad der er den aktuelle visning, der vises. Så da standardvisningen er at vise skærmen Vis begivenhed, viser adresselinjen adressen for "DisplayEvent".
- Denne sektion er visningen, som bliver oprettet med det samme. Da standardvisningen er Vis begivenhed, er dette, hvad der bliver vist for brugeren.
Klik nu på linket Tilføj ny begivenhed på den viste side. Du vil nu få nedenstående output.
Output:
- Adresselinjen vil nu afspejle, at den aktuelle visning nu er visningen "Tilføj ny begivenhed". Bemærk, at du stadig vil være på den samme ansøgningsside. Du vil ikke blive dirigeret til en ny ansøgningsside.
- Denne sektion er View, og den vil nu ændre sig til at vise HTML for funktionen "Tilføj ny begivenhed". Så nu i dette afsnit vises header-tagget "Tilføj ny begivenhed" og teksten "Dette er at tilføje en ny begivenhed" for brugeren.
