Widok AngularJS z przykładem

Przez: Jamesa Hartmana Jamesa Hartmana
Hours Zaktualizowano

⚡ Inteligentne podsumowanie

Widoki w AngularJS pozwalają na podmianę zawartości jednej strony zamiast nawigowania po niej, co sprawia, że ​​aplikacja jednostronicowa wydaje się natychmiastowa. Dyrektywa ng-view oznacza obszar, który każda trasa zastępuje własnym szablonem i kontrolerem.

  • 🪟 Pojedynczy symbol zastępczy: Jeden element zawierający znacznik ng-view oznacza miejsce, w którym wstrzykiwany jest każdy szablon routingu, a na stronie dozwolony jest tylko jeden taki element.
  • 🔗 Parowanie tras: Każda trasa nadaje nazwę templateUrl i kontrolerowi, wiążąc znaczniki i logikę dla danego widoku.
  • 📦 Zależność modułu: Widoki wymagają angular-route.js oraz zadeklarowanej zależności od modułu ngRoute.
  • 🎯 Widok domyślny: Klauzula otherwise przekierowuje każdy niedopasowany adres, co powoduje wyświetlenie widoku przy pierwszym załadowaniu.
  • 🌐 Potrzebny serwer: Szablony są pobierane przez protokół HTTP, więc strona musi zostać dostarczona, a nie otwarta z systemu plików.
  • ⚠️ Status wsparcia: Wsparcie dla AngularJS zakończyło się 31 grudnia 2021 r. i nie będą już do niego dodawane żadne poprawki zabezpieczeń.
Czytaj więcej

Dyrektywa AngularJS ng-view

Znane witryny takie jak Gmail Wykorzystują koncepcję aplikacji jednostronicowych (Single Page Applications). Gdy użytkownik żąda innej strony, aplikacja nie opuszcza jej; wyświetla widok nowej strony wewnątrz istniejącej, dzięki czemu użytkownik ma wrażenie, że nigdy jej nie opuścił. To samo można osiągnąć w AngularJS, używając widoków wraz ze ścieżkami.

⚠️ Uwaga dotycząca wsparcia: Osiągnięto AngularJS koniec życia 31 grudnia 2021 r. i nie otrzymuje żadnych dalszych poprawek ani zabezpieczeń. Poniższa dyrektywa pozostaje aktualna w przypadku utrzymania istniejących aplikacji AngularJS 1.x; w nowoczesnych Angular odpowiednik to <router-outlet>.

Co to jest widok?

Widok to treść wyświetlana użytkownikowi. Niezależnie od tego, co użytkownik chce zobaczyć, wyświetlany jest odpowiedni widok aplikacji.

Łączenie widoków i tras dzieli aplikację na logiczne widoki i łączy każdy z nich z kontroler, co sprawia, że ​​aplikacja staje się bardziej łatwa 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 pokazuje, jak przekształca się ona w aplikację jednostronicową.

Co to jest widok

Zamiast dwóch oddzielnych stron internetowych, jednej do „Wyświetlania zamówień” i drugiej do „Nowych zamówień”, angularjs wykorzystuje dwa widoki na tej samej stronie, do których można dotrzeć za pośrednictwem dwóch linków referencyjnych, #show oraz #new:

  • Nawigacja do MyApp/#show Wyświetla widok „Zobacz zamówienia” bez opuszczania strony. Odświeżana jest tylko ta sekcja istniejącej strony.
  • Nawigacja do MyApp/#new robi to samo dla widoku Nowe zamówienia.

Podzielenie aplikacji na widoki w ten sposób sprawia, że ​​jest ona łatwiejsza w zarządzaniu i można ją łatwo zmieniać, a każdemu widokowi odpowiada kontroler przechowujący logikę biznesową dla tej funkcji.

Dyrektywa ng-view w AngularJS

ngView Dyrektywy uzupełnia $route usługa poprzez dołączenie renderowanego szablonu bieżącej trasy do głównego pliku układu, zwykle index.html.

Za każdym razem, gdy zmienia się bieżąca trasa, zmienia się również dołączony widok zgodnie z nią. $route konfigurację, bez konieczności przeładowywania strony. trasy są omówione osobno; tutaj skupiamy się na dodawaniu wielu widoków.

Poniższy schemat blokowy przedstawia cały proces, który przykład pokazuje krok po kroku.

Dyrektywa ng-view w AngularJS

Jak zaimplementować widok ng w AngularJS

W tym przykładzie użytkownik ma do wyboru dwie opcje: wyświetlenie zdarzenia i dodanie zdarzenia. Kliknięcie Dodaj wydarzenie pokazuje widok Dodaj zdarzenie, to samo dotyczy widoku Wyświetl zdarzenie.

Krok 1) Dołącz plik angular-route jako odniesienie do skryptu. Ten plik jest wymagany do korzystania z wielu tras i widoków i jest dostępny w witrynie AngularJS.

Dołącz plik angular-route

Krok 2) Dodaj znaczniki href i znaczniki div.

  1. Dodaj tagi href łączące się z „Dodaj nowe wydarzenie” i „Wyświetl wydarzenie”.
  2. Dodaj div zawierający ng-view Dyrektywa oznaczająca region widoku. Pasujący widok jest tam wstrzykiwany po kliknięciu któregokolwiek z linków.

Dodaj tagi href i tagi div

Krok 3) W znaczniku skryptu AngularJS dodaj konfigurację routingu.

  1. Gdy użytkownik kliknie NoweWydarzenie link, ładowanie AngularJS add_event.html, wstrzykuje swoje znaczniki do widoku i używa AddEventController dla logiki biznesowej.
  2. Gdy użytkownik kliknie Wyświetl zdarzenie link, ładuje się show_event.html i wykorzystuje ShowDisplayController.
  3. otherwise Klauzula ustawia domyślny widok wyświetlany użytkownikowi, w tym przypadku jest to DisplayEvent.

Konfiguracja routingu

Krok 4) Dodaj kontrolery, aby przetwarzać logikę biznesową dla obu funkcji. Każdy z nich po prostu ustawia komunikat w swoim obiekcie zakresu, wyświetlany po wyświetleniu odpowiedniego widoku.

Dodaj kontrolery

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.8.3/angular-route.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 to display an Event";
    });
</script>

</body>
</html>

⚠️ Trzy poprawki do pierwotnego wpisu. Po pierwsze, linki czytają #!NewEvent bez ukośnika, gdy trasy są deklarowane jako /NewEvent, więc nic nie pasowało. Od AngularJS 1.6 domyślnym prefiksem hash jest !, co daje poprawny adres #!/NewEvent — ukośnik po wykrzykniku. Po drugie, ShowDisplayController ustaw wiadomość na „To jest wyświetlenie zdarzenia”, pomijając słowo do że cytuje otaczający tekst. Po trzecie, lib/bootstrap.js został załadowany ze ścieżki względnej, która nie prowadzi do żadnego miejsca i nigdy nie jest używana, więc została usunięta.

POWIĄZANE ARTYKUŁY

Krok 5) Utwórz strony add_event.html oraz show_event.htmlKażdy z nich zawiera nagłówek i wyrażenie wyświetlające wiadomość wstrzykiwaną przez jego kontroler.

  • add_event.html

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

show_event.html

<h2>Show Event</h2>

{{message}}

Jeśli kod zostanie wykonany prawidłowo, w przeglądarce zostanie wyświetlony poniższy komunikat.

Wyjście:

wyjście ng-view

wyjście ng-view

Typowe błędy ng-view i jak je naprawić

Prawie wszystkie błędy ng-view wynikają z okablowania modułu, formatu adresu lub sposobu wyświetlania strony, a nie z samej dyrektywy.

  • Obszar widoku pozostaje pusty: dotychczasowy ngRoute moduł nie został wymieniony jako zależność lub angular-route.js nie został załadowany. Oba są wymagane, a skrypt musi być umieszczony po angular.min.js.
  • Linki zmieniają adres, ale nic nie wyświetla: Href nie pasuje do trasy. Od AngularJS 1.6 adres wymaga #!/Route; starszy kod napisany dla wersji 1.5 używany #/Route.
  • Szablony nie ładują się z powodu błędu CORS: Strona została otwarta bezpośrednio z dysku. Podaj ją przez HTTP, ponieważ templateUrl jest pobierany przez żądanie AJAX, bloki protokołu pliku.
  • Wyświetla się tylko ostatni widok: Więcej niż jeden element zawiera ng-view. AngularJS honoruje pojedynczy region widoku na stronę.
  • Przy pierwszym załadowaniu nic się nie wyświetla: Nie otherwise klauzula jest skonfigurowana, więc pusty adres nie pasuje do żadnej trasy.

FAQ

Nie. ngRoute obsługuje pojedynczy region widoku na stronę. W przypadku kilku nazwanych regionów jednocześnie należy użyć biblioteki ui-router, która udostępnia interfejs ui-view i obsługuje widoki zagnieżdżone i siostrzane.

Włącz tryb HTML5 za pomocą $locationProvider.html5Mode(true) i dodać tag bazowy. Serwer musi następnie przepisać nieznane ścieżki do pliku index.html, w przeciwnym razie odświeżenie zwróci błąd 404.

W dużej mierze. AI Narzędzia konwertują tabele tras na tablice Angular Routes i zamieniają ng-view na router-outlet. Kontrolery nadal muszą być ręcznie przepisywane jako komponenty.

Asystenci AI szybko sprawdzają trzy typowe podejrzane elementy: brakującą zależność ngRoute, prefiks skrótu, który nie pasuje do trasy, i ścieżkę szablonu, której przeglądarka nie może pobrać.

Tak. Dodaj resolve blok do trasy. AngularJS czeka na spełnienie obietnic przed utworzeniem instancji kontrolera, co zapobiega miganiu pustego widoku podczas napływu danych.

Podsumuj ten post następująco: