AngularJS ng-view s primjerom: Kako implementirati prikaz

Danas su svi čuli za „aplikacije s jednom stranicom“. Mnoge poznate web stranice poput Gmail koristiti koncept jednostraničnih aplikacija (SPA).

SPA je koncept u kojem kada korisnik zatraži drugu stranicu, aplikacija neće otići na tu stranicu, već će umjesto toga prikazati prikaz nove stranice unutar same postojeće stranice.

Korisniku daje osjećaj da uopće nije napustio stranicu. Isto se može postići u Angularu uz pomoć Viewsa u kombinaciji s Routesom.

U ovom vodiču naučit ćete-

• Što je pogled?
• Direktiva ng-view u AngularJS
• Kako implementirati ng-view u AngularJS s primjerom

Što je pogled?

Prikaz je sadržaj koji se prikazuje korisniku. Uglavnom ono što korisnik želi vidjeti, prema tome će se korisniku prikazati taj prikaz aplikacije.

Kombinacija pogleda i ruta pomaže u dijeljenju aplikacije u logičkim pogledima i povezivanju različitih pogleda s kontrolerima.

Dijeljenje aplikacije u različite prikaze i korištenje usmjeravanja za učitavanje različitih dijelova aplikacije pomaže u logičnoj podjeli aplikacije i čini je lakšom za upravljanje.

Pretpostavimo da imamo aplikaciju za naručivanje u kojoj kupac može pregledavati narudžbe i slati nove.

Donji dijagram i naknadno objašnjenje pokazuju kako napraviti ovu aplikaciju kao aplikaciju na jednoj stranici.

Sada, umjesto da imate dvije različite web stranice, jednu za "Prikaz narudžbi" i drugu za "Nove narudžbe", u AngularJS, umjesto toga biste stvorili dva različita prikaza pod nazivom "Prikaži narudžbe" i "Nove narudžbe" na istoj stranici.

Također ćemo imati 2 referentne veze u našoj aplikaciji pod nazivom #show i #new.

• Dakle, kada aplikacija ode na MyApp/#show, prikazat će prikaz Pregleda naloga, a istovremeno neće napustiti stranicu. Samo će osvježiti odjeljak postojeće stranice s informacijama "Prikaži narudžbe". Isto vrijedi i za prikaz "Nove narudžbe".

Dakle, na ovaj način jednostavno postaje jednostavnije odvojiti aplikaciju u različite prikaze kako bi se njome lakše upravljalo i kako bi se lakše mijenjale kad god je potrebno.

A svaki pogled će imati odgovarajući kontroler za kontrolu poslovne logike za tu funkcionalnost.

Direktiva ng-view u AngularJS

"ngView" je direktiva koja nadopunjuje uslugu $route uključivanjem prikazanog predloška trenutne rute u glavnu datoteku izgleda (index.html).

Svaki put kada se trenutna ruta promijeni, prikaz uključuje promjene prema konfiguraciji usluge $route bez promjene same stranice.

Mi ćemo pokrivati destinacije u kasnijem poglavlju, za sada, usredotočit ćemo se na dodavanje više pogleda našoj aplikaciji.

Ispod je cijeli dijagram toka kako cijeli proces funkcionira. Detaljno ćemo proći kroz svaki proces u našem primjeru prikazanom u nastavku.

Kako implementirati ng-view u AngularJS

Pogledajmo primjer kako možemo implementirati ng-view u AngularJS. U našem primjeru, predstavit ćemo dvije opcije korisniku,

• Jedan je prikazati "Događaj", a drugi je dodati "Događaj".
• Kada korisnik klikne vezu Dodaj događaj, prikazat će mu se prikaz za "Dodaj događaj", a isto vrijedi i za "Prikaži događaj".

Slijedite korake u nastavku kako biste postavili ovaj primjer.

Korak 1) Uključite datoteku kutne rute kao referencu skripte.

Ova datoteka rute je neophodna kako bi se iskoristile funkcionalnosti više ruta i prikaza. Ova se datoteka može preuzeti s web stranice angularJS.

Korak 2) Dodajte href oznake i div oznaku.

U ovom koraku

1. Dodajte href oznake koje će predstavljati veze na “Dodavanje novog događaja” i “Prikaz događaja”.
2. Također dodajte oznaku div s direktivom ng-view koja će predstavljati pogled. To će omogućiti umetanje odgovarajućeg prikaza svaki put kada korisnik klikne na "Dodaj novu vezu događaja" ili "Prikaži vezu događaja".

Korak 3) U svoju oznaku skripte za Angular JS dodajte sljedeći kod.

Nemojmo brinuti o usmjeravanju, za sada ćemo to vidjeti u kasnijem poglavlju. Pogledajmo samo kod za prikaze za sada.

1. Ovaj odjeljak koda znači da kada korisnik klikne na href oznaku “NewEvent” koja je ranije definirana u div oznaci. Otići će na web stranicu add_event.html, odatle će preuzeti kod i ubaciti ga u prikaz. Kao drugo za obradu poslovne logike za ovaj pogled, idite na "AddEventController".
2. Ovaj odjeljak koda znači da kada korisnik klikne na href oznaku “DisplayEvent” koja je ranije definirana u div oznaci. Otići će na web-stranicu show_event.html, preuzeti kod od tamo i ubaciti ga u prikaz. Drugo, za obradu poslovne logike za ovaj prikaz idite na "ShowDisplayController".
3. Ovaj dio koda znači da je zadani prikaz prikazan korisniku prikaz DisplayEvent

   

Korak 4) Dodajte kontrolere za obradu poslovne logike.

Sljedeće je dodavanje kontrolera za obradu poslovne logike za funkcije "DisplayEvent" i "Add New Event".

Jednostavno dodajemo varijablu poruke svakom objektu opsega za svaki kontroler. Ova poruka će se prikazati kada se korisniku prikaže odgovarajući prikaz.

<!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>

Korak 5) Napravite stranice pod nazivom add_event.html i show_event.html

Zatim stvorite stranice pod nazivom add_event.html i show_event.html. Neka stranice budu jednostavne, kao što je prikazano u nastavku.

U našem slučaju, stranica add_event.html imat će oznaku zaglavlja zajedno s tekstom "Dodaj novi događaj" i imati izraz za prikaz poruke "Ovo je dodavanje novog događaja".

Slično tome, stranica show_event.html također će imati oznaku zaglavlja za držanje teksta "Prikaži događaj" i također imati izraz poruke za prikaz poruke "Ovo je za prikaz događaja."

Vrijednost varijable poruke bit će umetnuta na temelju kontrolera koji je pripojen pogledu.

Za svaku stranicu ćemo dodati varijablu poruke koja će biti umetnuta iz svakog odgovarajućeg kontrolera.

• add_event.html

<h2>Add New Event</h2>

{{message}}

• show_event.html

<h2>Show Event</h2>
	
{{message}}

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Iz izlaza možemo primijetiti 2 stvari

1. Adresna traka će odražavati koji je trenutni prikaz koji se prikazuje. Dakle, budući da je zadani prikaz prikaz zaslona za prikaz događaja, adresna traka prikazuje adresu za "DisplayEvent".
2. Ovaj odjeljak je Pogled koji se kreira u hodu. Budući da je zadani prikaz prikaz događaja, to je ono što se prikazuje korisniku.

Sada kliknite vezu Dodaj novi događaj na prikazanoj stranici. Sada ćete dobiti donji izlaz.

Izlaz:

1. Adresna traka sada će odražavati da je trenutni prikaz sada prikaz "Dodaj novi događaj". Imajte na umu da ćete i dalje biti na istoj stranici za prijavu. Nećete biti preusmjereni na novu stranicu za prijavu.
2. Ovaj odjeljak je Pogled i sada će se promijeniti kako bi prikazao HTML za funkciju "Dodaj novi događaj". Sada se u ovom odjeljku korisniku prikazuje oznaka zaglavlja "Dodaj novi događaj" i tekst "Ovo je dodavanje novog događaja".