AngularJS ng-view s příkladem

Od: James Hartman James Hartman
Hours aktualizováno

⚡ Chytré shrnutí

Zobrazení (views) v AngularJS umožňuje jedné stránce měnit obsah, místo aby se z ní odpojovala, což dává jednostránkové aplikaci okamžitý pocit. Direktiva ng-view označuje oblast, kterou každá trasa nahrazuje, vlastní šablonou a kontrolerem.

  • 🪟 Jeden zástupný symbol: Jeden element nesoucí ng-view označuje, kam je vložena každá směrovaná šablona, ​​a na stránku je povolen pouze jeden takový element.
  • 🔗 Párování tras: Každá trasa pojmenovává templateUrl a kontroler, čímž pro daný pohled propojí značky a logiku.
  • ???? Závislost modulu: Zobrazení vyžadují angular-route.js a deklarovanou závislost na modulu ngRoute.
  • 🎯 Výchozí zobrazení: Klauzule otherwise přesměruje jakoukoli neshodnou adresu, což vykreslí zobrazení při prvním načtení.
  • 🌐 Potřebný server: Šablony se načítají přes HTTP, takže stránka musí být zobrazována, nikoli otevírána ze souborového systému.
  • ⚠️ Stav podpory: Podpora AngularJS skončila 31. prosince 2021 a neobdrží žádné další bezpečnostní záplaty.
Přečíst více

Direktiva ng-view v AngularJS

Známé stránky jako např. Gmail Použijte koncept jednostránkových aplikací. Když uživatel požádá o zobrazení jiné stránky, aplikace neodchází; zobrazí pohled nové stránky uvnitř stávající stránky, takže se zdá, jako by uživatel nikdy neodešel. Tohotéž je v AngularJS dosaženo pomocí pohledů spolu s trasami.

⚠️ Oznámení podpory: AngularJS dosaženo konec životnosti k 31. prosinci 2021 a neobdrží žádné další záplaty ani bezpečnostní opravy. Níže uvedená směrnice zůstává platná pro údržbu stávajících aplikací AngularJS 1.x; v moderních ANGULAR ekvivalent je <router-outlet>.

Co je pohled?

Pohled je obsah zobrazený uživateli. Ať už chce uživatel vidět cokoli, zobrazí se mu odpovídající pohled aplikace.

Kombinace pohledů a tras rozděluje aplikaci na logické pohledy a každý z nich je vázán na kontrolor, což usnadňuje správu aplikace.

Představte si objednávkovou aplikaci, ve které si zákazník může prohlížet objednávky a zadávat nové. Následující diagram ukazuje, jak se z ní stane jednostránková aplikace.

Co je Pohled

Místo dvou samostatných webových stránek, jedné pro „Zobrazení objednávek“ a druhé pro „Nové objednávky“, AngularJS používá dva pohledy na stejné stránce, ke kterým se dostanete prostřednictvím dvou referenčních odkazů, #show a #new:

  • Navigace do MyApp/#show zobrazí zobrazení Zobrazit objednávky bez opuštění stránky. Aktualizuje se pouze daná část existující stránky.
  • Navigace do MyApp/#new totéž platí pro zobrazení Nové objednávky.

Rozdělení aplikace do zobrazení tímto způsobem umožňuje její správu a snadné změny a každé zobrazení má odpovídající kontroler, který obsahuje obchodní logiku pro danou funkci.

Směrnice ng-view v AngularJS

Jedno ngView Směrnice doplňuje $route služba zahrnutím vykreslené šablony aktuální trasy do hlavního souboru rozvržení, obvykle index.html.

Pokaždé, když se aktuální trasa změní, změní se s ní i zobrazený pohled v souladu s $route konfigurace, aniž by se samotná stránka znovu načítala. trasy jsou popsány samostatně; zde se zaměřujeme na přidání více pohledů.

Níže uvedený vývojový diagram znázorňuje celý proces, kterým následně krok za krokem prochází příklad.

Směrnice ng-view v AngularJS

Jak implementovat ng-view v AngularJS

Tento příklad nabízí uživateli dvě možnosti: zobrazit událost a přidat událost. Kliknutím na Přidat událost zobrazuje zobrazení Přidat událost a totéž platí pro zobrazení události.

Krok 1) Jako referenci skriptu zahrňte soubor angular-route. Tento soubor je vyžadován pro použití více tras a zobrazení a je k dispozici na stránkách AngularJS.

Zahrnout soubor angular-route

Krok 2) Přidejte tagy href a div.

  1. Přidejte tagy href odkazující na „Přidat novou událost“ a „Zobrazit událost“.
  2. Přidejte div nesoucí ng-view direktiva pro označení oblasti zobrazení. Odpovídající zobrazení se tam vloží vždy, když se klikne na kterýkoli z odkazů.

Přidejte tagy href a div

Krok 3) Do tagu skriptu AngularJS přidejte konfiguraci směrování.

  1. Když uživatel klikne na Nová událost odkaz, načtení AngularJS add_event.html, vloží své značky do zobrazení a použije AddEventController pro obchodní logiku.
  2. Když uživatel klikne na DisplayEvent odkaz, načte se show_event.html a použití ShowDisplayController.
  3. Jedno otherwise Klauzule nastavuje výchozí zobrazení zobrazené uživateli, což je zde DisplayEvent.

Konfigurace směrování

Krok 4) Přidejte kontrolery pro zpracování obchodní logiky pro obě funkce. Každý z nich jednoduše nastaví zprávu na svém objektu rozsahu, která se zobrazí při zobrazení odpovídajícího pohledu.

Přidat řadiče

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

⚠️ Tři opravy původního inzerátu. Nejprve odkazy zní #!NewEvent bez lomítka, zatímco trasy jsou deklarovány jako /NewEvent, takže se nic neshodovalo. Od AngularJS 1.6 je výchozí prefix hash !, což vytváří správnou adresu #!/NewEvent — lomítko za vykřičníkem. Za druhé, ShowDisplayController nastavit zprávu na „Toto je zobrazení události“, chybí slovo na že okolní text cituje. Za třetí, lib/bootstrap.js byl načten z relativní cesty, která nikam nevede a nikdy se nepoužívá, takže byl odstraněn.

SOUVISEJÍCÍ ČLÁNKY

Krok 5) Vytvořte stránky add_event.html a show_event.htmlKaždý z nich obsahuje hlavičku a výraz, který zobrazuje zprávu vloženou jeho kontrolerem.

  • add_event.html

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

show_event.html

<h2>Show Event</h2>

{{message}}

Pokud je kód úspěšně spuštěn, zobrazí se v prohlížeči následující výstup.

Výstup:

výstup ng-view

výstup ng-view

Časté chyby ng-view a jak je opravit

Téměř každé selhání ng-view pochází spíše ze zapojení modulu, formátu adresy nebo způsobu, jakým je stránka obsluhována, než ze samotné direktivy.

  • Oblast zobrazení zůstane prázdná: ο ngRoute modul nebyl uveden jako závislost, nebo angular-route.js nebyl načten. Oba jsou povinné a skript musí následovat za nimi. angular.min.js.
  • Odkazy mění adresu, ale nic se nezobrazuje: href neodpovídá trase. Z AngularJS 1.6 adresa potřebuje #!/Routepoužit starší kód napsaný pro verzi 1.5 #/Route.
  • Šablony se nezdaří načíst s chybou CORS: Stránka byla otevřena přímo z disku. Zobrazte ji přes HTTP, protože templateUrl je načten požadavkem AJAX, bloky protokolu souboru.
  • Zobrazí se vždy pouze poslední pohled: více než jeden element nese ng-view. AngularJS respektuje jednu oblast zobrazení na stránku.
  • Při prvním načtení se nic nezobrazí: Ne otherwise Klauzule je nakonfigurována tak, že prázdná adresa neodpovídá žádné trase.

Nejčastější dotazy

Ne. ngRoute podporuje jednu oblast zobrazení na stránku. Pro několik pojmenovaných oblastí najednou použijte knihovnu ui-router, která poskytuje ui-view a podporuje vnořené a sourozenecké zobrazení.

Povolit režim HTML5 pomocí $locationProvider.html5Mode(true) a přidat základní tag. Server pak musí přepsat neznámé cesty do souboru index.html, jinak aktualizace vrátí chybu 404.

Převážně. AI Nástroje převádějí směrovací tabulky do polí Angular Routes a zaměňují ng-view za router-outlet. Kontrolery je stále nutné přepisovat ručně jako komponenty.

Asistenti umělé inteligence rychle kontrolují tři obvyklé podezřelé: chybějící závislost ngRoute, prefix hash, který neodpovídá trase, a cestu k šabloně, kterou prohlížeč nemůže načíst.

Ano. Přidat resolve blok k trase. AngularJS čeká na usazení těchto promise před vytvořením instance kontroleru, což zabraňuje tomu, aby se zobrazení během příchodu dat zobrazovalo jako prázdné.

Shrňte tento příspěvek takto: