Mūsdienās visi būtu dzirdējuši par "vienas lapas lietojumprogrammām". Daudzās labi pazīstamās vietnēs, piemēram, Gmail, tiek izmantots vienas lapas lietojumu (SPA) jēdziens.
SPA ir jēdziens, kad, ja lietotājs pieprasa citu lapu, lietojumprogramma nepāriet uz šo lapu, bet gan parādīs jaunās lapas skatu pašā esošajā lapā.
Lietotājam tas rada sajūtu, ka viņš nekad neatstāja lapu. To pašu var panākt leņķī, izmantojot skatus kopā ar maršrutiem.
Šajā apmācībā jūs uzzināsiet
- Kas ir skats?
- ng-view direktīva AngularJS
- ng-view piemērs
Kas ir skats?
Skats ir saturs, kas tiek parādīts lietotājam. Būtībā tas, ko lietotājs vēlas redzēt, attiecīgi lietotājam tiks parādīts šis skats.
Skatu un maršrutu kombinācija palīdz sadalīt lietojumprogrammu loģiskos skatos un piesaistīt dažādus skatus kontrolieriem.
Lietojumprogrammas sadalīšana dažādos skatījumos un maršruta izmantošana dažādas lietojumprogrammas daļas ielādei palīdz loģiski sadalīt lietojumprogrammu un padarīt to vieglāk pārvaldāmu.
Pieņemsim, ka mums ir pasūtīšanas programma, kurā klients var apskatīt pasūtījumus un veikt jaunus.
Zemāk redzamā diagramma un turpmākais skaidrojums parāda, kā padarīt šo lietojumprogrammu kā vienas lapas lietojumprogrammu.
Tagad tā vietā, lai AngularJS būtu divas dažādas tīmekļa lapas, no kurām viena būtu paredzēta “Skatīt pasūtījumus” un otra - “Jauni pasūtījumi”, tajā pašā lapā jūs izveidotu divus dažādus skatus ar nosaukumu “Skatīt pasūtījumus” un “Jauni pasūtījumi”.
Mūsu lietojumprogrammā būs arī 2 atsauces saites ar nosaukumu #show un # new.
- Tātad, kad lietojumprogramma iet uz MyApp / # show, tā parādīs skatu View Orders, tajā pašā laikā tā neatstās lapu. Tas vienkārši atsvaidzinās esošās lapas sadaļu ar informāciju "Skatīt pasūtījumus". Tas pats attiecas arī uz skatu “Jauni pasūtījumi”.
Tādējādi šādā veidā vienkārši kļūst vienkāršāk sadalīt lietojumprogrammu dažādos skatījumos, lai padarītu to vieglāk pārvaldāmu un viegli nepieciešamības gadījumā veiktu izmaiņas.
Katrā skatā būs atbilstošs kontrolieris, kas kontrolēs šīs funkcionalitātes biznesa loģiku.
ng-view direktīva AngularJS
"NgView" ir direktīva, kas papildina pakalpojumu $ route, iekļaujot pašreizējā maršruta renderēto veidni galvenajā izkārtojuma (index.html) failā.
Katru reizi, kad mainās pašreizējais maršruts, skatā tika veiktas izmaiņas tajā atbilstoši $ route pakalpojuma konfigurācijai, nemainot pašu lapu.
Maršrutus aplūkosim vēlākā nodaļā, pagaidām mēs koncentrēsimies uz vairāku skatu pievienošanu mūsu lietojumprogrammai.
Zemāk ir parādīta visa procesa shēma. Tālāk parādītajā piemērā mēs detalizēti iziesim par katru procesu.
ng-view piemērs
Apskatīsim piemēru, kā mēs varam īstenot uzskatus.
Šajā piemērā mēs piedāvāsim lietotājam divas iespējas,
- Viens no tiem ir "Notikuma" parādīšana, bet otrs ir "Notikuma" pievienošana.
- Kad lietotājs noklikšķina uz saites Pievienot notikumu, viņam tiks parādīts skats “Pievienot notikumu” un tas pats attiecas arī uz “Attēlojuma notikums”.
Lūdzu, veiciet tālāk norādītās darbības, lai iegūtu piemēru.
1. solis. Iekļaujiet leņķa maršruta failu kā skripta atsauci.
Šis maršruta fails ir nepieciešams, lai izmantotu vairāku maršrutu un skatu funkcijas. Šo failu var lejupielādēt no angularJS vietnes.
2. solis) Šajā solī
- Pievienojiet href tagus, kas attēlos saites uz “Jauna notikuma pievienošana” un “Notikuma parādīšana”.
- Pievienojiet arī div tagu ar direktīvu ng-view, kas attēlos skatu.
Tas ļaus ievadīt atbilstošo skatu ikreiz, kad lietotājs noklikšķina uz saites "Pievienot jaunu notikumu" vai "Saite parādīt notikumu".
3. solis. Angular JS skripta tagā pievienojiet šādu kodu.
Neuztraucīsimies par maršrutēšanu, pagaidām to redzēsim nākamajā nodaļā. Tagad skatīsim tikai skatu kodu.
- Šī koda sadaļa nozīmē, ka tad, kad lietotājs noklikšķina uz href taga "NewEvent", kas tika definēts iepriekš div tagā. Tas nonāks tīmekļa vietnē add_event.html un paņems kodu no turienes un ievadīs to skatā. Otrkārt, lai apstrādātu šī skata biznesa loģiku, dodieties uz “AddEventController”.
- Šī koda sadaļa nozīmē, ka, kad lietotājs noklikšķina uz href taga "DisplayEvent", kas tika definēts iepriekš div tagā. Tas nonāks tīmekļa vietnē show_event.html, paņems kodu no turienes un ievadīs to skatā. Otrkārt, lai apstrādātu šī skata biznesa loģiku, dodieties uz sadaļu "ShowDisplayController".
- Šī koda sadaļa nozīmē, ka lietotājam parādītais noklusējuma skats ir skats DisplayEvent
4. solis. Tālāk ir jāpievieno kontrolieri, lai apstrādātu biznesa loģiku gan funkcijām "DisplayEvent", gan "Pievienot jaunu notikumu".
Mēs vienkārši pievienojam ziņojuma mainīgo katram vadības objektam katram darbības objektam. Šis ziņojums tiks parādīts, kad lietotājam tiks parādīts atbilstošais skats.
Event Registration Guru99 Global Event
5. darbība. Izveidojiet lapas ar nosaukumu add_event.html un show_event.html. Saglabājiet lapas vienkāršas, kā parādīts zemāk.
Mūsu gadījumā lapā add_event.html būs galvenes tags kopā ar tekstu "Pievienot jaunu notikumu" un izteiksme, lai parādītu ziņojumu "Tas ir, lai pievienotu jaunu notikumu".
Tāpat lapā show_event.html būs arī galvenes tags, kas satur tekstu "Rādīt notikumu", kā arī ziņojuma izteiksme, lai parādītu ziņojumu "Tas ir notikuma parādīšanai".
Ziņojuma mainīgā vērtība tiks ievadīta, pamatojoties uz kontrolieri, kas pievienots skatam.
Katrai lapai mēs pievienosim ziņojuma mainīgo, kuru injicēs katrs attiecīgais kontrolleris.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
Pēc izejas mēs varam pamanīt 2 lietas
- Adreses joslā tiks parādīts pašreizējais parādītais skats. Tā kā noklusējuma skatā ir jāparāda ekrāns Rādīt notikumu, adreses joslā tiek rādīta adrese “DisplayEvent”.
- Šī sadaļa ir skats, kas tiek izveidots lidojot. Tā kā noklusējuma skats ir Rādīt notikumu, tas tiek parādīts lietotājam.
Tagad parādītajā lapā noklikšķiniet uz saites Pievienot jaunu notikumu. Tagad jūs iegūsiet zemāk redzamo rezultātu.
Izeja:
- Adrešu joslā tagad tiks parādīts, ka pašreizējais skats tagad ir skats “Pievienot jaunu notikumu”. Ievērojiet, ka jūs joprojām atradīsities tajā pašā lietojumprogrammas lapā. Jūs netiksit novirzīts uz jaunu lietojumprogrammas lapu.
- Šī sadaļa ir skats, un tagad tā mainīsies, lai parādītu HTML funkciju “Pievienot jaunu notikumu”. Tāpēc tagad šajā sadaļā lietotājam tiek parādīts galvenes tags "Pievienot jaunu notikumu" un teksts "Tas ir paredzēts, lai pievienotu jaunu notikumu".