AngularJS ng-view példával

By: James Hartman James Hartman
Hours korszerűsített

⚡ Okos összefoglaló

Az AngularJS nézetei lehetővé teszik, hogy az egyik oldal lecserélje a tartalmát ahelyett, hogy elnavigálna onnan, ami azonnali hatást kelt az egyoldalas alkalmazásokban. Az ng-view direktíva jelöli azt a régiót, amelyet minden útvonal a saját sablonjával és vezérlőjével cserél le.

  • 🪟 Egyetlen helykitöltő: Egy ng-view jelöléseket tartalmazó elem, ahová minden útvonalazott sablon be van injektálva, és oldalonként csak egy ilyen elem engedélyezett.
  • 🔗 Útvonal párosítás: Minden útvonal megnevez egy templateUrl-t és egy vezérlőt, összekapcsolva a jelölőnyelvet és a logikát az adott nézetben.
  • 📦 Modulfüggőség: A nézetekhez az angular-route.js szükséges, valamint egy deklarált függőség az ngRoute modultól.
  • 🎯 Alapértelmezett nézet: Az otherwise záradék átirányítja a nem egyező címeket, ami az első betöltéskor megjeleníti a nézetet.
  • 🌐 Szükséges szerver: A sablonokat HTTP-n keresztül töltik le, ezért az oldalt a fájlrendszerből kell kiszolgálni, nem pedig megnyitni.
  • ⚠️ Támogatási állapot: Az AngularJS 2021. december 31-én elérte az élettartama végét, és további biztonsági javításokat nem kap.
További információk

AngularJS ng-view direktíva

Ismert oldalak, mint például Gmail Használja az egyoldalas alkalmazások koncepcióját. Amikor a felhasználó egy másik oldalt kér, az alkalmazás nem navigál el, hanem az új oldal nézetét jeleníti meg a meglévő oldalon belül, így olyan érzést kelt, mintha a felhasználó soha nem is távozott volna. Ugyanez érhető el az AngularJS-ben nézetek és útvonalak használatával.

⚠️ Támogatási közlemény: AngularJS elérve élettartam vége 2021. december 31-én és nem kap további javításokat vagy biztonsági javításokat. Az alábbi direktíva továbbra is pontos a meglévő AngularJS 1.x alkalmazások karbantartása érdekében; a modern szögletes az egyenértékű <router-outlet>.

Mi az a nézet?

A nézet a felhasználónak megjelenített tartalom. Amit a felhasználó látni szeretne, az alkalmazás megfelelő nézete jelenik meg.

Nézetek és útvonalak kombinálása logikai nézetekre osztja az alkalmazást, és mindegyiket egy nézethez köti. ellenőr, ami kezelhetőbbé teszi az alkalmazást.

Tegyük fel, hogy egy rendelési alkalmazásban az ügyfél megtekintheti a rendeléseit és újakat adhat le. Az alábbi ábra bemutatja, hogyan válik belőle egyoldalas alkalmazás.

Mi az a nézet

Két különálló weboldal helyett, az egyik a „Rendelések megtekintése”, a másik az „Új rendelések” számára, AngularJS két nézetet használ ugyanazon az oldalon, két hivatkozáson keresztül elérhető, #show és a #new:

  • Navigálás ide: MyApp/#show megjeleníti a Rendelések megtekintése nézetet az oldal elhagyása nélkül. Csak a meglévő oldal adott része frissül.
  • Navigálás ide: MyApp/#new ugyanezt teszi az Új megrendelések nézettel is.

Az alkalmazás nézetekké történő ilyen módon történő szétválasztása kezelhetővé és könnyen módosíthatóvá teszi azt, és minden nézethez tartozik egy megfelelő vezérlő, amely az adott funkció üzleti logikáját tartalmazza.

ng-view irányelv az AngularJS-ben

Az ngView Irányelv kiegészíti a $route szolgáltatást úgy, hogy az aktuális útvonal renderelt sablonját beilleszti a fő elrendezési fájlba, általában index.html.

Minden alkalommal, amikor az aktuális útvonal megváltozik, a benne foglalt nézet is vele együtt változik a $route konfiguráció, anélkül, hogy maga az oldal újratöltődne. útvonalak külön tárgyaljuk; itt a hangsúly a több nézet hozzáadásán van.

Az alábbi folyamatábra bemutatja a teljes folyamatot, amelyet a példa lépésről lépésre végigvezet.

ng-view irányelv az AngularJS-ben

Az ng-view megvalósítása az AngularJS-ben

Ez a példa két lehetőséget kínál a felhasználónak: esemény megjelenítése és esemény hozzáadása. Esemény hozzáadása az Esemény hozzáadása nézetet jeleníti meg, és ugyanez vonatkozik az Esemény megjelenítése lehetőségre is.

Step 1) Az angular-route fájlt szkriptreferenciaként kell megadni. Ez a fájl több útvonal és nézet használatához szükséges, és az AngularJS webhelyéről érhető el.

Az angular-route fájl beillesztése

Step 2) Add hozzá a href és a div tageket.

  1. Adj hozzá href tageket, amelyek az „Új esemény hozzáadása” és az „Esemény megjelenítése” elemekre mutatnak.
  2. Adj hozzá egy div-et, amely a következőt tartalmazza: ng-view direktíva a nézet régiójának megjelölésére. A megfelelő nézet minden hivatkozásra kattintva befecskendeződik oda.

Href és div címkék hozzáadása

Step 3) Az AngularJS szkriptcímkében add hozzá az útválasztási konfigurációt.

  1. Amikor a felhasználó rákattint a Új esemény link, AngularJS betöltések add_event.html, beilleszti a jelölőkódját a nézetbe, és ezt használja AddEventController az üzleti logika számára.
  2. Amikor a felhasználó rákattint a Esemény megjelenítése link, betöltődik show_event.html és felhasznál ShowDisplayController.
  3. Az otherwise A záradék beállítja a felhasználó számára alapértelmezetten megjelenített nézetet, amely ebben az esetben a DisplayEvent.

Útvonaltervezési konfiguráció

Step 4) Adjon hozzá vezérlőket mindkét függvény üzleti logikájának feldolgozásához. Mindegyik egyszerűen beállít egy üzenetet a hatókör-objektumán, amely akkor jelenik meg, amikor a megfelelő nézet megjelenik.

Vezérlők hozzáadása

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

⚠️ Három javítás az eredeti hirdetéshez képest. Először is, a linkek olvashatók #!NewEvent perjel nélkül, miközben az útvonalakat a következőképpen deklaráljuk /NewEvent, tehát semmi sem egyezett. Az AngularJS 1.6-tól az alapértelmezett hash előtag a következő: !, ami a helyes címet adja meg #!/NewEvent — egy perjel a felkiáltójel után. Másodszor, ShowDisplayController állítsd be az üzenetet „Ez egy esemény megjelenítése”-re, kihagyva a szót nak nek amit a környező szöveg idéz. Harmadszor, lib/bootstrap.js egy relatív elérési útról lett betöltve, amely sehová sem oldódik fel, és soha nem használatos, ezért eltávolításra került.

KAPCSOLÓDÓ CIKKEK

Step 5) Hozd létre az oldalakat add_event.html és a show_event.htmlMindegyik tartalmaz egy fejlécet és egy kifejezést, amely megjeleníti a vezérlője által befecskendezett üzenetet.

  • add_event.html

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

show_event.html

<h2>Show Event</h2>

{{message}}

Ha a kód sikeresen végrehajtódik, a következő kimenet jelenik meg a böngészőben.

output:

ng-view kimenet

ng-view kimenet

Gyakori ng-view hibák és javításuk

Az ng-view hibáinak szinte mindegyike a modul bekötéséből, a címformátumból vagy az oldal kiszolgálásának módjából ered, nem pedig magából az utasításból.

  • A nézeti terület üres marad: a ngRoute a modul nem szerepelt függőségként, vagy angular-route.js nem lett betöltve. Mindkettő szükséges, és a szkriptnek a következő után kell következnie: angular.min.js.
  • A linkek megváltoztatják a címet, de semmi sem jelenik meg: A href nem egyezik az útvonallal. Az AngularJS 1.6-ban a címnek szüksége van rá. #!/Route; régebbi, 1.5-ös verzióra írt kódot használtak #/Route.
  • A sablonok betöltése CORS hibával nem sikerül: az oldalt közvetlenül a lemezről nyitották meg. HTTP-n keresztül szolgáltassák ki, mert templateUrl egy AJAX kérés kéri le a fájlprotokoll blokkjait.
  • Csak az utolsó nézet jelenik meg: egynél több elem hordoz ng-view-t. Az AngularJS egyetlen nézetterületet kezel oldalonként.
  • Első betöltéskor semmi sem látszik: nem otherwise záradék úgy van konfigurálva, hogy egy üres cím nem illeszkedik egyetlen útvonalra sem.

GYIK

Nem. Az ngRoute oldalonként egyetlen nézeti régiót támogat. Több elnevezett régió egyidejű megtekintéséhez használja az ui-router könyvtárat, amely ui-view nézetet biztosít, és támogatja a beágyazott és testvér nézeteket.

HTML5 mód engedélyezése a következővel: $locationProvider.html5Mode(true) és adj hozzá egy alap címkét. A szervernek ezután át kell írnia az ismeretlen elérési utakat az index.html fájlba, különben a frissítés 404-es hibát ad vissza.

Nagymértékben. AI Az eszközök útvonaltáblázatokat konvertálnak Angular Routes tömbökké, és az ng-view-t router-outlet-re cserélik. A vezérlőket továbbra is kézzel kell átírni komponensként.

A mesterséges intelligencia asszisztensei gyorsan ellenőrzik a három szokásos gyanús tényezőt: hiányzó ngRoute függőséget, az útvonallal nem egyező hash előtagot és a böngésző által nem lekérhető sablonútvonalat.

Igen. Adjon hozzá egy resolve blokkot az útvonalhoz. Az AngularJS megvárja, amíg ezek az ígéretek lezajlanak, mielőtt példányosítja a vezérlőt, így elkerülhető, hogy a nézet üresen villogjon, miközben az adatok megérkeznek.

Foglald össze ezt a bejegyzést a következőképpen: