Routing AngularJS con parametri: esempio di applicazione a pagina singola

Prima di iniziare con il routing, diamo solo una rapida panoramica sulle applicazioni a pagina singola.

Che cosa sono le applicazioni a pagina singola?

Le applicazioni a pagina singola o (SPA) sono applicazioni Web che caricano una singola pagina HTML e aggiornano dinamicamente la pagina in base all'interazione dell'utente con l'applicazione Web.

Cos'è il routing in AngularJS?

In AngularJS, il routing è ciò che ti consente di creare applicazioni a pagina singola.

• Le rotte AngularJS ti consentono di creare URL diversi per contenuti diversi nella tua applicazione.
• Le rotte AngularJS consentono di mostrare più contenuti a seconda della rotta scelta.
• Un percorso è specificato nell'URL dopo il segno #.

Facciamo un esempio di un sito ospitato tramite l'URL http://example.com/index.html .

In questa pagina ospiterai la pagina principale della tua applicazione. Supponiamo che l'applicazione stesse organizzando un Evento e si volesse vedere quali sono i vari eventi in mostra, o si volesse vedere i dettagli di un particolare evento o cancellare un evento. In un'applicazione a pagina singola, quando il routing è abilitato, tutte queste funzionalità saranno disponibili tramite i seguenti collegamenti

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

Il simbolo # verrebbe utilizzato insieme ai diversi percorsi (ShowEvent, DisplayEvent e DeleteEvent).

• Quindi, se l'utente volesse vedere tutti gli eventi, verrebbe indirizzato al link ( http://example.com/index.html#ShowEvent ), altrimenti
• Se volessero vedere solo un evento particolare, verrebbero reindirizzati al link ( http://example.com/index.html#DisplayEvent ) o
• Se volevano eliminare un evento, sarebbero stati indirizzati al collegamento http://example.com/index.html#DeleteEvent .

Nota che l'URL principale rimane lo stesso.

In questo tutorial imparerai-

• Aggiunta di un percorso angolare ($ routeProvider)
• Creazione di una rotta predefinita
• Accesso ai parametri dal percorso
• Utilizzo del servizio Angular $ route
• Abilitazione del routing HTML5

Aggiunta di un percorso angolare ($ routeProvider)

Quindi, come discusso in precedenza, le rotte in AngularJS vengono utilizzate per indirizzare l'utente a una vista diversa della tua applicazione. E questo instradamento viene eseguito sulla stessa pagina HTML in modo che l'utente abbia l'esperienza di non aver lasciato la pagina.

Per implementare il routing, i seguenti passaggi principali devono essere implementati nella vostra applicazione in un ordine specifico.

1. Riferimento a angular-route.js. Questo è un file JavaScript sviluppato da Google che ha tutte le funzionalità di routing. Deve essere inserito nell'applicazione in modo che possa fare riferimento a tutti i moduli principali necessari per il routing.

2. Il prossimo passo importante è aggiungere una dipendenza al modulo ngRoute dall'interno dell'applicazione. Questa dipendenza è necessaria in modo che la funzionalità di routing possa essere utilizzata all'interno dell'applicazione. Se questa dipendenza non viene aggiunta, non sarà possibile utilizzare il routing all'interno dell'applicazione angular.JS.

   Di seguito è riportata la sintassi generale di questa affermazione. Questa è solo una normale dichiarazione di un modulo con l'inclusione della parola chiave ngRoute.

var module = angular.module("sampleApp", ['ngRoute']);

3. Il prossimo passo sarebbe configurare il tuo $ routeProvider. Ciò è necessario per fornire i vari percorsi nell'applicazione.

   Di seguito è riportata la sintassi generale di questa affermazione che è molto autoesplicativa. Indica solo che quando viene scelto il percorso pertinente, utilizzare il percorso per visualizzare la vista data all'utente.

when(path, route)

4. Link al tuo percorso dall'interno della tua pagina HTML. Nella tua pagina HTML, aggiungerai link di riferimento ai vari percorsi disponibili nella tua applicazione.

 Percorso 1 

5. Infine sarebbe l'inclusione della direttiva ng-view, che normalmente sarebbe in un tag div. Questo verrebbe utilizzato per iniettare il contenuto della vista quando viene scelto il percorso pertinente.

Ora, diamo un'occhiata a un esempio di instradamento utilizzando i passaggi sopra menzionati.

Nel nostro esempio,

Presenteremo 2 link all'utente,

• Uno è visualizzare gli argomenti per un corso Angular JS e l'altro è per il corso Node.js.
• Quando l'utente fa clic su uno dei collegamenti, verranno visualizzati gli argomenti per quel corso.

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 angular.JS.

Passaggio 2) Aggiungi tag href che rappresenteranno collegamenti a "Argomenti JS angolari" e "Argomenti JS nodo".

Step3) Aggiungi un tag div con la direttiva ng-view che rappresenterà la vista.

Ciò consentirà di iniettare la visualizzazione corrispondente ogni volta che l'utente fa clic su "Argomenti JS angolari" o "Argomenti JS nodo".

Passaggio 4) Nel tag dello script per AngularJS, aggiungi il "modulo ngRoute" e il servizio "$ routeProvider".

Spiegazione del codice:

1. Il primo passo è assicurarsi di includere il "modulo ngRoute". Con questo in atto, Angular gestirà automaticamente il routing nella tua applicazione. Il modulo ngRoute sviluppato da Google ha tutte le funzionalità che consentono il routing. Aggiungendo questo modulo, l'applicazione comprenderà automaticamente tutti i comandi di instradamento.
2. $ Routeprovider è un servizio che angular utilizza per ascoltare in background le rotte chiamate. Quindi, quando l'utente fa clic su un collegamento, il provider di percorso lo rileverà e quindi deciderà quale percorso prendere.
3. Crea un percorso per il collegamento angolare: questo blocco significa che quando si fa clic sul collegamento angolare, inserire il file Angular.html e utilizzare anche il controller "AngularController" per elaborare qualsiasi logica di business.
4. Crea una route per il collegamento del nodo: questo blocco significa che quando si fa clic sul collegamento del nodo, inserire il file Node.html e utilizzare anche il controller "NodeController" per elaborare qualsiasi logica di business.

Passaggio 5) Il passaggio successivo consiste nell'aggiungere controller per elaborare la logica di business sia per AngularController che per NodeController.

In ogni controller, stiamo creando un array di coppie chiave-valore per memorizzare i nomi e le descrizioni degli argomenti per ogni corso. La variabile array "tutorial" viene aggiunta all'oggetto scope per ogni controller.

Guru99 Global Event


Angular JS Topics
Node JS Topics

Passaggio 6) Crea pagine chiamate Angular.html e Node.html. Per ogni pagina stiamo eseguendo i passaggi seguenti.

Questi passaggi assicureranno che tutte le coppie chiave-valore dell'array vengano visualizzate su ogni pagina.

1. Utilizzo della direttiva ng-repeat per esaminare ogni coppia chiave-valore definita nella variabile tutorial.
2. Visualizzazione del nome e della descrizione di ogni coppia chiave-valore.

• Angular.html

Anguler

Course : {{ptutor.Name}} - {{ptutor.Description}}

• Node.html

Node

Course : {{ptutor.Name}} - {{ptutor.Description}}

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

Produzione:

Se fai clic sul link AngularJS Topics, verrà visualizzato l'output seguente.

L'output mostra chiaramente che,

• Quando si fa clic sul collegamento "Angular JS Topics", il routeProvider che abbiamo dichiarato nel nostro codice decide che il codice Angular.html deve essere iniettato.
• Questo codice verrà inserito nel tag "div", che contiene la direttiva ng-view. Inoltre, il contenuto della descrizione del corso proviene dalla "variabile tutorial" che faceva parte dell'oggetto scope definito in AngularController.
• Quando si fa clic sugli argomenti di Node.js, si otterrà lo stesso risultato e verrà visualizzata la visualizzazione per gli argomenti di Node.js.
• Inoltre, nota che l'URL della pagina rimane lo stesso, è solo il percorso dopo il tag # che cambia. E questo è il concetto delle applicazioni a pagina singola. Il tag #hash nell'URL è un separatore che separa il percorso (che nel nostro caso è 'Angular' come mostrato nell'immagine sopra) e la pagina HTML principale (Sample.html)

Creazione di una rotta predefinita

Il routing in AngularJS fornisce anche la possibilità di avere un percorso predefinito. Questo è il percorso che viene scelto se non c'è corrispondenza per il percorso esistente.

La route predefinita viene creata aggiungendo la seguente condizione durante la definizione del servizio $ routeProvider.

La sintassi seguente significa semplicemente reindirizzare a una pagina diversa se uno qualsiasi dei percorsi esistenti non corrisponde.

otherwise ({redirectTo: 'page'});

Usiamo lo stesso esempio sopra e aggiungiamo una route predefinita al nostro servizio $ routeProvider.

function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);

Spiegazione del codice:

1. Qui stiamo usando lo stesso codice come sopra con l'unica differenza è che stiamo usando l'istruzione altrimenti e l'opzione "redirectTo" per specificare quale vista dovrebbe essere caricata se non viene specificata alcuna rotta. Nel nostro caso vogliamo che venga mostrata la vista "/ Angolare".

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

Produzione:

Dall'uscita,

• Puoi vedere chiaramente che la vista predefinita mostrata è la vista JS angolare.
• Questo perché quando la pagina viene caricata va all'opzione "altrimenti" nella funzione $ routeProvider e carica la vista "/ Angular".

Accesso ai parametri dal percorso

Angular fornisce anche la funzionalità per fornire parametri durante il routing. I parametri vengono aggiunti alla fine del percorso nell'URL, ad esempio, http: //guru99/index.html#/Angular/1 . In questo esempio

1. , http: //guru99/index.html è l'URL della nostra applicazione principale
2. Il simbolo # è il separatore tra l'URL dell'applicazione principale e il percorso.
3. Angular è il nostro percorso
4. E infine "1" è il parametro che viene aggiunto alla nostra rotta

La sintassi dell'aspetto dei parametri nell'URL è mostrata di seguito:

HTMLPage # / route / parameter

Qui noterai che il parametro viene passato dopo il percorso nell'URL.

Quindi nel nostro esempio, sopra per gli argomenti Angular JS, possiamo passare un parametro come mostrato di seguito

Sample.html # / Angular / 1

Sample.html # / Angular / 2

Sample.html # / Angular / 3

Qui i parametri di 1, 2 e 3 possono effettivamente rappresentare il topicid.

Vediamo in dettaglio come possiamo implementarlo.

Passaggio 1) Aggiungi il seguente codice alla tua visualizzazione

1. Aggiungi una tabella per mostrare all'utente tutti gli argomenti del corso Angular JS

2. Aggiungere una riga di tabella per mostrare l'argomento "Controller". Per questa riga, modifica il tag href in "Angular / 1", il che significa che quando l'utente fa clic su questo argomento, il parametro 1 verrà passato nell'URL insieme al percorso.

3. Aggiungere una riga di tabella per mostrare l'argomento "Modelli". Per questa riga, modifica il tag href in "Angular / 2", il che significa che quando l'utente fa clic su questo argomento, il parametro 2 verrà passato nell'URL insieme al percorso.

4. Aggiungi una riga di tabella per mostrare l'argomento "Direttive". Per questa riga, modifica il tag href in "Angular / 3", il che significa che quando l'utente fa clic su questo argomento, il parametro 3 verrà passato nell'URL insieme al percorso.

Passaggio 2) Nella funzione del servizio routerprovider aggiungere: topicId per indicare che qualsiasi parametro passato nell'URL dopo il percorso deve essere assegnato alla variabile topicId.

Passaggio 3) Aggiungi il codice necessario al controller

1. Assicurati di aggiungere prima "$ routeParams" come parametro quando definisci la funzione del controller. Questo parametro avrà accesso a tutti i parametri di route passati nell'URL.
2. Il parametro "routeParams" ha un riferimento all'oggetto topicId, che viene passato come parametro di route. Qui stiamo allegando la variabile '$ routeParams.topicId' al nostro oggetto scope come la variabile '$ scope.tutotialid'. Questo viene fatto in modo che possa essere referenziato nella nostra vista tramite la variabile tutorialid.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Passaggio 4) Aggiungi l'espressione per visualizzare la variabile tutorialid nella pagina Angular.html.

Anguler


{{tutorialid}}

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

Produzione:

Nella schermata di output,

• Se fai clic sul collegamento Dettagli argomento per il primo argomento, il numero 1 viene aggiunto all'URL.
• Questo numero verrà quindi preso come argomento "routeparam" dal servizio router Angular.JS e sarà quindi accessibile dal nostro controller.

Utilizzo del servizio Angular $ route

Il servizio $ route ti consente di accedere alle proprietà del percorso. Il servizio $ route è disponibile come parametro quando la funzione è definita nel controller. La sintassi generale di come il parametro $ route è disponibile dal controller è mostrata di seguito;

myApp.controller('MyController',function($scope,$route)

1. myApp è il modulo angular.JS definito per le tue applicazioni
2. MyController è il nome del controller definito per la tua applicazione
3. Proprio come la variabile $ scope è resa disponibile per la tua applicazione, che viene utilizzata per passare le informazioni dal controller alla vista. Il parametro $ route viene utilizzato per accedere alle proprietà del percorso.

Diamo un'occhiata a come possiamo usare il servizio $ route.

In questo esempio,

• Creeremo una semplice variabile personalizzata chiamata "mytext", che conterrà la stringa "This is angular".
• Allegheremo questa variabile al nostro percorso. Successivamente accediamo a questa stringa dal nostro controller utilizzando il servizio $ route e successivamente utilizzeremo l'oggetto scope per visualizzarlo nella nostra vista.

Quindi, vediamo i passaggi che dobbiamo eseguire per raggiungere questo obiettivo.

Passaggio 1) Aggiungi una coppia chiave-valore personalizzata alla route. Qui, stiamo aggiungendo una chiave chiamata "mytext" e assegnandogli un valore di "This is angular".

Passaggio 2) Aggiungere il codice pertinente al controller

1. Aggiungi il parametro $ route alla funzione controller. Il parametro $ route è un parametro chiave definito in angular, che consente di accedere alle proprietà del percorso.
2. È possibile accedere alla variabile "mytext" definita nella rotta tramite il riferimento $ route.current. Questo viene quindi assegnato alla variabile "text" dell'oggetto scope. È quindi possibile accedere alla variabile di testo dalla vista di conseguenza.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Passaggio 3) Aggiungere un riferimento alla variabile di testo dall'oggetto ambito come espressione. Questo verrà aggiunto alla nostra pagina Angular.html come mostrato di seguito.

Ciò farà sì che il testo "Questo è angolare" venga iniettato nella vista. L'espressione {{tutorialid}} è la stessa di quella vista nell'argomento precedente e questo mostrerà il numero "1".

Anguler


{{text}}

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

Produzione:

Dall'uscita,

• Possiamo vedere che il testo "Questo è angolare" viene visualizzato anche quando si fa clic su uno dei collegamenti nella tabella. Anche l'ID argomento viene visualizzato contemporaneamente al testo.

Abilitazione del routing HTML5

Il routing HTML5 viene utilizzato fondamentalmente per creare URL puliti. Significa la rimozione dell'hashtag dall'URL. Quindi gli URL di routing, quando viene utilizzato il routing HTML5, appariranno come mostrato di seguito

Sample.html / Angular / 1

Sample.html / Angular / 2

Sample.html / Angular / 3

Questo concetto è normalmente noto come presentare un grazioso URL all'utente.

Ci sono 2 passaggi principali che devono essere eseguiti per il routing HTML5.

1. Configurazione di $ locationProvider
2. Impostazione della nostra base per i collegamenti relativi

Esaminiamo nel dettaglio come eseguire i passaggi sopra menzionati nel nostro esempio sopra

Passaggio 1) Aggiungere il codice pertinente al modulo angolare

1. Aggiungi una costante baseURL all'applicazione: è necessaria per il routing HTML5 in modo che l'applicazione sappia qual è la posizione di base dell'applicazione.
2. Aggiungi i servizi $ locationProvider. Questo servizio ti permette di definire html5Mode.
3. Imposta html5Mode del servizio $ locationProvider su true.

Passaggio 2) Rimuovere tutti i tag # per i collegamenti ("Angular / 1", "Angular / 2", "Angular / 3") per creare un URL di facile lettura.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

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

Produzione:

Dall'uscita,

• Puoi vedere che il tag # non è presente quando accedi all'applicazione.

Sommario

• Il routing viene utilizzato per presentare diverse visualizzazioni all'utente sulla stessa pagina web. Questo è fondamentalmente il concetto utilizzato nelle applicazioni a pagina singola che sono implementate per quasi tutte le applicazioni web moderne
• È possibile impostare un percorso predefinito per il routing angular.JS. Viene utilizzato per determinare quale sarà la visualizzazione predefinita da mostrare all'utente
• I parametri possono essere passati alla rotta tramite l'URL come parametri della rotta. Successivamente si accede a questi parametri utilizzando il parametro $ routeParams nel controller
• Il servizio $ route può essere utilizzato per definire coppie chiave-valore personalizzate nella route a cui è possibile accedere successivamente dall'interno della visualizzazione
• Il routing HTML5 viene utilizzato per rimuovere il tag # dall'URL di routing in modo angolare per formare un URL carino