AngularJS ng-view cu Exemplu: Cum se implementează vizualizarea
James Hartman
În zilele noastre, toată lumea ar fi auzit despre „Aplicațiile cu o singură pagină”. Multe dintre site-urile web bine-cunoscute, cum ar fi Gmail, folosesc conceptul de aplicații cu o singură pagină (SPA).
SPA este conceptul în care atunci când un utilizator solicită o altă pagină, aplicația nu va naviga la pagina respectivă, ci va afișa vizualizarea noii pagini în cadrul paginii existente.
Îi dă utilizatorului sentimentul că nu a părăsit niciodată pagina în primul rând. Același lucru poate fi realizat în Angular cu ajutorul Views în combinație cu Routes.
În acest tutorial, veți învăța-
- Ce este o vedere?
- Directiva ng-view în AngularJS
- Cum se implementează ng-view în AngularJS cu Exemplu
Ce este o vedere?
O vizualizare este conținutul care este afișat utilizatorului. Practic, ceea ce utilizatorul dorește să vadă, în consecință, acea vedere a aplicației va fi afișată utilizatorului.
Combinația de vederi și rute vă ajută să împărțiți o aplicație în vederi logice și să legați diferite vederi la controlere.
Împărțirea aplicației în diferite vizualizări și folosirea Routing pentru a încărca diferite părți ale aplicației ajută la împărțirea logică a aplicației și o face mai ușor de gestionat.
Să presupunem că avem o aplicație de comandă, în care un client poate vizualiza comenzi și plasa altele noi.
Diagrama de mai jos și explicația ulterioară demonstrează cum să faci această aplicație ca o singură pagină.
Acum, în loc să aveți două pagini web diferite, una pentru „Vizualizați comenzi” și alta pentru „Comenzi noi”, în AngularJS, ați crea în schimb două vizualizări diferite numite „Vizualizați comenzi” și „Comenzi noi” în aceeași pagină.
Vom avea, de asemenea, 2 link-uri de referință în aplicația noastră numite #show și #new.
- Deci, atunci când aplicația merge la MyApp/#show, va afișa vizualizarea comenzilor de vizualizare, în același timp nu va părăsi pagina. Acesta va reîmprospăta doar secțiunea paginii existente cu informațiile „Vedeți comenzi”. Același lucru este valabil și pentru vizualizarea „Comenzi noi”.
Deci, în acest fel, devine mai simplu să separați aplicația în diferite vederi pentru a face mai ușor de gestionat și ușor de făcut modificări ori de câte ori este necesar.
Și fiecare vizualizare va avea un controler corespunzător pentru a controla logica de afaceri pentru acea funcționalitate.
Directiva ng-view în AngularJS
„ngView” este o directivă care completează serviciul $route prin includerea șablonului redat al rutei curente în fișierul de aspect principal (index.html).
De fiecare dată când ruta curentă se schimbă, vizualizarea inclusă se modifică în funcție de configurația serviciului $route fără a schimba pagina în sine.
Vom acoperi rute într-un capitol ulterior, deocamdată, ne vom concentra pe adăugarea mai multor vizualizări la aplicația noastră.
Mai jos este întreaga diagramă a modului în care funcționează întregul proces. Vom parcurge în detaliu fiecare proces din exemplul nostru prezentat mai jos.
Cum se implementează ng-view în AngularJS
Să aruncăm o privire la un exemplu despre cum putem implementa ng-view în AngularJS. În exemplul nostru, vom prezenta două opțiuni utilizatorului,
- Una este să afișați un „Eveniment”, iar cealaltă este să adăugați un „Eveniment”.
- Când utilizatorul face clic pe linkul Adăugați un eveniment, i se va afișa vizualizarea „Adăugați eveniment” și același lucru este valabil și pentru „Afișați evenimentul”.
Vă rugăm să urmați pașii de mai jos pentru a pune în aplicare acest exemplu.
Pas 1) Includeți fișierul cu rută unghiulară ca referință de script.
Acest fișier de rută este necesar pentru a utiliza funcționalitățile de a avea mai multe rute și vizualizări. Acest fișier poate fi descărcat de pe site-ul web angularJS.
Pas 2) Adăugați etichete href și etichetă div.
În această etapă,
- Adăugați etichete href care vor reprezenta linkuri către „Adăugarea unui eveniment nou” și „Afișarea unui eveniment”.
- De asemenea, adăugați o etichetă div cu directiva ng-view care va reprezenta vizualizarea. Acest lucru va permite vizualizarea corespunzătoare să fie injectată ori de câte ori utilizatorul face clic pe „Adăugați linkul eveniment nou” sau pe „Afișați linkul eveniment”.
Pas 3) În eticheta de script pentru Angular JS, adăugați următorul cod.
Să nu ne facem griji cu privire la rutare, deocamdată, vom vedea asta într-un capitol ulterior. Să vedem doar codul pentru vizualizări pentru moment.
- Această secțiune de cod înseamnă că atunci când utilizatorul face clic pe eticheta href „NewEvent”, care a fost definită mai devreme în eticheta div. Acesta va merge la pagina web add_event.html și va prelua codul de acolo și îl va injecta în vizualizare. În al doilea rând, pentru a procesa logica de afaceri pentru această vizualizare, mergeți la „AddEventController”.
- Această secțiune de cod înseamnă că atunci când utilizatorul face clic pe eticheta href „DisplayEvent”, care a fost definită mai devreme în eticheta div. Va merge la pagina web show_event.html, va lua codul de acolo și îl va injecta în vizualizare. În al doilea rând, pentru a procesa logica de afaceri pentru această vizualizare, mergeți la „ShowDisplayController”.
- Această secțiune de cod înseamnă că vizualizarea implicită afișată utilizatorului este vizualizarea DisplayEvent
Pas 4) Adăugați controlori pentru a procesa logica de afaceri.
Următorul este să adăugați controlori pentru a procesa logica de afaceri atât pentru funcționalitatea „DisplayEvent” cât și pentru „Add New Event”.
Pur și simplu adăugăm o variabilă de mesaj la fiecare obiect de domeniu pentru fiecare controler. Acest mesaj va fi afișat atunci când vizualizarea corespunzătoare este afișată utilizatorului.
<!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>
Pas 5) Creați pagini numite add_event.html și show_event.html
Apoi, creați pagini numite add_event.html și show_event.html. Păstrați paginile simple, așa cum se arată mai jos.
În cazul nostru, pagina add_event.html va avea o etichetă de antet împreună cu textul „Adăugați un eveniment nou” și va avea o expresie pentru a afișa mesajul „Acesta este pentru a adăuga un nou eveniment”.
În mod similar, pagina show_event.html va avea, de asemenea, o etichetă de antet pentru a conține textul „Afișare eveniment” și, de asemenea, va avea o expresie de mesaj pentru a afișa mesajul „Acesta este pentru a afișa un eveniment”.
Valoarea variabilei mesaj va fi injectată pe baza controlerului care este atașat la vizualizare.
Pentru fiecare pagină, vom adăuga variabila mesaj, care va fi injectată de la fiecare controler respectiv.
- add_event.html
<h2>Add New Event</h2>
{{message}}
- show_event.html
<h2>Show Event</h2>
{{message}}
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
Din rezultat, putem observa 2 lucruri
- Bara de adrese va reflecta care este vizualizarea curentă afișată. Deci, deoarece vizualizarea implicită este de a afișa ecranul Afișare eveniment, bara de adrese arată adresa pentru „DisplayEvent”.
- Această secțiune este View, care este creată din mers. Deoarece vizualizarea implicită este cea Show Event, aceasta este ceea ce este afișat utilizatorului.
Acum faceți clic pe linkul Adăugați un nou eveniment din pagina afișată. Acum veți obține rezultatul de mai jos.
ieșire:
- Bara de adrese va reflecta acum faptul că vizualizarea curentă este acum vizualizarea „Adăugați un eveniment nou”. Observați că veți fi în continuare pe aceeași pagină de aplicație. Nu veți fi direcționat către o nouă pagină de aplicație.
- Această secțiune este Vizualizare și acum se va schimba pentru a afișa HTML pentru funcționalitatea „Adăugați un eveniment nou”. Deci, acum, în această secțiune, eticheta de antet „Adăugați un eveniment nou” și textul „Acesta este pentru a adăuga un nou eveniment” sunt afișate utilizatorului.
