AngularJS ng-view z przykładem: Jak zaimplementować widok

Obecnie każdy słyszałby o „Single Page Applications”. Wiele znanych stron internetowych, takich jak Gmail, używa koncepcji Single Page Applications (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 obrębie samej istniejącej strony.

Daje to użytkownikowi poczucie, że nigdy nie opuścił strony. To samo można osiągnąć w Angularze za pomocą widoków w połączeniu z trasami.

W tym samouczku dowiesz się:

• Co to jest widok?
• Dyrektywa ng-view w AngularJS
• Jak zaimplementować ng-view w AngularJS z przykładem

Co to jest widok?

Widok to treść pokazywana użytkownikowi. Zasadniczo to, co użytkownik chce zobaczyć, odpowiednio ten widok aplikacji zostanie mu pokazany.

Kombinacja widoków i tras pomaga podzielić aplikację na logiczne widoki i powiązać różne widoki z kontrolerami.

Podzielenie aplikacji na różne widoki i użycie Routingu do załadowania różnych części aplikacji pomaga w logicznym podzieleniu aplikacji i ułatwieniu zarządzania nią.

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 późniejsze wyjaśnienia pokazują, jak utworzyć tę aplikację jako aplikację jednostronicową.

Teraz zamiast mieć dwie różne strony internetowe, jedną dla „Wyświetl zamówienia” i drugą dla „Nowych zamówień”, w angularjszamiast tego możesz utworzyć 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 nazwie #show i #new.

• Zatem gdy aplikacja przejdzie do MyApp/#show, wyświetli widok Wyświetl zamówienia, jednocześnie nie opuści strony. Spowoduje to po prostu odświeżenie sekcji istniejącej strony z informacją „Wyświetl zamówienia”. To samo dotyczy widoku „Nowe zamówienia”.

W ten sposób po prostu łatwiej jest podzielić aplikację na różne widoki, aby ułatwić zarządzanie nią i wprowadzanie zmian w razie potrzeby.

Każdy widok będzie miał odpowiedni kontroler do kontrolowania logiki biznesowej dla tej funkcjonalności.

Dyrektywa ng-view w AngularJS

„ngView” to dyrektywa, która uzupełnia usługę $route, włączając wyrenderowany szablon bieżącej trasy do głównego pliku układu (index.html).

Za każdym razem, gdy zmienia się aktualna trasa, widok uwzględnia jej zmiany zgodnie z konfiguracją usługi $route bez zmiany samej strony.

Będziemy zakrywać trasy w następnym rozdziale skupimy się na dodawaniu wielu widoków do naszej aplikacji.

Poniżej znajduje się cały schemat działania całego procesu. Omówimy szczegółowo każdy proces w naszym przykładzie pokazanym poniżej.

Jak zaimplementować widok ng w AngularJS

Przyjrzyjmy się przykładowi, jak możemy zaimplementować ng-view w AngularJS. W naszym przykładzie zaprezentujemy użytkownikowi dwie możliwości,

• Jednym z nich jest wyświetlenie „wydarzenia”, a drugim dodanie „wydarzenia”.
• Kiedy użytkownik kliknie link Dodaj wydarzenie, wyświetli się widok „Dodaj wydarzenie” i to samo dotyczy „Wyświetl wydarzenie”.

Aby zastosować ten przykład, wykonaj poniższe czynności.

Krok 1) Dołącz plik angular-route jako odniesienie do skryptu.

Ten plik trasy jest niezbędny, aby móc korzystać z funkcji posiadania wielu tras i widoków. Plik ten można pobrać ze strony internetowej angularJS.

Krok 2) Dodaj tagi href i tag div.

W tym etapie,

1. Dodaj tagi href, które będą reprezentować linki do „Dodawanie nowego wydarzenia” i „Wyświetlanie wydarzenia”.
2. Dodaj także znacznik div z dyrektywą ng-view, która będzie reprezentować widok. Umożliwi to wstrzyknięcie odpowiedniego widoku za każdym razem, gdy użytkownik kliknie link „Dodaj nowe wydarzenie” lub „Link do wyświetlenia wydarzenia”.

Krok 3) W znaczniku skryptu dla Angular JS dodaj następujący kod.

Nie martwmy się teraz o routing, zobaczymy to w następnym rozdziale. Zobaczmy teraz tylko kod widoków.

1. Ta sekcja kodu oznacza, że ​​gdy użytkownik kliknie tag href „NewEvent”, który został wcześniej zdefiniowany w tagu div. Przejdzie do strony add_event.html, pobierze stamtąd kod i wstrzyknie go do widoku. Po drugie, aby przetworzyć logikę biznesową dla tego widoku, przejdź do „AddEventController”.
2. Ta sekcja kodu oznacza, że ​​gdy użytkownik kliknie tag href „DisplayEvent”, który został wcześniej zdefiniowany w tagu div. Przejdzie do strony show_event.html, pobierze stamtąd kod i wstrzyknie go do widoku. Po drugie, aby przetworzyć logikę biznesową dla tego widoku, przejdź do „ShowDisplayController”.
3. Ta sekcja kodu oznacza, że ​​domyślnym widokiem pokazywanym użytkownikowi jest widok DisplayEvent

   

Krok 4) Dodaj kontrolery, aby przetwarzać logikę biznesową.

Następnym krokiem jest dodanie kontrolerów do przetwarzania logiki biznesowej zarówno dla funkcjonalności „DisplayEvent”, jak i „Dodaj nowe wydarzenie”.

Po prostu dodajemy zmienną wiadomości do każdego obiektu zakresu dla każdego kontrolera. Ta wiadomość zostanie wyświetlona, ​​gdy użytkownikowi zostanie wyświetlony odpowiedni widok.

<!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>

Krok 5) Utwórz strony o nazwach add_event.html i show_event.html

Następnie utwórz strony o nazwach add_event.html i show_event.html. Staraj się, aby strony były proste, jak pokazano poniżej.

W naszym przypadku strona add_event.html będzie posiadać znacznik nagłówka wraz z tekstem „Dodaj nowe wydarzenie” oraz wyrażenie wyświetlające komunikat „To ma dodać nowe wydarzenie”.

Podobnie strona show_event.html będzie również zawierać znacznik nagłówka, w którym będzie przechowywany tekst „Pokaż wydarzenie”, a także wyrażenie komunikatu wyświetlające komunikat „To ma wyświetlić wydarzenie”.

Wartość zmiennej komunikatu zostanie wstrzyknięta na podstawie kontrolera dołączonego do widoku.

Do każdej strony dodamy zmienną komunikatu, która zostanie wstrzyknięta z każdego odpowiedniego kontrolera.

• add_event.html

<h2>Add New Event</h2>

{{message}}

• show_event.html

<h2>Show Event</h2>
	
{{message}}

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Na podstawie wyników możemy zauważyć 2 rzeczy

1. Pasek adresu będzie odzwierciedlał aktualnie wyświetlany widok. Ponieważ domyślnym widokiem jest wyświetlanie ekranu Show Event, pasek adresu pokazuje adres dla „DisplayEvent”.
2. Ta sekcja to Widok, który jest tworzony w locie. Ponieważ domyślnym widokiem jest Show Event, to on jest wyświetlany użytkownikowi.

Teraz kliknij na link Dodaj nowe wydarzenie na wyświetlonej stronie. Otrzymasz teraz poniższy wynik.

Wyjście:

1. Pasek adresu będzie teraz informował, że bieżącym widokiem jest teraz widok „Dodaj nowe wydarzenie”. Zauważ, że nadal będziesz na tej samej stronie aplikacji. Nie zostaniesz przekierowany na nową stronę aplikacji.
2. Ta sekcja to Widok i teraz zmieni się, aby pokazać HTML dla funkcjonalności „Dodaj nowe wydarzenie”. Teraz w tej sekcji użytkownikowi wyświetlany jest tag nagłówka „Dodaj nowe wydarzenie” i tekst „To jest dodanie nowego wydarzenia”.