AngularJS ng-view med Eksempel: Hvordan implementere View

I dag ville alle ha hørt om "Single Page Applications". Mange av de kjente nettstedene som Gmail bruker konseptet Single Page Applications (SPA-er).

SPA-er er konseptet der når en bruker ber om en annen side, vil applikasjonen ikke navigere til den siden, men i stedet vise visningen av den nye siden på selve den eksisterende siden.

Det gir en følelse til brukeren at han aldri forlot siden i utgangspunktet. Det samme kan oppnås i Angular ved hjelp av Views i forbindelse med Routes.

I denne opplæringen vil du lære-

Hva er en visning?

En visning er innholdet som vises til brukeren. I utgangspunktet hva brukeren ønsker å se, følgelig vil denne visningen av applikasjonen bli vist til brukeren.

Kombinasjonen av visninger og ruter hjelper en til å dele en applikasjon i logiske visninger og binde forskjellige visninger til kontrollere.

Å dele opp applikasjonen i forskjellige visninger og bruke Ruting for å laste inn forskjellige deler av applikasjonen hjelper deg med å dele applikasjonen logisk og gjøre den mer håndterbar.

La oss anta at vi har en bestillingsapplikasjon, der en kunde kan se bestillinger og legge inn nye.

Diagrammet nedenfor og den påfølgende forklaringen viser hvordan du lager denne applikasjonen som en enkeltsideapplikasjon.

Hva er en visning

Nå, i stedet for å ha to forskjellige nettsider, en for "Se bestillinger" og en annen for "Nye bestillinger", i AngularJS, vil du i stedet opprette to forskjellige visninger kalt "Se bestillinger" og "Nye bestillinger" på samme side.

Vi vil også ha 2 referanselenker i applikasjonen vår kalt #show og #new.

  • Så når applikasjonen går til MyApp/#show, vil den vise visningen av View Orders, samtidig som den ikke forlater siden. Det vil bare oppdatere delen av den eksisterende siden med informasjonen om "Se bestillinger". Det samme gjelder "New Orders"-visningen.

Så på denne måten blir det bare enklere å dele applikasjonen i forskjellige visninger for å gjøre det mer håndterbart og enkelt å gjøre endringer når det er nødvendig.

Og hver visning vil ha en tilsvarende kontroller for å kontrollere forretningslogikken for den funksjonaliteten.

ng-view-direktivet i AngularJS

"ngView" er et direktiv som utfyller $route-tjenesten ved å inkludere den gjengitte malen for gjeldende rute i hovedlayout-filen (index.html).

Hver gang gjeldende rute endres, inkluderte visningen endringer i den i henhold til konfigurasjonen av $route-tjenesten uten å endre selve siden.

Vi skal dekke ruter i et senere kapittel, for nå, vil vi fokusere på å legge til flere visninger i applikasjonen vår.

Nedenfor er hele flytskjemaet over hvordan hele prosessen fungerer. Vi vil gå gjennom i detalj for hver prosess i eksemplet vårt vist nedenfor.

ng-view-direktivet i AngularJS

Hvordan implementere ng-view i AngularJS

La oss ta en titt på et eksempel på hvordan vi kan implementere ng-view i AngularJS. I vårt eksempel skal vi presentere to alternativer for brukeren,

  • Den ene er å vise en "Event", og den andre er å legge til en "Event".
  • Når brukeren klikker på koblingen Legg til en hendelse, vil de se visningen for "Legg til hendelse" og det samme gjelder for "Vis hendelse."

Følg trinnene nedenfor for å få dette eksemplet på plass.

Trinn 1) Ta med angular-rute-filen som en skriptreferanse.

Denne rutefilen er nødvendig for å kunne bruke funksjonaliteten ved å ha flere ruter og utsikter. Denne filen kan lastes ned fra nettstedet angularJS.

Implementer ng-view i AngularJS

Trinn 2) Legg til href-tagger og div-tagger.

I dette trinnet

  1. Legg til href-tagger som vil representere lenker til "Legge til en ny hendelse" og "Vise en hendelse".
  2. Legg også til en div-tag med ng-view-direktivet som vil representere visningen. Dette vil tillate at den tilsvarende visningen injiseres hver gang brukeren klikker på enten "Legg til ny hendelse-kobling" eller "Vis hendelse-lenke."

Implementer ng-view i AngularJS

Trinn 3) I skriptkoden for Angular JS legger du til følgende kode.

La oss ikke bekymre oss for rutingen, for nå vil vi se dette i et senere kapittel. La oss bare se koden for visningene for nå.

  1. Denne delen av koden betyr at når brukeren klikker på href-taggen "NewEvent" som ble definert i div-taggen tidligere. Den vil gå til nettsiden add_event.html, og vil ta koden derfra og injisere den i visningen. For det andre for å behandle forretningslogikken for denne visningen, gå til "AddEventController".
  2. Denne delen av koden betyr at når brukeren klikker på href-taggen "DisplayEvent" som ble definert i div-taggen tidligere. Den vil gå til nettsiden show_event.html, ta koden derfra og injisere den i visningen. For det andre, for å behandle forretningslogikken for denne visningen, gå til "ShowDisplayController".
  3. Denne delen av koden betyr at standardvisningen som vises til brukeren, er DisplayEvent-visningen

    Implementer ng-view i AngularJS

Trinn 4) Legg til kontrollere for å behandle forretningslogikken.

Neste er å legge til kontrollere for å behandle forretningslogikken for både "DisplayEvent" og "Add New Event" funksjonalitet.

Vi legger bare til en meldingsvariabel til hvert scope-objekt for hver kontroller. Denne meldingen vises når den aktuelle visningen vises til brukeren.

Implementer ng-view i AngularJS

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

Trinn 5) Opprett sider kalt add_event.html og show_event.html

Deretter oppretter du sider kalt add_event.html og show_event.html. Hold sidene enkle, som vist nedenfor.

I vårt tilfelle vil siden add_event.html ha en header-tag sammen med teksten "Legg til ny hendelse" og ha et uttrykk for å vise meldingen "Dette er å legge til en ny hendelse".

Tilsvarende vil siden show_event.html også ha en overskriftskode for å holde teksten "Vis hendelse" og også ha et meldingsuttrykk for å vise meldingen "Dette er for å vise en hendelse."

Verdien av meldingsvariabelen vil bli injisert basert på kontrolleren som er knyttet til visningen.

For hver side skal vi legge til meldingsvariabelen, som vil bli injisert fra hver respektive kontroller.

  • add_event.html

Implementer ng-view i AngularJS

<h2>Add New Event</h2>

{{message}}
  • show_event.html

Implementer ng-view i AngularJS

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

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Implementer ng-view i AngularJS

Fra utgangen kan vi legge merke til 2 ting

  1. Adresselinjen vil reflektere hva som er den gjeldende visningen som vises. Så siden standardvisningen er å vise skjermbildet Vis hendelse, viser adresselinjen adressen til "Vis hendelse".
  2. Denne delen er visningen, som lages med en gang. Siden standardvisningen er Vis hendelse, er dette det som vises for brukeren.

Klikk nå på koblingen Legg til ny hendelse på siden som vises. Du vil nå få utgangen nedenfor.

Implementer ng-view i AngularJS

Utgang:

  1. Adresselinjen vil nå gjenspeile at gjeldende visning nå er visningen "Legg til ny hendelse". Legg merke til at du fortsatt vil være på samme søknadsside. Du vil ikke bli sendt til en ny søknadsside.
  2. Denne delen er View, og den vil nå endres til å vise HTML for funksjonen "Legg til ny hendelse". Så nå i denne delen vises overskriftskoden "Legg til ny hendelse" og teksten "Dette er å legge til en ny hendelse" for brukeren.