Nykyään kaikki olisivat kuulleet "yhden sivun sovelluksista". Monet tunnetuista verkkosivustoista, kuten Gmail, käyttävät yksittäisten sivujen sovelluksia (SPA).
SPA: t ovat käsite, jossa kun käyttäjä pyytää toista sivua, sovellus ei siirry tälle sivulle, vaan näyttää uuden sivun näkymän itse olemassa olevalla sivulla.
Se antaa käyttäjälle tunteen, ettei hän koskaan poistunut sivulta. Sama voidaan saavuttaa kulmassa Näkymien avulla yhdessä Reittien kanssa.
Tässä opetusohjelmassa opit-
- Mikä on näkymä?
- ng-view-direktiivi AngularJS: ssä
- ng-view-esimerkki
Mikä on näkymä?
Näkymä on sisältö, joka näytetään käyttäjälle. Pohjimmiltaan mitä käyttäjä haluaa nähdä, vastaavasti kyseinen sovelluksen näkymä näytetään käyttäjälle.
Näkymien ja reittien yhdistelmä auttaa jakamaan sovelluksen loogisissa näkymissä ja sitomaan eri näkymät ohjaimiin.
Sovelluksen jakaminen eri näkymiin ja reitityksen käyttäminen sovelluksen eri osien lataamiseen auttaa jakamaan sovelluksen loogisesti ja parantamaan sen hallittavuutta.
Oletetaan, että meillä on tilaussovellus, jossa asiakas voi tarkastella tilauksia ja tehdä uusia.
Alla oleva kaavio ja seuraava selitys osoittavat, miten tästä sovelluksesta tehdään yksi sivuinen sovellus.
Nyt sen sijaan, että sinulla olisi kaksi erilaista verkkosivua, yksi "Näytä tilaukset" ja toinen "Uudet tilaukset", AngularJS: ssä, sen sijaan luot kaksi eri näkymää nimeltä "Näytä tilaukset" ja "Uudet tilaukset" samalla sivulla.
Meillä on myös 2 referenssilinkkiä sovelluksessamme nimeltä #show ja # new.
- Joten kun sovellus siirtyy MyApp / # show -ohjelmaan, se näyttää Näytä tilaukset -näkymän samalla kun se ei poistu sivulta. Se vain päivittää nykyisen sivun osan "Näytä tilaukset" -informaatiolla. Sama koskee "Uudet tilaukset" -näkymää.
Joten tällä tavoin yksinkertaistuu sovelluksen erottaminen eri näkymiin, jotta se olisi hallittavampaa ja helpompaa tehdä muutoksia tarvittaessa.
Ja jokaisessa näkymässä on vastaava ohjain, joka ohjaa kyseisen toiminnon liiketoimintalogiikkaa.
ng-view-direktiivi AngularJS: ssä
"NgView" on direktiivi, joka täydentää $ route -palvelua sisällyttämällä nykyisen reitin renderoidun mallin pääasettelutiedostoon (index.html).
Aina kun nykyinen reitti muuttuu, näkymä sisälsi siihen muutokset $ route -palvelun kokoonpanon mukaan muuttamatta itse sivua.
Käsittelemme reittejä myöhemmässä luvussa, toistaiseksi keskitymme lisäämään useita näkymiä sovellukseemme.
Alla on koko vuokaavio siitä, miten koko prosessi toimii. Käymme läpi yksityiskohtaisesti jokaisen prosessin alla olevassa esimerkissä.
ng-view-esimerkki
Katsotaanpa esimerkki siitä, miten näkemykset voidaan toteuttaa.
Esitämme esimerkissämme käyttäjälle kaksi vaihtoehtoa,
- Yksi on näyttää "Tapahtuma" ja toinen lisätä "Tapahtuma".
- Kun käyttäjä napsauttaa Lisää tapahtuma -linkkiä, hänelle näytetään "Lisää tapahtuma" -näkymä ja sama koskee "Näyttötapahtuma" -kohtaa.
Noudata alla olevia ohjeita saadaksesi tämän esimerkin paikoilleen.
Vaihe 1) Sisällytä kulmareitti-tiedosto komentosarjaviitteeksi.
Tämä reittitiedosto on välttämätön useiden reittien ja näkymien toiminnallisuuden hyödyntämiseksi. Tämä tiedosto voidaan ladata angularJS-verkkosivustolta.
Vaihe 2) Tässä vaiheessa
- Lisää href-tunnisteita, jotka edustavat linkkejä "Uuden tapahtuman lisääminen" ja "Tapahtuman näyttäminen".
- Lisää myös div-tagi ng-view-direktiiviin, joka edustaa näkymää.
Tämä sallii vastaavan näkymän injektoinnin aina, kun käyttäjä napsauttaa joko "Lisää uusi tapahtuma -linkkiä" tai "Näytä tapahtumalinkki".
Vaihe 3) Lisää seuraava koodi Angular JS: n komentotunnisteeseesi.
Älkäämme huolehtiko reitityksestä, toistaiseksi näemme tämän myöhemmässä luvussa. Katsotaan vain nyt näkymien koodi.
- Tämä koodiosa tarkoittaa, että kun käyttäjä napsauttaa href-tagia "NewEvent", joka määritettiin aiemmin div-tagissa. Se menee verkkosivulle add_event.html ja ottaa koodin sieltä ja pistää sen näkymään. Toiseksi, kun haluat käsitellä tämän näkymän liiketoimintalogiikkaa, siirry AddEventControlleriin.
- Tämä koodiosa tarkoittaa, että kun käyttäjä napsauttaa href-tagia "DisplayEvent", joka määritettiin aiemmin div-tagissa. Se menee verkkosivulle show_event.html, ottaa koodin sieltä ja pistää sen näkymään. Toiseksi, käsitelläksesi tämän näkymän liiketoimintalogiikkaa, siirry "ShowDisplayController" -ohjelmaan.
- Tämä koodiosa tarkoittaa, että käyttäjälle näytetty oletusnäkymä on DisplayEvent-näkymä
Vaihe 4) Seuraavaksi on lisättävä ohjaimia sekä "DisplayEvent" - ja "Lisää uusi tapahtuma" -toimintojen liiketoimintalogiikan käsittelemiseksi.
Lisäämme vain sanomuuttujan jokaiselle ohjaimen jokaiselle laajuusobjektille. Tämä viesti tulee näkyviin, kun sopiva näkymä näytetään käyttäjälle.
Event Registration Guru99 Global Event
Vaihe 5) Luo sivuja nimeltä add_event.html ja show_event.html. Pidä sivut yksinkertaisina alla olevan kuvan mukaisesti.
Meidän tapauksessamme add_event.html -sivulla on otsikkotunniste tekstin "Lisää uusi tapahtuma" kanssa ja lauseke, joka näyttää viestin "Tämä on uuden tapahtuman lisääminen".
Vastaavasti show_event.html -sivulla on myös otsikkotunniste tekstin "Näytä tapahtuma" säilyttämiseksi ja viestilauseke, joka näyttää viestin "Tämä on tapahtuman näyttäminen".
Viestimuuttujan arvo injektoidaan näkymään liitetyn ohjaimen perusteella.
Jokaiselle sivulle lisätään sanomuuttuja, joka injektoidaan kustakin vastaavasta ohjaimesta.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Tuloksesta voimme havaita 2 asiaa
- Osoitepalkki heijastaa nykyistä näkymää. Joten koska oletusnäkymänä on Näytä tapahtuma -näyttö, osoitepalkissa näkyy "DisplayEvent" -osoite.
- Tämä osio on näkymä, joka luodaan lennossa. Koska oletusnäkymä on Näytä tapahtuma, tämä näkyy käyttäjälle.
Napsauta nyt Lisää uusi tapahtuma -linkkiä näytetyllä sivulla. Saat nyt alla olevan tuotoksen.
Tuotos:
- Osoitepalkki heijastaa nyt, että nykyinen näkymä on nyt Lisää uusi tapahtuma -näkymä. Huomaa, että olet edelleen samalla sovellussivulla. Sinua ei ohjata uudelle sovellussivulle.
- Tämä osio on näkymä, ja se muuttuu nyt näyttämään "Lisää uusi tapahtuma" -toiminnon HTML-koodi. Joten nyt tässä osiossa otsikkotunniste "Lisää uusi tapahtuma" ja teksti "Tämä on uuden tapahtuman lisääminen" näytetään käyttäjälle.