Šiais laikais visi būtų girdėję apie „Vieno puslapio programas“. Daugelyje žinomų svetainių, pvz., „Gmail“, naudojama „Single Page Applications“ (SPA) koncepcija.
SPA yra koncepcija, kai vartotojui pateikus užklausą dėl kito puslapio, programa nenueis į tą puslapį, o parodys naujo puslapio vaizdą pačiame esamame puslapyje.
Tai suteikia vartotojui jausmą, kad jis niekada nepaliko puslapio. Tą patį galima pasiekti ir kampe, naudojant „Views“ kartu su „Routes“.
Šioje pamokoje sužinosite
- Kas yra vaizdas?
- „ng-view“ direktyva „AngularJS“
- ng-view pavyzdys
Kas yra vaizdas?
Rodinys yra turinys, kuris rodomas vartotojui. Iš esmės tai, ką vartotojas nori matyti, atitinkamai tas programos vaizdas bus rodomas vartotojui.
Rodinių ir maršrutų derinys padeda padalyti programą į loginius rodinius ir susieti skirtingus rodinius su valdikliais.
Programos padalijimas į skirtingus rodinius ir maršruto naudojimas norint įkelti skirtingą programos dalį, padeda logiškai padalyti programą ir padaryti ją lengviau valdomą.
Tarkime, kad turime užsakymo programą, kurioje klientas gali peržiūrėti užsakymus ir pateikti naujus.
Žemiau pateiktoje diagramoje ir tolesniame paaiškinime parodyta, kaip padaryti šią programą kaip vieno puslapio programą.
Dabar, užuot turėję du skirtingus tinklalapius, vieną skirtą „Žiūrėti užsakymus“, o kitą - „Naujiems užsakymams“, sistemoje „AngularJS“, jūs tame pačiame puslapyje sukurtumėte du skirtingus rodinius, vadinamus „Peržiūrėti užsakymus“ ir „Nauji užsakymai“.
Savo programoje taip pat turėsime 2 nuorodų nuorodas „#show“ ir „new“.
- Taigi, kai programa eis į „MyApp / # show“, ji parodys „View Orders“ rodinį, tuo pačiu metu ji nepaliks puslapio. Tiesiog atnaujinsite esamo puslapio skiltį pateikdama informaciją „Peržiūrėti užsakymus“. Tas pats pasakytina ir apie „Naujus užsakymus“.
Taigi tokiu būdu paprasčiau atskirti programą į skirtingus rodinius, kad būtų lengviau valdyti ir prireikus lengvai atlikti pakeitimus.
Kiekvienas rodinys turės atitinkamą valdiklį, kuris valdys tos funkcijos verslo logiką.
„ng-view“ direktyva „AngularJS“
„NgView“ yra direktyva, kuri papildo „$ route“ paslaugą įtraukdama dabartinio maršruto atvaizduotą šabloną į pagrindinį maketo (index.html) failą.
Kiekvieną kartą, kai keičiasi dabartinis maršrutas, į rodinį buvo įtraukti jo pakeitimai pagal „$ route“ paslaugos konfigūraciją, nekeičiant paties puslapio.
Maršrutus aptarsime vėlesniame skyriuje, kol kas sutelksime dėmesį į tai, kad prie savo programos pridėtume kelis rodinius.
Žemiau yra visa proceso schema. Toliau pateiktame pavyzdyje išsamiai išnagrinėsime kiekvieną procesą.
ng-view pavyzdys
Pažvelkime į pavyzdžių, kaip galime įgyvendinti nuomones, pavyzdį.
Savo pavyzdyje mes pateiksime vartotojui dvi parinktis,
- Vienas iš jų yra „Įvykio“ rodymas, kitas - „Įvykio“ pridėjimas.
- Kai vartotojas spustelės nuorodą Pridėti įvykį, jam bus rodomas rodinys „Pridėti įvykį“ ir tas pats pasakytina ir apie „Vaizdo įvykį“.
Norėdami gauti šį pavyzdį, atlikite toliau nurodytus veiksmus.
1 žingsnis. Įtraukite kampinio maršruto failą kaip scenarijaus nuorodą.
Šis maršruto failas yra būtinas norint pasinaudoti kelių maršrutų ir rodinių funkcijomis. Šį failą galima atsisiųsti iš angularJS svetainės.
2 žingsnis) Šiame žingsnyje
- Pridėkite „href“ žymų, kurios bus nuorodos į „Naujo įvykio pridėjimas“ ir „Įvykio rodymas“.
- Be to, pridėkite „div“ žymą su „ng-view“ direktyva, kuri atspindės rodinį.
Tai leis įterpti atitinkamą rodinį, kai vartotojas spustelės nuorodą „Pridėti naują įvykį“ arba „Rodyti įvykio nuorodą“.
3 žingsnis) Savo „Angular JS“ scenarijaus žymoje pridėkite šį kodą.
Nesijaudinkime dėl maršruto, kol kas tai pamatysime tolesniame skyriuje. Pažiūrėkime kol kas tik rodinių kodą.
- Ši kodo dalis reiškia, kad vartotojui spustelėjus „href“ žymą „NewEvent“, kuri buvo apibrėžta anksčiau div žymoje. Jis eis į tinklalapį add_event.html ir paims iš jo kodą ir įves jį į rodinį. Antra, jei norite apdoroti šio rodinio verslo logiką, eikite į „AddEventController“.
- Ši kodo dalis reiškia, kad vartotojui spustelėjus „href“ žymą „DisplayEvent“, kuri buvo apibrėžta anksčiau div žymoje. Jis eis į tinklalapį show_event.html, paims iš jo kodą ir įves į rodinį. Antra, norėdami apdoroti šio rodinio verslo logiką, eikite į „ShowDisplayController“.
- Ši kodo dalis reiškia, kad numatytasis rodinys, rodomas vartotojui, yra „DisplayEvent“ rodinys
4 žingsnis. Toliau reikia pridėti valdiklius, kad būtų apdorota funkcijų „DisplayEvent“ ir „Pridėti naują įvykį“ verslo logika.
Mes tiesiog pridedame pranešimo kintamąjį prie kiekvieno valdiklio srities objekto. Šis pranešimas bus rodomas, kai vartotojui bus parodytas tinkamas vaizdas.
Event Registration Guru99 Global Event
5 žingsnis) Sukurkite puslapius, vadinamus add_event.html ir show_event.html. Laikykite puslapius paprastus, kaip parodyta žemiau.
Mūsų atveju „add_event.html“ puslapyje bus antraštės žyma kartu su tekstu „Pridėti naują įvykį“ ir išraiška, kad būtų rodomas pranešimas „Tai yra norint pridėti naują įvykį“.
Panašiai puslapyje show_event.html taip pat bus antraštės žyma, kurioje bus laikomas tekstas „Rodyti įvykį“, ir pranešimo išraiška, rodanti pranešimą „Tai yra įvykio rodymas“.
Pranešimo kintamojo vertė bus įvedama pagal valdiklį, kuris yra pridėtas prie rodinio.
Kiekvienam puslapiui pridėsime pranešimo kintamąjį, kurį suleis kiekvienas atitinkamas valdiklis.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš išvesties galime pastebėti 2 dalykus
- Adreso juosta atspindės dabartinį rodomą vaizdą. Taigi, kadangi numatytasis rodinys yra Rodyti įvykio ekraną, adreso juostoje rodomas „DisplayEvent“ adresas.
- Šis skyrius yra vaizdas, kuris sukuriamas skrendant. Kadangi numatytasis rodinys yra Rodyti įvykį, tai rodoma vartotojui.
Dabar rodomame puslapyje spustelėkite nuorodą Pridėti naują įvykį. Dabar gausite žemiau pateiktą išvestį.
Išvestis:
- Adreso juostoje dabar atsispindės tai, kad dabartinis rodinys yra rodinys „Pridėti naują įvykį“. Atkreipkite dėmesį, kad vis tiek būsite tame pačiame programos puslapyje. Nebūsite nukreipti į naują programos puslapį.
- Ši skiltis yra Vaizdas, ir dabar ji pasikeis, kad būtų rodomas funkcijos „Pridėti naują įvykį“ HTML. Taigi dabar šiame skyriuje antraštės žyma „Pridėti naują įvykį“ ir tekstas „Tai yra naujo įvykio pridėjimas“ rodomas vartotojui.