Al giorno d'oggi, tutti avrebbero sentito parlare delle "Applicazioni a pagina singola". Molti dei noti siti Web come Gmail utilizzano il concetto di applicazioni a pagina singola (SPA).
SPA è il concetto in cui quando un utente richiede una pagina diversa, l'applicazione non naviga in quella pagina ma visualizza invece la vista della nuova pagina all'interno della pagina esistente stessa.
Dà la sensazione all'utente di non aver mai lasciato la pagina in primo luogo. Lo stesso può essere ottenuto in Angular con l'aiuto delle viste in combinazione con i percorsi.
In questo tutorial imparerai-
- Cos'è una vista?
- Direttiva ng-view in AngularJS
- Esempio di ng-view
Cos'è una vista?
Una vista è il contenuto mostrato all'utente. Fondamentalmente ciò che l'utente vuole vedere, di conseguenza verrà mostrata all'utente quella vista dell'applicazione.
La combinazione di viste e percorsi aiuta a dividere un'applicazione in viste logiche e ad associare viste diverse ai controller.
Dividere l'applicazione in viste diverse e utilizzare Routing per caricare parti diverse dell'applicazione aiuta a dividere logicamente l'applicazione ea renderla più gestibile.
Supponiamo di avere un'applicazione per gli ordini, in cui un cliente può visualizzare gli ordini e inserirne di nuovi.
Il diagramma sottostante e la successiva spiegazione dimostrano come rendere questa applicazione come un'applicazione a pagina singola.
Ora, invece di avere due diverse pagine web, una per "Visualizza ordini" e un'altra per "Nuovi ordini", in AngularJS, creeresti invece due diverse viste chiamate "Visualizza ordini" e "Nuovi ordini" nella stessa pagina.
Avremo anche 2 link di riferimento nella nostra applicazione chiamati #show e #new.
- Quindi quando l'applicazione va a MyApp / # show, mostrerà la visualizzazione degli ordini di visualizzazione, allo stesso tempo non lascerà la pagina. Si aggiornerà semplicemente la sezione della pagina esistente con le informazioni di "Visualizza ordini". Lo stesso vale per la visualizzazione "Nuovi ordini".
Quindi in questo modo diventa più semplice separare l'applicazione in viste diverse per renderla più gestibile e facile apportare modifiche quando necessario.
E ogni vista avrà un controller corrispondente per controllare la logica di business per quella funzionalità.
Direttiva ng-view in AngularJS
"NgView" è una direttiva che completa il servizio $ route includendo il modello renderizzato della rotta corrente nel file di layout principale (index.html).
Ogni volta che il percorso corrente cambia, la visualizzazione includeva modifiche in base alla configurazione del servizio $ route senza cambiare la pagina stessa.
Tratteremo le rotte in un capitolo successivo, per ora ci concentreremo sull'aggiunta di più visualizzazioni 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.
Esempio di ng-view
Diamo un'occhiata a un esempio di come possiamo implementare le viste.
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, verrà mostrata la visualizzazione per "Aggiungi evento" e lo stesso vale per "Visualizza evento".
Si prega di seguire i passaggi seguenti per ottenere questo esempio.
Passaggio 1) Includere il file del percorso angolare come riferimento allo script.
Questo file di rotte è necessario per utilizzare le funzionalità di avere più rotte e viste. Questo file può essere scaricato dal sito Web angularJS.
Passaggio 2) In questo passaggio,
- Aggiungi tag href che rappresenteranno collegamenti a "Aggiunta di un nuovo evento" e "Visualizzazione di un evento".
- Inoltre, aggiungi un tag div con la direttiva ng-view che rappresenterà la vista.
Ciò consentirà l'inserimento della visualizzazione corrispondente ogni volta che l'utente fa clic sul collegamento "Aggiungi nuovo evento" o sul collegamento "Visualizza evento".
Passaggio 3) Nel tag dello 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 visualizzazioni.
- Questa sezione di codice indica che quando l'utente fa clic sul tag href "NewEvent" definito in precedenza nel tag div. Andrà alla pagina web add_event.html, da lì prenderà il codice e lo inserirà nella vista. In secondo luogo, per elaborare la logica di business per questa vista, andare su "AddEventController".
- 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 di business per questa vista, vai a "ShowDisplayController".
- Questa sezione di codice indica che la visualizzazione predefinita mostrata all'utente è la visualizzazione DisplayEvent
Passaggio 4) Il passaggio successivo consiste nell'aggiungere controller per elaborare la logica aziendale sia per la funzionalità "DisplayEvent" che "Aggiungi nuovo evento".
Stiamo semplicemente aggiungendo una variabile di messaggio a ogni oggetto scope per ogni controller. Questo messaggio verrà visualizzato quando viene mostrata all'utente la vista appropriata.
Event Registration Guru99 Global Event
Passaggio 5) 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 allegato alla visualizzazione.
Per ogni pagina, aggiungeremo la variabile del messaggio, che verrà iniettata da ogni rispettivo controller.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'output possiamo notare 2 cose
- La barra degli indirizzi rifletterà qual è la visualizzazione corrente visualizzata. Quindi, poiché la visualizzazione predefinita mostra la schermata Mostra evento, la barra degli indirizzi mostra l'indirizzo per "DisplayEvent".
- Questa sezione è la vista, che viene creata al volo. Poiché la visualizzazione predefinita è Mostra evento, questo è ciò che viene mostrato all'utente.
Ora fai clic sul collegamento Aggiungi nuovo evento nella pagina visualizzata. Ora otterrai l'output di seguito.
Produzione:
- La barra degli indirizzi ora rifletterà che la visualizzazione corrente è ora la visualizzazione "Aggiungi nuovo evento". Nota che sarai ancora sulla stessa pagina dell'applicazione. Non verrai indirizzato a una nuova pagina dell'applicazione.
- Questa sezione è la visualizzazione e ora cambierà per mostrare l'HTML per la funzionalità "Aggiungi nuovo evento". Quindi ora in questa sezione il tag di intestazione "Aggiungi nuovo evento" e il testo "Questo è per aggiungere un nuovo evento" vengono visualizzati all'utente.