AngularJS ng-näkymä esimerkillä

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

AngularJS:n näkymät antavat yhden sivun vaihtaa sisältöään pois navigoinnin sijaan, mikä tekee yksisivuisesta sovelluksesta välittömän tuntuisen. ng-view-direktiivi merkitsee alueen, jonka kukin reitti korvaa omalla mallineellaan ja ohjaimellaan.

  • 🪟 Yksittäinen paikkamerkki: Yksi ng-view-merkintöjä sisältävä elementti, johon jokainen reititetty malline injektoidaan, ja vain yksi tällainen elementti sallitaan sivua kohden.
  • 🔗 Reittien yhdistäminen: Jokainen reitti nimeää templateUrl-osoitteen ja ohjaimen, sitoen merkinnät ja logiikan yhteen kyseisessä näkymässä.
  • 📦 Moduulin riippuvuus: Näkymät vaativat angular-route.js:n sekä ilmoitetun riippuvuuden ngRoute-moduulista.
  • 🎯 Oletusnäkymä: Otherwise-lauseke uudelleenohjaa kaikki täsmäämättömät osoitteet, mikä renderöi näkymän ensimmäisen latauksen yhteydessä.
  • 🌐 Tarvittava palvelin: Mallit noudetaan HTTP:n kautta, joten sivu on tarjottava eikä avattava tiedostojärjestelmästä.
  • ⚠️ Tuen tila: AngularJS:n elinkaari päättyi 31. joulukuuta 2021, eikä sille ole enää saatavilla tietoturvapäivityksiä.
Lue lisää

AngularJS ng-view -direktiivi

Tunnettuja sivustoja, kuten Gmail käyttää yhden sivun sovellusten käsitettä. Kun käyttäjä pyytää eri sivua, sovellus ei navigoi pois; se näyttää uuden sivun näkymän olemassa olevan sivun sisällä, joten tuntuu kuin käyttäjä ei olisi koskaan poistunutkaan. Sama saavutetaan AngularJS:ssä käyttämällä näkymiä yhdessä reittien kanssa.

⚠️ Tukitiedote: AngularJS saavutettu käyttöiän päättyessä 31. joulukuuta 2021 eikä saa enää korjauksia tai tietoturvakorjauksia. Alla oleva direktiivi pysyy paikkansa olemassa olevien AngularJS 1.x -sovellusten ylläpidossa; nykyaikaisissa Kulma- vastine on <router-outlet>.

Mikä on näkymä?

Näkymä on käyttäjälle näytettävä sisältö. Mitä tahansa käyttäjä haluaa nähdä, sovelluksen vastaava näkymä näytetään.

Näkymien ja reittien yhdistäminen jakaa sovelluksen loogisiin näkymiin ja sitoo jokaisen omaan ohjain, mikä tekee sovelluksesta hallittavamman.

Oletetaan tilaussovellus, jossa asiakas voi tarkastella tilauksia ja tehdä uusia. Alla oleva kaavio näyttää, kuinka siitä tulee yksisivuinen sovellus.

Mikä on näkymä

Kahden erillisen verkkosivun sijaan, joista toinen on ”Tilausten tarkastelu” ja toinen ”Uudet tilaukset”, angularjs käyttää kahta näkymää samalla sivulla, joihin pääsee kahden viittauslinkin kautta, #show ja #new:

  • Navigointi kohteeseen MyApp/#show näyttää Tilausten tarkastelunäkymän poistumatta sivulta. Vain kyseinen osa olemassa olevasta sivusta päivittyy.
  • Navigointi kohteeseen MyApp/#new tekee saman Uudet tilaukset -näkymälle.

Sovelluksen jakaminen näkymiin tällä tavalla pitää sen hallittavana ja helposti muokattavissa, ja jokaisella näkymällä on vastaava ohjain, joka sisältää kyseisen toiminnon liiketoimintalogiikan.

ng-view-direktiivi AngularJS:ssä

ngView Direktiivi täydentää $route palvelu sisällyttämällä nykyisen reitin renderöidyn mallin pääasettelutiedostoon, normaalisti index.html.

Joka kerta, kun nykyinen reitti muuttuu, sisällytetty näkymä muuttuu sen mukana reitin mukaan. $route kokoonpano ilman, että itse sivu latautuu uudelleen. reitit käsitellään erikseen; tässä keskitytään useiden näkökulmien lisäämiseen.

Alla oleva vuokaavio näyttää koko prosessin, jonka esimerkki sitten käy läpi askel askeleelta.

ng-view-direktiivi AngularJS:ssä

Kuinka ottaa ng-view käyttöön AngularJS:ssä

Tässä esimerkissä käyttäjälle esitetään kaksi vaihtoehtoa: tapahtuman näyttäminen ja tapahtuman lisääminen. Napsauttamalla Lisää tapahtuma näyttää Lisää tapahtuma -näkymän, ja sama koskee Näytä tapahtuma -näkymää.

Vaihe 1) Sisällytä angular-route-tiedosto skriptiviitteenä. Tätä tiedostoa tarvitaan useiden reittien ja näkymien käyttämiseen, ja se on saatavilla AngularJS-sivustolta.

Sisällytä angular-route-tiedosto

Vaihe 2) Lisää href-tagit ja div-tagi.

  1. Lisää href-tagit, jotka linkittävät kohtiin ”Lisää uusi tapahtuma” ja ”Näytä tapahtuma”.
  2. Lisää div-elementti, joka sisältää ng-view direktiivi näkymäalueen merkitsemiseksi. Vastaava näkymä lisätään siihen aina, kun jompaakumpaa linkkiä napsautetaan.

Lisää href- ja div-tunnisteet

Vaihe 3) Lisää reititysasetukset AngularJS-skriptitunnisteeseen.

  1. Kun käyttäjä napsauttaa Uusi tapahtuma linkki, AngularJS lataa add_event.html, lisää merkintönsä näkymään ja käyttää AddEventController liiketoimintalogiikan vuoksi.
  2. Kun käyttäjä napsauttaa Näyttötapahtuma linkki, se latautuu show_event.html ja käyttää ShowDisplayController.
  3. otherwise lauseke asettaa käyttäjälle näytettävän oletusnäkymän, joka tässä tapauksessa on DisplayEvent.

Reitityskonfiguraatio

Vaihe 4) Lisää ohjaimet käsittelemään molempien funktioiden liiketoimintalogiikkaa. Kumpikin yksinkertaisesti asettaa viestin laajuusobjektilleen, joka näytetään, kun vastaava näkymä näytetään.

Lisää ohjaimia

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

⚠️ Kolme korjausta alkuperäiseen ilmoitukseen. Ensin linkit lukevat #!NewEvent ilman kauttaviivaa, kun taas reitit ilmoitetaan seuraavasti /NewEvent, joten mikään ei vastannut tuloksia. AngularJS 1.6:ssa oletusarvoinen hash-etuliite on !, mikä tekee oikeasta osoitteesta #!/NewEvent — kauttaviiva huutomerkin jälkeen. Toiseksi, ShowDisplayController aseta viestiksi ”Tämä on tapahtuman näyttö”, sana puuttuu että jota ympäröivä teksti lainaa. Kolmanneksi, lib/bootstrap.js ladattiin suhteellisesta polusta, joka ei ratkaise mihinkään eikä sitä koskaan käytetä, joten se on poistettu.

AIHEESEEN LIITTYVÄT ARTIKKELIT

Vaihe 5) Luo sivut add_event.html ja show_event.htmlJokainen sisältää otsikon ja lausekkeen, joka näyttää sen ohjaimen injektoiman viestin.

  • add_event.html

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

show_event.html

<h2>Show Event</h2>

{{message}}

Jos koodi suoritetaan onnistuneesti, selaimessa näkyy seuraava tuloste.

lähtö:

ng-view-lähtö

ng-view-lähtö

Yleisiä ng-view-virheitä ja niiden korjaaminen

Lähes jokainen ng-view-virhe johtuu moduulin johdotuksesta, osoitemuodosta tai sivun tarjoilutavasta eikä itse direktiivistä.

  • Katselualue pysyy tyhjänä: Ishayoiden opettaman ngRoute moduulia ei ollut listattu riippuvuutena, tai angular-route.js ei ladattu. Molemmat vaaditaan, ja komentosarjan on tultava sen jälkeen angular.min.js.
  • Linkit vaihtavat osoitetta, mutta mitään ei näy: href ei vastaa reittiä. AngularJS 1.6:ssa osoitteen on oltava #!/Route; käytetty vanhempaa 1.5:lle kirjoitettua koodia #/Route.
  • Mallit eivät lataudu CORS-virheen vuoksi: Sivu avattiin suoraan levyltä. Tarjoile sitä HTTP:n kautta, koska templateUrl noudetaan AJAX-pyynnöllä tiedostoprotokollan lohkoista.
  • Vain viimeisin näkymä tulee näkyviin: useampi kuin yksi elementti sisältää ng-view-ominaisuuden. AngularJS tukee yhtä näkymäaluetta sivua kohden.
  • Ensimmäisellä latauksella ei näy mitään: Nro otherwise lauseke on konfiguroitu, joten tyhjä osoite ei vastaa mitään reittiä.

UKK

Ei. ngRoute tukee yhtä näkymäaluetta sivua kohden. Useiden nimettyjen alueiden samanaikaiseen näyttämiseen käytä ui-router-kirjastoa, joka tarjoaa ui-view-näkymän ja tukee sisäkkäisiä ja sisarusnäkymiä.

Ota HTML5-tila käyttöön $locationProvider.html5Mode(true) ja lisää perustunniste. Palvelimen on sitten kirjoitettava tuntemattomat polut uudelleen index.html-tiedostoon, muuten päivitys palauttaa 404-virheen.

Suurelta osin. AI työkalut muuntavat reititystaulukot Angular Routes -taulukoiksi ja vaihtavat ng-view'n reitittimen pistorasiaan. Ohjaimet on edelleen kirjoitettava uudelleen komponentteina käsin.

Tekoälyavustajat tarkistavat nopeasti kolme tavanomaista epäiltyä asiaa: puuttuvan ngRoute-riippuvuuden, reittiä vastaavan tiiviste-etuliitteen ja selaimen hakeman mallipolun.

Kyllä. Lisää resolve lohko reitille. AngularJS odottaa näiden lupausten täyttymistä ennen ohjaimen instanssin luomista, mikä estää näkymän vilkkumisen tyhjänä datan saapuessa.

Tiivistä tämä viesti seuraavasti: