W dzisiejszych czasach każdy słyszałby o „aplikacjach jednostronicowych”. Wiele znanych witryn internetowych, takich jak Gmail, wykorzystuje koncepcję aplikacji jednostronicowych (SPA).
SPA to koncepcja, w której gdy użytkownik zażąda innej strony, aplikacja nie przejdzie do tej strony, ale zamiast tego wyświetli widok nowej strony w samej istniejącej stronie.
Daje użytkownikowi poczucie, że nigdy nie opuścił strony. To samo można osiągnąć w Angular za pomocą widoków w połączeniu z trasami.
W tym samouczku nauczysz się:
- Co to jest widok?
- Dyrektywa ng-view w AngularJS
- ng-view Example
Co to jest widok?
Widok to treść, która jest pokazywana użytkownikowi. Zasadniczo to, co użytkownik chce zobaczyć, odpowiednio ten widok aplikacji zostanie mu pokazany.
Połączenie widoków i tras pomaga podzielić aplikację na logiczne widoki i powiązać różne widoki z kontrolerami.
Dzielenie aplikacji na różne widoki i używanie routingu do ładowania różnych części aplikacji pomaga w logicznym podzieleniu aplikacji i uczynieniu jej łatwiejszą w zarządzaniu.
Załóżmy, że mamy aplikację do składania zamówień, w której klient może przeglądać zamówienia i składać nowe.
Poniższy diagram i dalsze wyjaśnienia pokazują, jak uczynić tę aplikację jako aplikację jednostronicową.
Teraz, zamiast mieć dwie różne strony internetowe, jedną dla „Wyświetl zamówienia”, a drugą dla „Nowe zamówienia”, w AngularJS zamiast tego utworzyłbyś dwa różne widoki o nazwie „Wyświetl zamówienia” i „Nowe zamówienia” na tej samej stronie.
W naszej aplikacji będziemy mieć również 2 linki referencyjne o nazwach #show i #new.
- Więc kiedy aplikacja przejdzie do MyApp / # show, pokaże widok View Orders, jednocześnie nie opuści strony. Po prostu odświeży sekcję istniejącej strony z informacją „Wyświetl zamówienia”. To samo dotyczy widoku „Nowe zamówienia”.
W ten sposób łatwiej jest podzielić aplikację na różne widoki, aby była łatwiejsza w zarządzaniu i łatwiejsza do wprowadzania zmian w razie potrzeby.
Każdy widok będzie miał odpowiedni kontroler do sterowania logiką biznesową dla tej funkcji.
Dyrektywa ng-view w AngularJS
„NgView” to dyrektywa, która uzupełnia usługę $ route, dołączając wyrenderowany szablon bieżącej trasy do głównego pliku układu (index.html).
Za każdym razem, gdy zmienia się bieżąca trasa, widok obejmował zmiany zgodnie z konfiguracją usługi $ route bez zmiany samej strony.
Trasy będziemy omawiać w kolejnym rozdziale, na razie skupimy się na dodaniu wielu widoków do naszej aplikacji.
Poniżej znajduje się cały schemat blokowy działania całego procesu. Omówimy szczegółowo każdy proces w naszym przykładzie pokazanym poniżej.
ng-view Example
Spójrzmy na przykład, jak możemy zaimplementować widoki.
W naszym przykładzie przedstawimy użytkownikowi dwie opcje,
- Jeden służy do wyświetlania „zdarzenia”, a drugi do dodawania „zdarzenia”.
- Gdy użytkownik kliknie link Dodaj wydarzenie, zostanie mu wyświetlony widok „Dodaj wydarzenie” i to samo dotyczy „Wyświetl wydarzenie”.
Aby zastosować ten przykład, wykonaj poniższe czynności.
Krok 1) Uwzględnij plik trasy kątowej jako odniesienie do skryptu.
Ten plik tras jest niezbędny do korzystania z funkcji posiadania wielu tras i widoków. Ten plik można pobrać ze strony angularJS.
Krok 2) Na tym etapie
- Dodaj tagi href, które będą reprezentować linki „Dodawanie nowego zdarzenia” i „Wyświetlanie zdarzenia”.
- Dodaj także znacznik DIV z dyrektywą ng-view, która będzie reprezentować widok.
Umożliwi to wstawienie odpowiedniego widoku za każdym razem, gdy użytkownik kliknie link „Dodaj nowe wydarzenie” lub „łącze Wyświetl wydarzenie”.
Krok 3) W tagu skryptu dla Angular JS dodaj następujący kod.
Nie martwmy się o routing, na razie zobaczymy to w kolejnym rozdziale. Zobaczmy teraz tylko kod widoków.
- Ta sekcja kodu oznacza, że gdy użytkownik kliknie tag href „NewEvent”, który został wcześniej zdefiniowany w znaczniku div. Przejdzie do strony internetowej add_event.html i pobierze stamtąd kod i wstrzyknie go do widoku. Po drugie, aby przetworzyć logikę biznesową dla tego widoku, przejdź do „AddEventController”.
- Ta sekcja kodu oznacza, że gdy użytkownik kliknie tag href „DisplayEvent”, który został wcześniej zdefiniowany w tagu div. Przejdzie do strony internetowej show_event.html, pobierze stamtąd kod i wstrzyknie go do widoku. Po drugie, aby przetworzyć logikę biznesową dla tego widoku, przejdź do „ShowDisplayController”.
- Ta sekcja kodu oznacza, że domyślnym widokiem pokazywanym użytkownikowi jest widok DisplayEvent
Krok 4) Następnie należy dodać kontrolery do przetwarzania logiki biznesowej zarówno dla funkcji „DisplayEvent”, jak i „Add New Event”.
Po prostu dodajemy zmienną wiadomości do każdego obiektu zasięgu dla każdego kontrolera. Ten komunikat zostanie wyświetlony, gdy użytkownikowi zostanie pokazany odpowiedni widok.
Event Registration Guru99 Global Event
Krok 5) Utwórz strony o nazwach add_event.html i show_event.html. Strony powinny być proste, jak pokazano poniżej.
W naszym przypadku strona add_event.html będzie miała tag nagłówka wraz z tekstem „Dodaj nowe zdarzenie” i będzie zawierało wyrażenie wyświetlające komunikat „To jest, aby dodać nowe zdarzenie”.
Podobnie strona show_event.html będzie miała również tag nagłówka, który będzie zawierał tekst „Show Event”, a także wyrażenie komunikatu wyświetlające komunikat „This is to display the Event”.
Wartość zmiennej wiadomości zostanie wstrzyknięta na podstawie kontrolera, który jest dołączony do widoku.
Do każdej strony dodamy zmienną wiadomości, która zostanie wstrzyknięta z każdego odpowiedniego kontrolera.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Na wyjściu możemy zauważyć 2 rzeczy
- Pasek adresu będzie odzwierciedlał bieżący wyświetlany widok. Ponieważ więc domyślnym widokiem jest pokazanie ekranu Show Event, pasek adresu pokazuje adres dla „DisplayEvent”.
- Ta sekcja to Widok, który jest tworzony w locie. Ponieważ domyślnym widokiem jest widok Pokaż wydarzenie, jest on wyświetlany użytkownikowi.
Teraz kliknij link Dodaj nowe wydarzenie na wyświetlonej stronie. Otrzymasz teraz poniższe dane wyjściowe.
Wynik:
- Pasek adresu będzie teraz odzwierciedlał fakt, że bieżący widok to teraz widok „Dodaj nowe wydarzenie”. Zauważ, że nadal będziesz na tej samej stronie aplikacji. Nie zostaniesz przekierowany do nowej strony aplikacji.
- Ta sekcja to Widok i teraz zmieni się, aby pokazać kod HTML dla funkcji „Dodaj nowe zdarzenie”. Więc teraz w tej sekcji tag nagłówka „Dodaj nowe zdarzenie” i tekst „To jest, aby dodać nowe zdarzenie” są wyświetlane użytkownikowi.