Share
Le applicazioni a pagina singola consentono di aggiornare una determinata parte di una pagina Web instradando qualsiasi contenuto archiviato in un file .html separato. In tal modo, non si ricarica la pagina principale.
AngularJS fornisce un modulo chiamato ngRoute esattamente per questo scopo.
Un altro utile modulo di AngularJS è ngAnimate, che facilita l'animazione con alcune classi CSS.
In questo tutorial cercherò di spiegare accuratamente ogni fase, anche se hai ancora bisogno di una conoscenza di base di AngularJS per poter seguire.
Questo file index.html sarà la nostra pagina principale in cui abbiamo sia il contenuto fisso che quello indirizzato.
Inizierò con un documento HTML di base e includerò tutte le librerie necessarie insieme al nostro foglio di stile personalizzato denominato style.css e un file JavaScript angularApp.js.
Ora aggiungo due DIV con nomi id di fixedContent e routedContent dentro a mainWrapper DIV.
routedContent è anche racchiuso all'interno di un altro DIV denominato involucro. Questo perché il routedContent dovrebbe essere posizionata in modo assoluto rispetto a un DIV principale a causa del fatto che durante l'animazione del routing, due diversi contenuti si scontrano tra loro.
Come indicano i nomi di identificazione, fixedContent sarà il contenuto statico della nostra pagina principale, e routedContent cambierà dinamicamente nell'interazione dell'utente.
Per definire un'app Angolare nel nostro file HTML, dobbiamo utilizzare il ng-app direttiva. Poiché l'intera pagina sarà un'app Angolare, dobbiamo assegnare questa direttiva a mainWrapper DIV.
Abbiamo anche bisogno del ng-view direttiva, che indica al DIV che è assegnato per visualizzare il contenuto della pagina indirizzata.
Ora il nostro file index.html ha questo aspetto:
Abbiamo bisogno di un menu di navigazione per indirizzare diversi contenuti ng-view.
Useremo il ul e un elementi per creare un semplice menu orizzontale. Di seguito puoi vedere lo snippet HTML per la struttura del menu.
Pagina1 Pagina2 Pagina3 Pagina4
Di default, il ng-route il modulo usa il ! prefisso. Tuttavia, qui usiamo solo # di fronte alle nostre pagine per essere indirizzati. Questo è fatto con il hashPrefix attributo utilizzato nella configurazione, che spiegherò più avanti nella relativa sezione. Per ora, prendilo così com'è.
Il nostro file HTML finale è il seguente:
Pagina1 Pagina2 Pagina3 Pagina4
Poiché questo tutorial si concentra su AngularJS, non ho intenzione di dettagliare lo stile CSS. Se hai conoscenze CSS precedenti, dai uno stile alla pagina come preferisci. Altrimenti, puoi usare lo stile che fornisco di seguito.
html, body margin: 0; padding: 0; #mainWrapper display: flex; direzione della flessione: colonna; align-items: center; margin-top: 50px #fixedContent margin-bottom: 50px; #wrapper width: 350px; #routedContent width: 350px; posizione: assoluta; ul display: flex; justify-content: space-between; larghezza: 350 px; margine: 0; padding: 0; a text-decoration: none; colore: #FFFFFF; font-family: Arial; stile elenco: nessuno; background-color: #cecece; imbottitura: 7px 10px; border-radius: 2px;
Ogni pagina che verrà indirizzata a DIV con il ng-view la direttiva all'interno del file HTML principale può avere una struttura HTML e uno stile CSS univoci.
Iniziamo con page1.html.
Dal momento che vogliamo uno stile specifico per ogni pagina, abbiamo bisogno di file CSS separati per ogni pagina. Pertanto, creiamo anche un file chiamato page1.css, che conterrà le regole di stile di page1.html.
La struttura HTML di base per page1 è la seguente:
Pagina 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed fa eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
In cima, ci siamo collegati al file CSS che sarà lo styling della pagina e abbiamo dichiarato un DIV con nome id di Pagina 1, dove verrà posto l'intero contenuto.
Lo terrò semplice, ma sta a te decidere come strutturare il file HTML. Ricorda che il tuo contenitore sarà sempre il DIV a cui appartiene ng-view la direttiva è assegnata. Quindi tutto nelle tue pagine indirizzate sarà relativo a quel DIV.
Lo stile di page1.html è dato qui sotto:
# page1 font-family: Arial; h1 color: # ffa42a;
Le altre tre pagine possono essere completamente diverse, ma per semplicità sto usando lo stesso modello per ogni pagina HTML e file CSS leggermente diversi (diversi h1 text-colors).
Pagina 2
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in un voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
# page2 font-family: Arial; h1 color: cornflowerblue;
Pagina 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed fa eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
# page3 font-family: Arial; h1 color: # b2ce6f;
Pagina 4
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in un voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
# page4 font-family: Arial; h1 color: # ff4517;
Finora abbiamo completato tutti i file HTML e CSS necessari. Ora è il momento di scrivere il codice JavaScript che controlla il routing e l'animazione.
Dal nostro ng-app la direttiva è nominata MainApp, usiamo questo id nella funzione module. Dobbiamo anche includere il ngRoute e ngAnimate dipendenze.
mainAngular = angular.module ('mainApp', ['ngRoute', 'ngAnimate']);
Ora abbiamo accesso a $ routeProvider e $ locationProvider.
Useremo il $ routeProvider gestire i percorsi e $ locationProvider cambiare il hashPrefix, che è impostato su ! per impostazione predefinita.
Noi usiamo .when ('/ page1', templateUrl: 'page1.html') per definire la pagina da indirizzare quando Pagina 1 è cliccato nel nostro file HTML principale.
Ripetiamo la stessa riga di codice per ogni pagina da indirizzare. Alla fine, usiamo .in caso contrario (redirectTo: '/ page1'), che gestisce nomi di pagine inattese. Se provi a visitare un nome di pagina non definito, ad esempio Pagina5, verrai reindirizzato a Pagina 1.
Il codice JavaScript completo è qui sotto:
Accentsconagua
var mainAngular = angular.module ('mainApp', ['ngRoute', 'ngAnimate']); mainAngular.config (function ($ routeProvider, $ locationProvider) $ routeProvider .when ('/ page1', templateUrl: 'page1.html') .when ('/ page2', templateUrl: 'page2.html' ) .when ('/ page3', templateUrl: 'page3.html') .when ('/ page4', templateUrl: 'page4.html') .otherwise (redirectTo: '/ page1'); $ locationProvider.hashPrefix ("););Nota extra:Se desideri aggiungere uno specifico ng-controllore direttiva per il routing di tutte le pagine, è possibile gestirlo all'interno di $ routeProvider.
Un esempio per Pagina 1:
.quando ('/ page1', templateUrl: 'page1.html', controller: 'page1Controller')Alla fine, la nostra pagina dovrebbe assomigliare a questa e dovresti essere in grado di navigare tra le pagine senza animazioni di transizione.
Ora è il momento di animare le transizioni del percorso.
Per scopi di animazione, AngularJS ha classi CSS integrate grazie alla dipendenza da ngAnimate.
Quelle classi che useremo sono:
ng-enter: Gli stili CSS iniziali per l'animazione di invio.ng-entrare-attiva: Gli stili CSS di finitura per l'animazione di invio.ng-ferie: Gli stili CSS iniziali per l'animazione di congedo.ng-ferie-attiva: Gli stili CSS di finitura per l'animazione di congedo.Quindi il contenuto indirizzato che sta entrando nella pagina principale ha una transizione da ng-enter a ng-entrare-attiva. Allo stesso modo, il contenuto che esce dalla pagina principale ha una transizione da ng-ferie a ng-ferie-attiva.
Dobbiamo allegare le lezioni sopra citate al nostro routedContent classe.
Di seguito è riportata una transizione di esempio. Puoi progettare le tue animazioni di transizione o usarne una dentro la tua style.css file.
# routedContent.ng-enter transform: translateX (-500px); opacità: 0; -webkit-transition: all 0.35s cubic-bezier (1, .01,0, .99); -moz-transition: all 0.35s cubic-bezier (1, .01,0, .99); -ms-transition: all 0.35s cubico-bezier (1, .01,0, .99); -o-transizione: tutto 0.35s cubico-bezier (1, .01,0, .99); transizione: tutto 0.35s cubico-bezier (1, .01,0, .99); # routedContent.ng-enter-active transform: translateX (0px); opacità: 1; # routedContent.ng-leave transform: translateX (0); opacità: 1; -webkit-transition: all 0.35s cubic-bezier (1, .01,0, .99); -moz-transition: all 0.35s cubic-bezier (1, .01,0, .99); -ms-transition: all 0.35s cubico-bezier (1, .01,0, .99); -o-transizione: tutto 0.35s cubico-bezier (1, .01,0, .99); transizione: tutto 0.35s cubico-bezier (1, .01,0, .99); # routedContent.ng-leave-active transform: translateX (500px); opacità: 0;
Di seguito è riportato il risultato finale del progetto su Plunker.
In questo tutorial, abbiamo spiegato come creare applicazioni SPA con ng-route modulo di AngularJS, e quindi abbiamo animato le transizioni attraverso le classi CSS di ng-animate.
Utilizzando solo quattro classi CSS fornite da ng-animate, puoi realizzare varie animazioni. Puoi sempre aggiungere classi extra per avere più controllo sulle animazioni di transizione. Ad esempio, puoi rendere le tue transizioni di pagina sensibili alla direzione.
Ho anche detto che allegando il controllore direttiva per ogni pagina specifica all'interno di $ routeProvider, puoi ottenere un controllo extra su ogni pagina.
JavaScript, con le sue librerie come Angular, è diventato una delle lingue di fatto del lavoro sul web. Non è senza le sue curve di apprendimento, e ci sono un sacco di quadri e librerie per tenerti occupato, pure. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione su Envato Market.
Spero che questo tutorial ti abbia dato un'idea generale di come utilizzare il ng-route e ng-animate moduli insieme.
