AngularJS ng-vaade koos näitega

Autor: James Hartman James Hartman
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

AngularJS-i vaated võimaldavad ühel lehel sisu vahetada, selle asemel et lahkuda, mis muudab ühelehelise rakenduse koheseks. ng-view direktiiv märgib piirkonda, mille iga marsruut oma malli ja kontrolleriga asendab.

  • 🪟 Üksik kohatäide: Üks element, mis kannab ng-view märke, kuhu süstitakse iga marsruutitud mall, ja lehe kohta on lubatud ainult üks selline element.
  • 🔗 Marsruudi sidumine: Iga marsruut nimetab malli URL-i ja kontrolleri, sidudes selle vaate jaoks märgistuse ja loogika kokku.
  • 📦 Mooduli sõltuvus: Vaated nõuavad angular-route.js ja deklareeritud sõltuvust ngRoute moodulist.
  • 🎯 Vaikevaade: „Otherwise“ klausel suunab ümber kõik sobimatud aadressid, mis renderdab vaate esimesel laadimisel.
  • 🌐 Vajalik server: Mallid laaditakse HTTP kaudu, seega tuleb leht failisüsteemist avamise asemel kätte toimetada.
  • ⚠️ Toe staatus: AngularJS-i eluiga lõppes 31. detsembril 2021 ja sellele ei tehta enam turvaparandusi.
Loe rohkem

AngularJS ng-view direktiiv

Tuntud saidid, näiteks Gmail Kasutage üheleheliste rakenduste kontseptsiooni. Kui kasutaja taotleb teistsugust lehte, siis rakendus ei navigeeri sealt ära; see kuvab uue lehe vaadet olemasoleva lehe sees, nii et tundub, nagu poleks kasutaja kunagi lahkunud. Sama saavutatakse AngularJS-is vaadete ja marsruutide abil.

⚠️ Tugiteade: AngularJS jõudis eluea lõpp 31. detsembril 2021 ja ei saa edasisi parandusi ega turvaparandusi. Allolev direktiiv jääb olemasolevate AngularJS 1.x rakenduste säilitamiseks täpseks; tänapäevastes nurgeline samaväärne on <router-outlet>.

Mis on vaade?

Vaade on kasutajale kuvatav sisu. Mida iganes kasutaja näha soovib, kuvatakse rakenduse vastav vaade.

Vaadete ja marsruutide kombineerimine jagab rakenduse loogilisteks vaadeteks ja seob iga vaate omavahel. kontroller, mis muudab rakenduse hallatavamaks.

Oletame tellimisrakendust, milles klient saab tellimusi vaadata ja uusi esitada. Allolev diagramm näitab, kuidas sellest saab üheleheline rakendus.

Mis on vaade

Kahe eraldi veebilehe asemel, üks „Tellimuste vaatamine” ja teine ​​„Uued tellimused”, AngularJS kasutab samal lehel kahte vaadet, millele pääseb ligi kahe viitelingi kaudu, #show ja #new:

  • Navigeerimine asukohta MyApp/#show kuvab tellimuste vaatamise vaate lehelt lahkumata. Värskeneb ainult see osa olemasolevast lehest.
  • Navigeerimine asukohta MyApp/#new teeb sama ka uute tellimuste vaate puhul.

Rakenduse selline vaadeteks jagamine hoiab selle hallatavana ja lihtsalt muudetavana ning igal vaatel on vastav kontroller, mis hoiab selle funktsiooni äriloogikat.

ng-view direktiiv AngularJS-is

. ngView Direktiivi täiendab $route teenus, lisades praeguse marsruudi renderdatud malli peamise paigutusfaili, tavaliselt index.html.

Iga kord, kui praegune marsruut muutub, muutub kaasatud vaade vastavalt marsruudile. $route konfiguratsioon ilma lehte ennast uuesti laadimata. Routes käsitletakse eraldi; siin keskendutakse mitme vaate lisamisele.

Allolev vooskeem näitab kogu protsessi, mida näites samm-sammult läbitakse.

ng-view direktiiv AngularJS-is

Kuidas ng-vaadet AngularJS-is rakendada

See näide pakub kasutajale kahte võimalust: sündmuse kuvamine ja sündmuse lisamine. Klõpsamine Lisa sündmus kuvab vaate „Lisa sündmus” ja sama kehtib ka vaate „Kuva sündmus” kohta.

Step 1) Lisage skriptiviitena angular-route fail. See fail on vajalik mitme marsruudi ja vaate kasutamiseks ning on saadaval AngularJS saidilt.

Lisage nurkmarsruudi fail

Step 2) Lisa href-sildid ja div-sildid.

  1. Lisa href sildid, mis viitavad „Lisa uus sündmus“ ja „Kuva sündmus“.
  2. Lisa div, mis kannab ng-view direktiiv vaatepiirkonna märkimiseks. Vastav vaade süstitakse sinna iga kord, kui klõpsatakse kummalgi lingil.

Lisa href-sildid ja div-sildid

Step 3) Lisage AngularJS-i skriptimärgendisse marsruutimise konfiguratsioon.

  1. Kui kasutaja klõpsab nuppu Uus sündmus link, AngularJS laadib add_event.html, lisab oma märgistuse vaatesse ja kasutab AddEventController äriloogika pärast.
  2. Kui kasutaja klõpsab nuppu Kuvatav sündmus link, see laeb show_event.html ja kasutab ShowDisplayController.
  3. . otherwise klausel määrab kasutajale vaikimisi kuvatava vaate, milleks antud juhul on DisplayEvent.

Marsruudi konfiguratsioon

Step 4) Lisage kontrollerid mõlema funktsiooni äriloogika töötlemiseks. Mõlemad lihtsalt määravad oma ulatusobjektile teate, mis kuvatakse vastava vaate kuvamisel.

Lisa kontrollerid

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

⚠️ Kolm parandust algsele kuulutusele. Esiteks, lingid loevad #!NewEvent ilma kaldkriipsuta, samal ajal kui marsruudid on deklareeritud kui /NewEvent, seega ei leitud vastet. AngularJS 1.6-st alates on vaikimisi räsi eesliide !, mis teeb aadressi õigeks #!/NewEvent — kaldkriips pärast hüüumärki. Teiseks, ShowDisplayController määrake sõnumiks „See on sündmuse kuvamine”, jättes sõna välja et mida ümbritsev tekst tsiteerib. Kolmandaks, lib/bootstrap.js laaditi suhtelise teelt, mis ei lahenda kuhugi ja mida kunagi ei kasutata, seega on see eemaldatud.

SEOTUD ARTIKLID

Step 5) Looge lehed add_event.html ja show_event.htmlIgal neist on päis ja avaldis, mis kuvab kontrolleri sisestatud sõnumi.

  • add_event.html

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

show_event.html

<h2>Show Event</h2>

{{message}}

Kui kood edukalt käivitatakse, kuvatakse brauseris järgmine väljund.

Väljund:

ng-vaate väljund

ng-vaate väljund

Levinumad ng-view vead ja kuidas neid parandada

Peaaegu iga ng-view tõrge tuleneb pigem mooduli juhtmestikust, aadressivormingust või lehe serveerimise viisist kui direktiivist endast.

  • Vaateala jääb tühjaks: the,en ngRoute moodulit ei olnud sõltuvusena loetletud või angular-route.js ei laaditud. Mõlemad on nõutavad ja skript peab tulema pärast angular.min.js.
  • Lingid muudavad aadressi, aga midagi ei kuvata: href ei vasta marsruudile. AngularJS 1.6-st alates vajab aadress #!/Route; kasutati vanemat 1.5 jaoks kirjutatud koodi #/Route.
  • Mallid ei laadi CORS-vea tõttu: Leht avati otse kettalt. Serveeri seda HTTP kaudu, sest templateUrl AJAX-päringu abil laaditakse failiprotokolli plokid.
  • Kuvatakse ainult viimane vaade: Rohkem kui üks element kannab ng-view'd. AngularJS toetab ühte vaateala lehe kohta.
  • Esimesel laadimisel ei näita midagi: ei otherwise klausel on konfigureeritud nii, et tühi aadress ei vasta ühelegi marsruudile.

KKK

Ei. ngRoute toetab ühte vaateala lehe kohta. Mitme nimega ala korraga kuvamiseks kasutage teeki ui-router, mis pakub ui-view'd ja toetab pesastatud ja sugulusvaateid.

HTML5 režiimi lubamine $locationProvider.html5Mode(true) ja lisa baasmärgend. Seejärel peab server tundmatud teed index.html-i ümber kirjutama, vastasel juhul tagastab värskendamine veakoodi 404.

Suures osas. AI Tööriistad teisendavad marsruuditabelid Angular Routes'i massiivideks ja vahetavad ng-view ruuteri-väljundi vastu. Kontrollerid tuleb endiselt käsitsi komponentidena ümber kirjutada.

Tehisintellekti assistendid kontrollivad kiiresti kolme tavapärast kahtlusalust: puuduvat ngRoute'i sõltuvust, räsi eesliidet, mis ei vasta marsruudile, ja malliteed, mida brauser ei suuda hankida.

Jah. Lisa resolve plokk marsruudile. AngularJS ootab enne kontrolleri eksemplari loomist nende lubaduste täitmiseni, mis väldib vaate tühjaks vilkumist andmete saabumise ajal.

Võta see postitus kokku järgmiselt: