În zilele noastre, toată lumea ar fi auzit despre „Aplicațiile pentru o singură pagină”. Multe dintre site-urile web cunoscute precum 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 acea pagină, ci va afișa vizualizarea noii pagini în pagina existentă.
Îi dă senzația utilizatorului că nu a părăsit niciodată pagina în primul rând. Același lucru poate fi realizat și în Angular cu ajutorul Vizualizărilor împreună cu Rute.
În acest tutorial, veți învăța-
- Ce este o vizualizare?
- Directiva privind vizualizarea în AngularJS
- ng-view Exemplu
Ce este o vizualizare?
O vizualizare este conținutul care este afișat utilizatorului. Practic, ceea ce dorește să vadă utilizatorul, în consecință, vizualizarea aplicației va fi afișată utilizatorului.
Combinația de vizualizări și Rute vă ajută să împărțiți o aplicație în vizualizări logice și să legați diferite vizualizări la Controlere.
Împărțirea aplicației în diferite vizualizări și utilizarea Routing pentru a încărca diferite părți ale aplicației ajută la împărțirea logică a aplicației și la simplificarea acesteia.
Să presupunem că avem o aplicație de comandă, în care un client poate vizualiza comenzile și plasa altele noi.
Diagrama de mai jos și explicația ulterioară demonstrează cum să creați această aplicație ca o aplicație cu o singură pagină.
Acum, în loc să aveți două pagini web diferite, una pentru „Vizualizați comenzile” și alta pentru „Comenzi noi”, în AngularJS, veți crea în schimb două vizualizări diferite numite „Vezi comenzi” și „Comenzi noi” în aceeași pagină.
Vom avea, de asemenea, 2 linkuri de referință în aplicația noastră numită #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. Va reîmprospăta secțiunea paginii existente cu informațiile din „Vizualizați comenzile”. Același lucru este valabil și pentru vizualizarea „Comenzi noi”.
Deci, în acest fel devine mai simplu să separați aplicația în diferite vizualizări pentru a face mai ușor de gestionat și mai ușor să faceți 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 privind vizualizarea în AngularJS
„NgView” este o directivă care completează serviciul $ route, incluzând șablonul redat al traseului curent în fișierul de aspect principal (index.html).
De fiecare dată când ruta curentă se schimbă, vizualizarea a inclus modificări în funcție de configurația serviciului $ route fără a modifica pagina în sine.
Vom acoperi traseele într-un capitol ulterior, deocamdată ne vom concentra pe adăugarea mai multor vizualizări aplicației noastre.
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.
ng-view Exemplu
Să aruncăm o privire la un exemplu despre cum putem implementa vizualizări.
Î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 pentru „Adăugați un eveniment” și același lucru este valabil pentru „Afișați evenimentul”.
Vă rugăm să urmați pașii de mai jos pentru a pune în aplicare acest exemplu.
Pasul 1) Includeți fișierul cu traseu 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 angularJS.
Pasul 2) În acest pas,
- 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 injectarea vizualizării corespunzătoare ori de câte ori utilizatorul face clic pe linkul „Adăugare eveniment nou” sau „Afișați linkul evenimentului”
Pasul 3) În eticheta de script pentru Angular JS, adăugați următorul cod.
Să nu ne facem griji cu privire la rutare, pentru moment, vom vedea acest lucru î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ă anterior în eticheta div. 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 procesarea logicii de afaceri pentru această vizualizare, accesați „AddEventController”.
- Această secțiune de cod înseamnă că atunci când utilizatorul face clic pe eticheta href „DisplayEvent” care a fost definită anterior î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 procesarea logicii de afaceri pentru această vizualizare, accesați „ShowDisplayController”.
- Această secțiune de cod înseamnă că vizualizarea implicită afișată utilizatorului este vizualizarea DisplayEvent
Pasul 4) Următorul este să adăugați controlere pentru a procesa logica de afaceri atât pentru funcționalitatea „DisplayEvent”, cât și pentru „Adăugare eveniment nou”.
Pur și simplu adăugăm o variabilă de mesaj la fiecare obiect de scop pentru fiecare controler. Acest mesaj va fi afișat atunci când vizualizarea corespunzătoare este afișată utilizatorului.
Event Registration Guru99 Global Event
Pasul 5) 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ă 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 eveniment nou”.
În mod similar, pagina show_event.html va avea, de asemenea, o etichetă de antet pentru a conține textul „Afișați evenimentul” și va avea, de asemenea, o expresie de mesaj pentru a afișa mesajul „Acesta este pentru a afișa un eveniment”.
Valoarea variabilei de mesaj va fi injectată pe baza controlerului care este atașat la vizualizare.
Pentru fiecare pagină, vom adăuga variabila de mesaj, care va fi injectată de la fiecare controler respectiv.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Dacă codul este executat cu succes, următoarea ieșire va fi afișată 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 să afișeze ecranul Afișare eveniment, bara de adrese afișează adresa pentru „DisplayEvent”.
- Această secțiune este Vizualizarea, care se creează din mers. Deoarece vizualizarea implicită este cea Afișare eveniment, acesta este ceea ce este afișat utilizatorului.
Acum faceți clic pe linkul Add New Event din pagina afișată. Acum veți obține rezultatul de mai jos.
Ieșire:
- Bara de adrese va reflecta acum că vizualizarea curentă este acum vizualizarea „Adăugați un eveniment nou”. Observați că veți fi în continuare pe aceeași pagină a aplicației. Nu veți fi direcționat către o nouă pagină a aplicației.
- Această secțiune este Vizualizare și se va modifica acum pentru a afișa codul HTML pentru funcționalitatea „Adăugați un eveniment nou”. Deci, acum, în această secțiune, eticheta antet „Adăugați un eveniment nou” și textul „Acesta este pentru a adăuga un eveniment nou” este afișat utilizatorului.