V dnešnej dobe by už každý počul o „jednostránkových aplikáciách“. Mnoho známych webov, ako napríklad Gmail, používa koncept jednostránkových aplikácií (SPA).
SPA je koncept, pri ktorom keď užívateľ požaduje inú stránku, aplikácia nebude navigovať na túto stránku, ale namiesto toho zobrazí pohľad na novú stránku v rámci samotnej existujúcej stránky.
Poskytuje používateľovi pocit, že stránku nikdy neopustil. To isté sa dá dosiahnuť v uhle pomocou pohľadov v spojení s trasami.
V tomto návode sa naučíte
- Čo je to pohľad?
- Smernica o zobrazení ng v AngularJS
- ng-view Príklad
Čo je to pohľad?
Zobrazenie je obsah, ktorý sa zobrazuje používateľovi. V zásade to, čo chce používateľ vidieť, sa mu teda zobrazí tento pohľad na aplikáciu.
Kombinácia pohľadov a smerov pomáha človeku rozdeliť aplikáciu na logické pohľady a naviazať rôzne pohľady na ovládače.
Rozdelenie aplikácie na rôzne zobrazenia a použitie smerovania na načítanie inej časti aplikácie pomáha pri logickom rozdelení aplikácie a jej lepšej spravovateľnosti.
Predpokladajme, že máme aplikáciu na objednávanie, v ktorej si zákazník môže objednávky prezerať a zadávať nové.
Nasledujúci diagram a následné vysvetlenie demonštrujú, ako vytvoriť túto aplikáciu ako jednostránkovú aplikáciu.
Teraz by ste namiesto toho, aby ste v AngularJS mali dve rôzne webové stránky, jednu pre „Zobrazenie objednávok“ a druhú pre „Nové objednávky“, by ste namiesto toho vytvorili dve rôzne zobrazenia s názvom „Zobraziť objednávky“ a „Nové objednávky“ na tej istej stránke.
V našej aplikácii budeme mať tiež 2 referenčné odkazy s názvom #show a #new.
- Takže keď aplikácia prejde na MyApp / # show, zobrazí pohľad na View Orders, zároveň neopustí stránku. Iba obnoví časť existujúcej stránky informáciou „Zobraziť objednávky“. To isté platí pre zobrazenie „Nové objednávky“.
Týmto spôsobom sa zjednodušuje rozdelenie aplikácie na rôzne zobrazenia, aby bola správa ľahšie vykonateľná a kedykoľvek bolo potrebné.
A každé zobrazenie bude mať zodpovedajúci radič na riadenie obchodnej logiky pre túto funkčnosť.
Smernica o zobrazení ng v AngularJS
„NgView“ je smernica, ktorá dopĺňa službu $ route zahrnutím vykreslenej šablóny aktuálnej trasy do súboru hlavného rozloženia (index.html).
Zakaždým, keď sa zmení aktuálna trasa, pohľad do nej zahrnul zmeny podľa konfigurácie služby $ route bez zmeny samotnej stránky.
Tratiam sa budeme venovať v ďalšej kapitole, zatiaľ sa zameriame na pridanie viacerých pohľadov do našej aplikácie.
Ďalej je uvedený celý vývojový diagram fungovania celého procesu. V našom príklade uvedenom nižšie podrobne prejdeme každý proces.
ng-view Príklad
Pozrime sa na príklad toho, ako môžeme implementovať zobrazenia.
V našom príklade predstavíme používateľovi dve možnosti,
- Jedným z nich je zobrazenie „udalosti“ a druhým pridanie „udalosti“.
- Keď používateľ klikne na odkaz Pridať udalosť, zobrazí sa mu zobrazenie „Pridať udalosť“ a to isté platí pre „Zobraziť udalosť“.
Ak chcete uviesť tento príklad, postupujte podľa nasledujúcich krokov.
Krok 1) Zahrňte súbor angular-route ako referenciu skriptu.
Tento súbor trasy je potrebný na to, aby sa využili funkcie viacerých ciest a zobrazení. Tento súbor je možné stiahnuť z webovej stránky angularJS.
Krok 2) V tomto kroku
- Pridajte značky href, ktoré budú predstavovať odkazy na „Pridanie novej udalosti“ a „Zobrazenie udalosti“.
- Pridajte tiež značku div so smernicou ng-view, ktorá bude predstavovať pohľad.
Toto umožní vloženie zodpovedajúceho zobrazenia vždy, keď používateľ klikne na odkaz „Pridať novú udalosť“ alebo „Zobraziť odkaz na udalosť“.
Krok 3) Do značky skriptu pre Angular JS pridajte nasledujúci kód.
Nerobme si starosti so smerovaním, zatiaľ to uvidíme v neskoršej kapitole. Pozrime sa zatiaľ na kód pre zobrazenia.
- Táto časť kódu znamená, že keď používateľ klikne na značku href „NewEvent“, ktorá bola v značke div definovaná už skôr. Prejde na webovú stránku add_event.html a odtiaľ vezme kód a vloží ho do zobrazenia. Po druhé na spracovanie obchodnej logiky pre toto zobrazenie prejdite na stránku „AddEventController“.
- Táto časť kódu znamená, že keď používateľ klikne na značku href „DisplayEvent“, ktorá bola v značke div definovaná už skôr. Prejde na webovú stránku show_event.html, odtiaľ vezme kód a vloží ho do zobrazenia. Po druhé, na spracovanie obchodnej logiky pre toto zobrazenie choďte na „ShowDisplayController“.
- Táto časť kódu znamená, že predvolené zobrazenie, ktoré sa zobrazuje používateľovi, je zobrazenie DisplayEvent
Krok 4) Ďalej je potrebné pridať radiče, ktoré spracujú obchodnú logiku pre funkciu „DisplayEvent“ aj „Pridať novú udalosť“.
Jednoducho pridávame premennú správu do každého objektu rozsahu pre každý radič. Táto správa sa zobrazí, keď sa používateľovi zobrazí príslušné zobrazenie.
Event Registration Guru99 Global Event
Krok 5) Vytvorte stránky s názvom add_event.html a show_event.html. Udržujte stránky jednoduché, ako je uvedené nižšie.
V našom prípade bude mať stránka add_event.html značku hlavičky spolu s textom „Pridať novú udalosť“ a bude mať výraz na zobrazenie správy „To je pre pridanie novej udalosti“.
Stránka show_event.html bude mať tiež značku hlavičky, ktorá bude obsahovať text „Zobraziť udalosť“, a tiež výraz správy na zobrazenie správy „Toto slúži na zobrazenie udalosti.“
Hodnota premennej správy bude vložená na základe ovládača, ktorý je pripojený k zobrazeniu.
Pre každú stránku pridáme premennú správy, ktorá bude vložená z každého príslušného radiča.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Z výstupu si môžeme všimnúť 2 veci
- Panel s adresou bude odrážať aktuálne zobrazené zobrazenie. Pretože je predvoleným zobrazením zobrazenie obrazovky Zobraziť udalosť, na paneli s adresou sa zobrazuje adresa „DisplayEvent“.
- Táto časť je Výhľad, ktorý sa vytvára za chodu. Pretože predvolené zobrazenie je Show Event, toto sa zobrazí používateľovi.
Teraz na zobrazenej stránke kliknite na odkaz Pridať novú udalosť. Teraz získate nižšie uvedený výstup.
Výkon:
- Panel s adresou bude teraz odrážať to, že aktuálne zobrazenie je teraz zobrazením „Pridať novú udalosť“. Všimnite si, že budete stále na tej istej stránke žiadosti. Nebudete presmerovaní na novú stránku aplikácie.
- Táto časť je Zobrazenie a teraz sa zmení, aby sa zobrazoval kód HTML pre funkčnosť „Pridať novú udalosť“. Teraz sa teda v tejto časti používateľovi zobrazí značka hlavičky „Pridať novú udalosť“ a text „To je pre pridanie novej udalosti“.