AngularJS ng-view koos näitega: kuidas vaadet rakendada
James Hartman
Tänapäeval oleksid kõik kuulnud ühelehelistest rakendustest. Paljud tuntud veebisaidid, nagu Gmail, kasutavad üheleheliste rakenduste (SPA-de) kontseptsiooni.
SPA on kontseptsioon, mille kohaselt kui kasutaja taotleb teist lehte, ei navigeeri rakendus sellele lehele, vaid kuvab uue lehe vaate olemasoleval lehel endal.
See annab kasutajale tunde, et ta ei lahkunud lehelt üldse. Sama saab Angularis saavutada vaadete abil koos marsruutidega.
Selles õpetuses saate teada -
Mis on vaade?
Vaade on kasutajale kuvatav sisu. Põhimõtteliselt seda, mida kasutaja näha soovib, vastavalt sellele näidatakse kasutajale seda rakenduse vaadet.
Vaadete ja marsruutide kombinatsioon aitab jagada rakendust loogilisteks vaadeteks ja siduda erinevaid vaateid kontrolleritega.
Rakenduse jagamine erinevateks vaadeteks ja marsruutimise kasutamine rakenduse erinevate osade laadimiseks aitab rakendust loogiliselt jagada ja muuta see paremini hallatavaks.
Oletame, et meil on tellimisrakendus, kus klient saab vaadata tellimusi ja esitada uusi.
Allolev diagramm ja sellele järgnev selgitus näitavad, kuidas muuta see rakendus üheleheliseks rakenduseks.
Nüüd, selle asemel, et omada kahte erinevat veebilehte, üks tellimuste kuvamiseks ja teine uute tellimuste jaoks AngularJS, looksite samal lehel kaks erinevat vaadet nimega „Vaata tellimusi” ja „Uued tellimused”.
Meie rakenduses on ka 2 viitelinki nimega #show ja #new.
- Seega, kui rakendus läheb MyApp/#show-sse, siis kuvab see tellimuste vaatamise vaadet, samal ajal ei lahku see lehelt. See lihtsalt värskendab olemasoleva lehe jaotist teabega "Vaata tellimusi". Sama kehtib ka vaate „Uued tellimused” kohta.
Nii muutub rakenduse eri vaadeteks eraldamine lihtsamaks, et muuta see paremini hallatavaks ja vajaduse korral hõlpsamini muudatusi teha.
Ja igal vaatel on vastav kontroller, mis kontrollib selle funktsiooni äriloogikat.
ng-view direktiiv AngularJS-is
"ngView" on direktiiv, mis täiendab teenust $route, lisades praeguse marsruudi renderdatud malli põhipaigutusfaili (index.html).
Iga kord, kui praegune marsruut muutub, hõlmas vaade selle muudatusi vastavalt teenuse $route konfiguratsioonile, muutmata lehte ennast.
Meie katame liinidel Hilisemas peatükis keskendume praegu oma rakendusele mitme vaate lisamisele.
Allpool on kogu protsessi toimimise kogu vooskeemi. Vaatame üksikasjalikult läbi kõik protsessid meie allpool näidatud näites.
Kuidas ng-vaadet AngularJS-is rakendada
Vaatame näidet selle kohta, kuidas ng-view AngularJS-is rakendada. Meie näites esitame kasutajale kaks võimalust,
- Üks on sündmuse kuvamine ja teine sündmuse lisamine.
- Kui kasutaja klõpsab lingil Lisa sündmus, kuvatakse talle vaade „Lisa sündmus” ja sama kehtib ka „Kuva sündmus”.
Selle näite paika panemiseks järgige allolevaid samme.
Step 1) Kaasake skripti viitena nurkmarsruudi fail.
See marsruudifail on vajalik mitme marsruudi ja vaate funktsioonide kasutamiseks. Selle faili saab alla laadida angularJS-i veebisaidilt.
Step 2) Lisage href- ja div-märgendeid.
Selles sammus
- Lisage href-sildid, mis tähistavad linke jaotistele „Uue sündmuse lisamine” ja „Sündmuse kuvamine”.
- Lisage ka ng-view direktiiviga div silt, mis esindab vaadet. See võimaldab vastava vaate sisestada iga kord, kui kasutaja klõpsab lingil „Lisa uus sündmus” või „Kuva sündmuse link”.
Step 3) Lisage Angular JS-i skriptimärgendisse järgmine kood.
Ärgem muretsege marsruutimise pärast, praegu näeme seda hilisemas peatükis. Vaatame praegu vaadete koodi.
- See koodijaotis tähendab, et kui kasutaja klõpsab href-sildil "NewEvent", mis oli varem määratletud div-sildis. See läheb veebilehele add_event.html, võtab sealt koodi ja sisestab selle vaatesse. Teiseks selle vaate äriloogika töötlemiseks minge jaotisse "AddEventController".
- See koodijaotis tähendab, et kui kasutaja klõpsab href-sildil „DisplayEvent”, mis oli varem määratletud div-sildis. See läheb veebilehele show_event.html, võtab sealt koodi ja sisestab selle vaatesse. Teiseks, selle vaate äriloogika töötlemiseks minge jaotisse "ShowDisplayController".
- See koodiosa tähendab, et kasutajale kuvatav vaikevaade on DisplayEvent vaade
Step 4) Äriloogika töötlemiseks lisage kontrollereid.
Järgmisena tuleb lisada kontrollerid, et töödelda äriloogikat nii funktsiooni DisplayEvent kui ka uue sündmuse lisamiseks.
Me lihtsalt lisame iga kontrolleri igale ulatusobjektile sõnumimuutuja. See teade kuvatakse, kui kasutajale kuvatakse sobiv vaade.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
<script src="lib/bootstrap.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 display an Event";
});
</script>
</body>
</html>
Step 5) Looge lehed nimedega add_event.html ja show_event.html
Järgmisena looge lehed nimedega add_event.html ja show_event.html. Hoidke lehed lihtsad, nagu allpool näidatud.
Meie puhul on lehel add_event.html päisemärgend koos tekstiga "Lisa uus sündmus" ja väljend, mis kuvab sõnumi "See on uue sündmuse lisamiseks".
Samamoodi on lehel show_event.html ka päisemärgend, mis sisaldab teksti "Kuva sündmus", ja sõnumi väljend, mis kuvab sõnumi "See on sündmuse kuvamiseks".
Sõnumimuutuja väärtus sisestatakse vaatega ühendatud kontrolleri alusel.
Iga lehe jaoks lisame sõnumimuutuja, mis sisestatakse igast vastavast kontrollerist.
- add_event.html
<h2>Add New Event</h2>
{{message}}
- show_event.html
<h2>Show Event</h2>
{{message}}
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:
Väljundist võime märgata 2 asja
- Aadressiriba kajastab praegu kuvatavat vaadet. Kuna vaikevaade näitab sündmuse kuvamise ekraani, näitab aadressiriba „DisplayEvent” aadressi.
- See jaotis on vaade, mis luuakse käigu pealt. Kuna vaikevaade on Näita sündmust, kuvatakse see kasutajale.
Nüüd klõpsake kuvataval lehel lingil Lisa uus sündmus. Nüüd saate alloleva väljundi.
Väljund:
- Aadressiriba näitab nüüd, et praegune vaade on nüüd "Lisa uus sündmus". Pange tähele, et olete endiselt samal rakenduse lehel. Teid ei suunata uuele rakenduse lehele.
- See jaotis on Vaade ja see kuvatakse nüüd HTML funktsiooni „Lisa uus sündmus” jaoks. Nüüd kuvatakse selles jaotises kasutajale päisemärgend "Lisa uus sündmus" ja tekst "See on uue sündmuse lisamiseks".
