AngularJS ng-view esimerkillä: Kuinka toteuttaa näkymä
James Hartman
Nykyään kaikki olisivat kuulleet "yksisivuisista sovelluksista". Monet tunnetuista verkkosivustoista, kuten Gmail, käyttävät Single Page Applications (SPA:t) -konseptia.
SPA:t on käsite, jossa kun käyttäjä pyytää eri sivua, sovellus ei navigoi kyseiselle sivulle, vaan näyttää uuden sivun näkymän itse olemassa olevalla sivulla.
Se antaa käyttäjälle tunteen, ettei hän koskaan poistunut sivulta. Sama voidaan saavuttaa Angularissa Views-toiminnon ja Routes-toiminnon avulla.
Tässä opetusohjelmassa opit -
- Mikä on näkymä?
- ng-view-direktiivi AngularJS:ssä
- Kuinka ottaa ng-view käyttöön AngularJS:ssä esimerkin avulla
Mikä on näkymä?
Näkymä on sisältö, joka näytetään käyttäjälle. Periaatteessa se, mitä käyttäjä haluaa nähdä, vastaavasti sovelluksen näkymä näytetään käyttäjälle.
Näkymien ja reittien yhdistelmä auttaa jakamaan sovelluksen loogisiin näkymiin ja sitomaan erilaisia näkymiä ohjaimiin.
Sovelluksen jakaminen eri näkymiin ja reitityksen käyttäminen sovelluksen eri osien lataamiseen auttaa jakamaan sovelluksen loogisesti ja parantamaan sen hallittavuutta.
Oletetaan, että meillä on tilaussovellus, jossa asiakas voi tarkastella tilauksia ja tehdä uusia.
Alla oleva kaavio ja sitä seuraava selitys osoittavat, kuinka tämä sovellus tehdään yksisivuiseksi sovellukseksi.
Nyt sen sijaan, että sinulla olisi kaksi erilaista verkkosivua, toinen "Näytä tilaukset" ja toinen "Uusia tilauksia" varten angularjs, luot sen sijaan kaksi eri näkymää nimeltä "Näytä tilaukset" ja "Uudet tilaukset" samalle sivulle.
Meillä on myös 2 viitelinkkiä sovelluksessamme nimeltä #show ja #new.
- Joten kun sovellus siirtyy MyApp/#show-sivulle, se näyttää näkymän Näytä tilaukset, mutta samalla se ei poistu sivulta. Se vain päivittää olemassa olevan sivun osion "Näytä tilaukset" -tiedoilla. Sama koskee "Uudet tilaukset" -näkymää.
Joten tällä tavalla on vain yksinkertaisempaa jakaa sovellus eri näkymiin, jotta se olisi helpompi hallita ja tehdä muutoksia tarvittaessa.
Ja jokaisessa näkymässä on vastaava ohjain, joka ohjaa kyseisen toiminnon liiketoimintalogiikkaa.
ng-view-direktiivi AngularJS:ssä
"ngView" on ohje, joka täydentää $route-palvelua sisällyttämällä nykyisen reitin renderoidun mallin pääasettelutiedostoon (index.html).
Joka kerta kun nykyinen reitti muuttuu, näkymä sisälsi siihen muutoksia $route-palvelun konfiguraation mukaan muuttamatta itse sivua.
Me peitämme reitit myöhemmässä luvussa keskitymme toistaiseksi useiden näkymien lisäämiseen sovellukseemme.
Alla on koko vuokaavio siitä, kuinka koko prosessi toimii. Käymme läpi yksityiskohtaisesti jokaisen prosessin alla esitetyssä esimerkissämme.
Kuinka ottaa ng-view käyttöön AngularJS:ssä
Katsotaanpa esimerkkiä siitä, kuinka voimme toteuttaa ng-view:n AngularJS:ssä. Esimerkissämme esittelemme käyttäjälle kaksi vaihtoehtoa,
- Toinen on "Tapahtuman" näyttäminen ja toinen "Tapahtuman" lisääminen.
- Kun käyttäjä napsauttaa Lisää tapahtuma -linkkiä, hänelle näytetään "Lisää tapahtuma" -näkymä ja sama koskee "Näytä tapahtuma".
Noudata alla olevia ohjeita saadaksesi tämän esimerkin käyttöön.
Vaihe 1) Sisällytä kulmareittitiedosto komentosarjaviittaukseksi.
Tämä reittitiedosto on välttämätön, jotta voit hyödyntää useiden reittien ja näkymien toimintoja. Tämä tiedosto voidaan ladata angularJS-verkkosivustolta.
Vaihe 2) Lisää href- ja div-tunnisteet.
Tässä vaiheessa
- Lisää href-tunnisteita, jotka edustavat linkkejä "Uuden tapahtuman lisääminen" ja "Tapahtuman näyttäminen".
- Lisää myös div-tunniste ng-view-direktiivin kanssa, joka edustaa näkymää. Tämä mahdollistaa vastaavan näkymän lisäämisen aina, kun käyttäjä napsauttaa joko "Lisää uusi tapahtuma -linkkiä" tai "Näytä tapahtuma -linkkiä".
Vaihe 3) Lisää Angular JS:n komentosarjatunnisteeseesi seuraava koodi.
Älkäämme huolehtiko reitityksestä, toistaiseksi näemme tämän myöhemmässä luvussa. Katsotaan nyt vain näkymien koodia.
- Tämä koodin osa tarkoittaa, että kun käyttäjä napsauttaa href-tunnistetta "NewEvent", joka määritettiin aiemmin div-tunnisteessa. Se siirtyy web-sivulle add_event.html ja ottaa sieltä koodin ja syöttää sen näkymään. Toiseksi, jos haluat käsitellä tämän näkymän liiketoimintalogiikkaa, siirry kohtaan "AddEventController".
- Tämä koodin osa tarkoittaa, että kun käyttäjä napsauttaa href-tunnistetta "DisplayEvent", joka määritettiin aiemmin div-tagissa. Se siirtyy web-sivulle show_event.html, ottaa sieltä koodin ja syöttää sen näkymään. Toiseksi, jos haluat käsitellä tämän näkymän liiketoimintalogiikkaa, siirry kohtaan "ShowDisplayController".
- Tämä koodin osa tarkoittaa, että käyttäjälle näytettävä oletusnäkymä on DisplayEvent-näkymä
Vaihe 4) Lisää ohjaimia käsitelläksesi liiketoimintalogiikkaa.
Seuraavaksi on lisättävä ohjaimia, jotka käsittelevät sekä "DisplayEvent"- että "Add New Event" -toimintojen liiketoimintalogiikkaa.
Lisäämme vain yksinkertaisesti sanomamuuttujan jokaiseen ohjainobjektiin. Tämä viesti tulee näkyviin, kun sopiva näkymä näytetään käyttäjälle.
<!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>
Vaihe 5) Luo sivut nimeltä add_event.html ja show_event.html
Luo seuraavaksi sivut add_event.html ja show_event.html. Pidä sivut yksinkertaisina alla olevan kuvan mukaisesti.
Meidän tapauksessamme add_event.html-sivulla on otsikkotunniste sekä teksti "Lisää uusi tapahtuma" ja lauseke, joka näyttää viestin "Tämä on lisätä uusi tapahtuma".
Vastaavasti show_event.html-sivulla on myös otsikkotunniste, joka sisältää tekstin "Näytä tapahtuma", ja myös viestilauseke, joka näyttää viestin "Tämä on tapahtuman näyttäminen".
Sanomamuuttujan arvo syötetään näkymään liitetyn ohjaimen perusteella.
Jokaiselle sivulle aiomme lisätä viestimuuttujan, joka syötetään kustakin vastaavasta ohjaimesta.
- add_event.html
<h2>Add New Event</h2>
{{message}}
- show_event.html
<h2>Show Event</h2>
{{message}}
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
Tulosteesta voimme huomata 2 asiaa
- Osoitepalkki näyttää nykyisen näytettävän näkymän. Joten koska oletusnäkymänä on Näytä tapahtuma -näyttö, osoiterivillä näkyy "DisplayEvent" osoite.
- Tämä osio on näkymä, joka luodaan lennossa. Koska oletusnäkymä on Näytä tapahtuma -näkymä, tämä näytetään käyttäjälle.
Napsauta nyt näkyviin tulevalla sivulla olevaa Lisää uusi tapahtuma -linkkiä. Saat nyt alla olevan tulosteen.
lähtö:
- Osoitepalkki näyttää nyt, että nykyinen näkymä on nyt "Lisää uusi tapahtuma" -näkymä. Huomaa, että olet edelleen samalla hakemussivulla. Sinua ei ohjata uudelle hakemussivulle.
- Tämä osio on Näytä, ja se muuttuu nyt näyttämään HTML "Lisää uusi tapahtuma" -toiminnolle. Joten nyt tässä osiossa otsikkotunniste "Lisää uusi tapahtuma" ja teksti "Tämä on lisätä uusi tapahtuma" näytetään käyttäjälle.
