AngularJS ng-view con esempio

By: James Hartmann James Hartmann
Hours aggiornato

⚡ Riepilogo intelligente

Le viste in AngularJS permettono a una pagina di scambiare il proprio contenuto anziché dover navigare verso un'altra pagina, ed è proprio questo che rende un'applicazione a pagina singola (SPA) reattiva e immediata. La direttiva ng-view delimita l'area che ogni rotta sostituisce con il proprio template e controller.

  • 🪟 Segnaposto singolo: Un elemento che contiene i marcatori ng-view dove viene iniettato ogni template instradato, ed è consentito un solo elemento di questo tipo per pagina.
  • 🔗 Abbinamento dei percorsi: Ogni percorso specifica un templateUrl e un controller, collegando tra loro il markup e la logica per quella vista.
  • 📦 Dipendenza del modulo: Le viste richiedono angular-route.js e una dipendenza dichiarata dal modulo ngRoute.
  • 🎯 Visualizzazione predefinita: La clausola otherwise reindirizza qualsiasi indirizzo non corrispondente, ed è questo che genera la vista al primo caricamento.
  • 🌐 Server necessario: I modelli vengono scaricati tramite HTTP, quindi la pagina deve essere servita anziché aperta dal file system.
  • ⚠️ Stato del supporto: AngularJS ha raggiunto la fine del suo ciclo di vita il 31 dicembre 2021 e non riceverà più aggiornamenti di sicurezza.
Scopri di più

Direttiva ng-view di AngularJS

Siti ben noti come Gmail Utilizza il concetto di Single Page Application (SPA). Quando un utente richiede una pagina diversa, l'applicazione non effettua un cambio di pagina, ma visualizza la nuova pagina all'interno di quella esistente, dando l'impressione che l'utente non l'abbia mai abbandonata. Lo stesso risultato si ottiene in AngularJS utilizzando le viste insieme alle route.

⚠️ Avviso di assistenza: AngularJS ha raggiunto Fine della vita il 31 dicembre 2021 e non riceve ulteriori patch o correzioni di sicurezza. La direttiva seguente rimane valida per la manutenzione delle applicazioni AngularJS 1.x esistenti; nelle versioni moderne Angular L'equivalente è <router-outlet>.

Cos'è una vista?

Una vista è il contenuto mostrato all'utente. Qualunque cosa l'utente desideri vedere, viene visualizzata la vista corrispondente dell'applicazione.

La combinazione di viste e percorsi divide un'applicazione in viste logiche e lega ciascuna a un controllore, il che rende l'applicazione più gestibile.

Si consideri un'applicazione per gli ordini in cui un cliente può visualizzare gli ordini già effettuati ed effettuarne di nuovi. Il diagramma seguente mostra come questa applicazione si trasforma in una singola pagina.

Che cos'è una vista

Invece di due pagine web separate, una per "Visualizza ordini" e una per "Nuovi ordini", AngularJS utilizza due viste sulla stessa pagina, raggiungibili tramite due collegamenti di riferimento, #show and #new:

  • Navigazione verso MyApp/#show Visualizza la vista "Visualizza ordini" senza uscire dalla pagina. Viene aggiornata solo la sezione corrispondente della pagina corrente.
  • Navigazione verso MyApp/#new Fa la stessa cosa per la visualizzazione Nuovi ordini.

Suddividere un'applicazione in viste in questo modo la rende gestibile e facile da modificare, e ogni vista ha un controller corrispondente che contiene la logica di business per quella funzione.

Direttiva ng-view in AngularJS

Migliori ngView Direttive integra il $route servizio includendo il modello renderizzato del percorso corrente nel file di layout principale, normalmente index.html.

Ogni volta che il percorso corrente cambia, la vista inclusa cambia con esso in base a $route configurazione, senza ricaricare la pagina stessa. Itinerari sono trattati separatamente; qui l'attenzione si concentra sull'aggiunta di visualizzazioni multiple.

Il diagramma di flusso sottostante mostra l'intero processo, che l'esempio illustra poi passo dopo passo.

Direttiva ng-view in AngularJS

Come implementare ng-view in AngularJS

Questo esempio presenta due opzioni all'utente: visualizzare un evento e aggiungere un evento. Facendo clic Aggiungi un evento mostra la vista Aggiungi evento, e lo stesso vale per Visualizza evento.

Passo 1) Includi il file angular-route come riferimento allo script. Questo file è necessario per utilizzare più percorsi e viste ed è disponibile sul sito di AngularJS.

Includi il file angular-route

Passo 2) Aggiungi i tag href e div.

  1. Aggiungi i tag href che rimandano a "Aggiungi nuovo evento" e "Visualizza evento".
  2. Aggiungi un div che trasporta il ng-view Direttiva per contrassegnare l'area di visualizzazione. La vista corrispondente viene inserita in quell'area ogni volta che si fa clic su uno dei due link.

Aggiungi i tag href e il tag div

Passo 3) Nel tag script di AngularJS, aggiungi la configurazione di routing.

  1. Quando l'utente fa clic sul pulsante NuovoEvento collegamento, AngularJS carica add_event.html, inietta il suo markup nella vista e utilizza AddEventController per la logica aziendale.
  2. Quando l'utente fa clic sul pulsante VisualizzaEvento link, si carica show_event.html e usi ShowDisplayController.
  3. Migliori otherwise La clausola imposta la vista predefinita mostrata all'utente, che in questo caso è DisplayEvent.

Configurazione del percorso

Passo 4) Aggiungi dei controller per elaborare la logica di business per entrambe le funzioni. Ciascuno imposta semplicemente un messaggio sul proprio oggetto scope, che verrà visualizzato quando viene mostrata la vista corrispondente.

Aggiungi controller

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.8.3/angular-route.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 to display an Event";
    });
</script>

</body>
</html>

⚠️ Tre correzioni all'inserzione originale. Innanzitutto, i collegamenti sono letti #!NewEvent senza barra mentre i percorsi sono dichiarati come /NewEvent, quindi non c'era corrispondenza. Da AngularJS 1.6 il prefisso hash predefinito è !, che rende corretto l'indirizzo #!/NewEvent — una barra dopo il punto esclamativo. Secondo, ShowDisplayController imposta il messaggio su "Questo è visualizzare un evento", manca la parola a che il testo circostante cita. Terzo, lib/bootstrap.js È stato caricato da un percorso relativo che non porta da nessuna parte e non viene mai utilizzato, quindi è stato rimosso.

ARTICOLI CORRELATI

Passo 5) Crea le pagine add_event.html and show_event.htmlCiascuno contiene un'intestazione e un'espressione che visualizza il messaggio iniettato dal suo controller.

  • aggiungi_evento.html

aggiungi_evento.html

<h2>Add New Event</h2>

{{message}}
  • mostra_evento.html

mostra_evento.html

<h2>Show Event</h2>

{{message}}

Se il codice viene eseguito correttamente, nel browser viene visualizzato il seguente output.

Produzione:

output di ng-view

output di ng-view

Errori comuni di ng-view e come risolverli

Quasi tutti gli errori di ng-view derivano dal cablaggio del modulo, dal formato dell'indirizzo o dal modo in cui la pagina viene servita, piuttosto che dalla direttiva stessa.

  • L'area di visualizzazione rimane vuota: , il ngRoute il modulo non è stato elencato come dipendenza, oppure angular-route.js non è stato caricato. Entrambi sono richiesti e lo script deve venire dopo angular.min.js.
  • I link cambiano l'indirizzo ma non viene visualizzato nulla: L'href non corrisponde al percorso. Da AngularJS 1.6 l'indirizzo deve #!/Route; codice più vecchio scritto per la versione 1.5 utilizzato #/Route.
  • I modelli non si caricano e si verifica un errore CORS: La pagina è stata aperta direttamente dal disco. Servila tramite HTTP, perché templateUrl viene recuperato tramite una richiesta AJAX, il protocollo del file blocca.
  • Viene visualizzata solo l'ultima immagine: Più di un elemento contiene ng-view. AngularJS rispetta una sola area di visualizzazione per pagina.
  • Al primo caricamento non viene visualizzato nulla: no otherwise La clausola è configurata in modo che un indirizzo vuoto non corrisponda ad alcuna rotta.

DOMANDE FREQUENTI

No. ngRoute supporta una sola area di visualizzazione per pagina. Per visualizzare più aree con nome contemporaneamente, è necessario utilizzare la libreria ui-router, che fornisce ui-view e supporta viste annidate e affiancate.

Abilita la modalità HTML5 con $locationProvider.html5Mode(true) e aggiungere un tag base. Il server deve quindi riscrivere i percorsi sconosciuti in index.html, altrimenti un aggiornamento restituisce un errore 404.

In gran parte. AI Gli strumenti convertono le tabelle di routing in array di Angular Routes e sostituiscono ng-view con router-outlet. I controller devono comunque essere riscritti manualmente come componenti.

Gli assistenti basati sull'IA verificano rapidamente i tre problemi più comuni: una dipendenza ngRoute mancante, un prefisso hash che non corrisponde al percorso e un percorso del template che il browser non riesce a recuperare.

Sì. Aggiungi un resolve blocco al percorso. AngularJS attende che queste promesse siano stabilite prima di istanziare il controller, evitando così che una vista lampeggi vuota in attesa dei dati.

Riassumi questo post con: