AngularJS ng-view con esempio: come implementare View

Al giorno d'oggi, tutti avranno sentito parlare delle "Single Page Applications". Molti dei siti web più noti, come Gmail, utilizzano il concetto di Single Page Applications (SPA).

SPA è il concetto in base al quale quando un utente richiede una pagina diversa, l'applicazione non accederà a quella pagina ma visualizzerà invece la visualizzazione della nuova pagina all'interno della pagina esistente stessa.

Dà all'utente la sensazione di non aver mai lasciato la pagina in primo luogo. Lo stesso può essere ottenuto in Angular con l'aiuto di Views insieme a Routes.

In questo tutorial imparerai-

• Cos'è una vista?
• Direttiva ng-view in AngularJS
• Come implementare ng-view in AngularJS con l'esempio

Cos'è una vista?

Una vista è il contenuto che viene mostrato all'utente. Fondamentalmente ciò che l'utente vuole vedere, di conseguenza all'utente verrà mostrata quella vista dell'applicazione.

La combinazione di visualizzazioni e percorsi aiuta a dividere un'applicazione in visualizzazioni logiche e ad associare visualizzazioni diverse ai controller.

Dividere l'applicazione in diverse visualizzazioni e utilizzare il routing per caricare parti diverse dell'applicazione aiuta a dividere logicamente l'applicazione e renderla più gestibile.

Supponiamo di avere un'applicazione di ordinazione, in cui un cliente può visualizzare gli ordini ed effettuarne di nuovi.

Il diagramma seguente e la successiva spiegazione dimostrano come realizzare questa applicazione come applicazione a pagina singola.

Ora, invece di avere due pagine web diverse, una per "Visualizza ordini" e un'altra per "Nuovi ordini", in AngularJS, creerai invece due visualizzazioni diverse denominate "Visualizza ordini" e "Nuovi ordini" nella stessa pagina.

Avremo anche 2 collegamenti di riferimento nella nostra applicazione chiamati #mostra e #nuovo.

• Quindi quando l'applicazione va su MyApp/#show, mostrerà la vista Visualizza ordini, allo stesso tempo non lascerà la pagina. Aggiornerà semplicemente la sezione della pagina esistente con le informazioni di "Visualizza ordini". Lo stesso vale per la visualizzazione “Nuovi Ordini”.

In questo modo diventa quindi più semplice separare l'applicazione in diverse visualizzazioni per renderla più gestibile e facile apportare modifiche quando necessario.

E ogni vista avrà un controller corrispondente per controllare la logica aziendale per quella funzionalità.

Direttiva ng-view in AngularJS

"ngView" è una direttiva che integra il servizio $route includendo il modello renderizzato del percorso corrente nel file di layout principale (index.html).

Ogni volta che il percorso corrente cambia, la visualizzazione includeva le modifiche in base alla configurazione del servizio $route senza modificare la pagina stessa.

Copriremo percorsi in un capitolo successivo, per ora, ci concentreremo sull'aggiunta di più viste alla nostra applicazione.

Di seguito è riportato l'intero diagramma di flusso di come funziona l'intero processo. Esamineremo in dettaglio ogni processo nel nostro esempio mostrato di seguito.

Come implementare ng-view in AngularJS

Diamo un'occhiata ad un esempio di come possiamo implementare ng-view in AngularJS. Nel nostro esempio, presenteremo due opzioni all'utente,

• Uno è visualizzare un “Evento” e l'altro è aggiungere un “Evento”.
• Quando l'utente fa clic sul collegamento Aggiungi un evento, gli verrà mostrata la vista "Aggiungi evento" e lo stesso vale per "Visualizza evento".

Si prega di seguire i passaggi seguenti per mettere in atto questo esempio.

Passo 1) Includere il file angular-route come riferimento allo script.

Questo file di percorso è necessario per utilizzare le funzionalità di avere più percorsi e visualizzazioni. Questo file può essere scaricato dal sito Web angularJS.

Passo 2) Aggiungi tag href e tag div.

In questa fase,

1. Aggiungi tag href che rappresenteranno i collegamenti ad "Aggiunta di un nuovo evento" e "Visualizzazione di un evento".
2. Inoltre, aggiungi un tag div con la direttiva ng-view che rappresenterà la vista. Ciò consentirà l'inserimento della vista corrispondente ogni volta che l'utente fa clic sul collegamento "Aggiungi nuovo evento" o sul collegamento "Visualizza evento".

Passo 3) Nel tag script per Angular JS, aggiungi il seguente codice.

Non preoccupiamoci del routing, per ora, lo vedremo in un capitolo successivo. Per ora, vediamo solo il codice per le viste.

1. Questa sezione di codice significa che quando l'utente fa clic sul tag href "NewEvent" che è stato definito in precedenza nel tag div. Andrà alla pagina web add_event.html e da lì prenderà il codice e lo inserirà nella vista. In secondo luogo, per elaborare la logica aziendale per questa vista, vai su "AddEventController".
2. Questa sezione di codice indica che quando l'utente fa clic sul tag href "DisplayEvent" definito in precedenza nel tag div. Andrà alla pagina web show_event.html, prenderà il codice da lì e lo inserirà nella vista. In secondo luogo, per elaborare la logica aziendale per questa visualizzazione, andare su "ShowDisplayController".
3. Questa sezione di codice indica che la visualizzazione predefinita mostrata all'utente è la visualizzazione DisplayEvent

   

Passo 4) Aggiungi controller per elaborare la logica aziendale.

Il prossimo passo è aggiungere controller per elaborare la logica aziendale sia per la funzionalità "DisplayEvent" che per "Aggiungi nuovo evento".

Stiamo semplicemente aggiungendo una variabile messaggio a ciascun oggetto ambito per ciascun controller. Questo messaggio verrà visualizzato quando all'utente viene mostrata la vista appropriata.

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

Passo 5) Crea pagine chiamate add_event.html e show_event.html

Successivamente, crea pagine chiamate add_event.html e show_event.html. Mantieni le pagine semplici, come mostrato di seguito.

Nel nostro caso, la pagina add_event.html avrà un tag di intestazione insieme al testo "Aggiungi nuovo evento" e avrà un'espressione per visualizzare il messaggio "Questo è per aggiungere un nuovo evento".

Allo stesso modo, la pagina show_event.html avrà anche un tag di intestazione per contenere il testo "Mostra evento" e avrà anche un'espressione di messaggio per visualizzare il messaggio "Questo è per visualizzare un evento".

Il valore della variabile del messaggio verrà inserito in base al controller collegato alla vista.

Per ogni pagina aggiungeremo la variabile message, che verrà iniettata da ciascun rispettivo controller.

• aggiungi_evento.html

<h2>Add New Event</h2>

{{message}}

• mostra_evento.html

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

Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.

Produzione:

Dall'output possiamo notare 2 cose

1. La barra degli indirizzi rifletterà la vista corrente visualizzata. Pertanto, poiché la visualizzazione predefinita è mostrare la schermata Mostra evento, la barra degli indirizzi mostra l'indirizzo per "DisplayEvent".
2. Questa sezione è la vista, che viene creata al volo. Poiché la visualizzazione predefinita è Mostra evento, questo è ciò che viene visualizzato all'utente.

Ora clicca sul collegamento Aggiungi nuovo evento nella pagina visualizzata. Ora otterrai l'output seguente.

Produzione:

1. La barra degli indirizzi ora rifletterà che la vista corrente è ora la vista "Aggiungi nuovo evento". Tieni presente che ti troverai ancora nella stessa pagina dell'applicazione. Non verrai indirizzato a una nuova pagina di candidatura.
2. Questa sezione è la vista e ora cambierà per mostrare il file HTML per la funzionalità “Aggiungi nuovo evento”. Quindi ora in questa sezione vengono visualizzati all'utente il tag di intestazione "Aggiungi nuovo evento" e il testo "Questo serve per aggiungere un nuovo evento".