Esempio di routing AngularJS con parametri
Prima di scoprire come funziona il routing in Angular, diamo una rapida panoramica sulle applicazioni a pagina singola.
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?
Routing in AngularJS è un metodo che ti consente di creare applicazioni a pagina singola. Ti consente di creare URL diversi per contenuti diversi nelle tue applicazioni web. Il routing AngularJS aiuta anche a mostrare più contenuti a seconda del percorso scelto. È specificato nell'URL dopo il segno #.
Prendiamo un esempio di un sito ospitato tramite l'URL http://example.com/index.html.
In questa pagina, ospiteresti la pagina principale della tua applicazione. Supponiamo che l'applicazione stia organizzando un Evento e si voglia vedere quali sono i vari eventi in mostra, o si vogliano vedere i dettagli di un evento particolare o eliminare un evento. In un'applicazione Single Page, quando il routing è abilitato, tutte queste funzionalità sarebbero disponibili tramite i seguenti link
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).
- Pertanto, se l'utente volesse vedere tutti gli eventi, verrebbe indirizzato al collegamento (http://example.com/index.html#ShowEvent), altro
- Se volessero vedere solo un evento particolare verrebbero reindirizzati al collegamento ( http://example.com/index.html#DisplayEvent) o puoi
- Se volessero eliminare un evento, verrebbero indirizzati al collegamento http://example.com/index.html#DeleteEvent.
Tieni presente che l'URL principale rimane lo stesso.
Aggiunta della rotta AngularJS utilizzando $routeProvider
Quindi, come abbiamo discusso in precedenza, i percorsi in AngularJS vengono utilizzati per indirizzare l'utente a una visualizzazione diversa dell'applicazione. E questo routing viene eseguito sulla stessa pagina HTML in modo che l'utente abbia l'esperienza di non aver lasciato la pagina.
Per implementare il routing, è necessario implementare nell'applicazione i seguenti passaggi principali in un ordine specifico.
- Riferimento a angular-route.js. Questo è un JavaCopione file sviluppato da Google che ha tutte le funzionalità di routing. Questo deve essere inserito nell'applicazione in modo che possa fare riferimento a tutti i moduli principali richiesti per il routing.
- Il prossimo passo importante è aggiungere una dipendenza al modulo ngRoute dall'interno della tua applicazione. Questa dipendenza è necessaria affinché 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 istruzione. Questa è solo una normale dichiarazione di un modulo con l'inclusione della parola chiave ngRoute.
var module = angular.module("sampleApp", ['ngRoute']);
- Il passaggio successivo sarebbe configurare il tuo $routeProvider. Ciò è necessario per fornire i vari percorsi nella tua applicazione. Di seguito è riportata la sintassi generale di questa istruzione che è molto autoesplicativa. Afferma semplicemente che quando viene scelto il percorso rilevante, utilizzare il percorso per visualizzare la vista data all'utente.
when(path, route)
- Collegamenti al tuo percorso dalla tua pagina HTML. Nella tua pagina HTML aggiungerai collegamenti di riferimento ai vari percorsi disponibili nella tua applicazione.
<a href="#/route1">Route 1</a><br/>
- Infine sarebbe l'inclusione del file direttiva ng-view, che normalmente si troverebbe in un tag div. Questo verrebbe utilizzato per inserire il contenuto della vista quando viene scelto il percorso pertinente.
Esempio di routing AngularJS
Ora, diamo un'occhiata a un esempio di routing utilizzando i passaggi sopra menzionati.
Nel nostro esempio di routing AngularJS con parametri,
Presenteremo 2 collegamenti all'utente,
- Uno è visualizzare gli argomenti per un file JS angolare ovviamente, e l'altro è per il Node.js .
- Quando l'utente fa clic su uno dei collegamenti, verranno visualizzati gli argomenti di quel corso.
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 angular.JS.
Passo 2) Aggiungi tag href che rappresenteranno i collegamenti a "Argomenti Angular JS" e "Argomenti Node JS".
Passo 3) 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 su "Argomenti Angular JS" o "Argomenti Node JS".
Passo 4) Nel tag dello script per AngularJS, aggiungi il "modulo ngRoute" e il servizio "$routeProvider".
Spiegazione del codice:
- 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 routing.
- Il $routeprovider è un servizio che Angular utilizza per ascoltare in background le rotte che vengono chiamate. Pertanto, quando l'utente fa clic su un collegamento, il provider di percorso in AngularJS lo rileverà e quindi deciderà quale percorso intraprendere.
- Crea un percorso per il collegamento Angular: questo blocco significa che quando si fa clic sul collegamento Angular, inserire il file Angular.html e utilizzare anche il controller "AngularController" per elaborare qualsiasi logica aziendale.
- Crea un percorso per il collegamento al nodo: questo blocco significa che quando si fa clic sul collegamento al nodo, inserire il file Node.html e utilizzare anche il controller "NodeController" per elaborare qualsiasi logica aziendale.
Passo 5) Il prossimo è aggiungere controller per elaborare la logica aziendale sia per AngularController che per NodeController.
In ogni controller, stiamo creando una serie di coppie chiave-valore per memorizzare i nomi e le descrizioni degli argomenti per ciascun corso. La variabile array "tutorial" viene aggiunta all'oggetto ambito per ciascun controller.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body ng-app="sampleApp"> <title>Event Registration</title> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <h1> Guru99 Global Event</h1> <div class="container"> <ul> <li><a href="#Angular">Angular JS Topics</a></li> <li><a href="#Node.html">Node JS Topics</a></li> </ul> <div ng-view></div> </div> <script> var sampleApp = angular.module('sampleApp',['ngRoute']); sampleApp.config(['$routeProvider', function($routeProvider){ $routeProvider. when('/Angular',{ templateUrl : '/Angular.html', controller: 'AngularController' }). when("/Node", { templateUrl: '/Node.html', controller: 'NodeController' }); }]); sampleApp.controller('AngularController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ] }); sampleApp.controller('NodeController',function($scope){ $scope.tutorial = [ {Name:"Promises",Description :"Power of Promises"}, {Name:"Event",Description :"Event of Node.js"}, {Name:"Modules",Description :"Modules in Node.js"} ] }); </script> </body> </html>
Passo 6) Crea pagine chiamate Angular.html e Node.html. Per ogni pagina stiamo eseguendo i passaggi seguenti.
Questi passaggi garantiranno che tutte le coppie chiave-valore dell'array vengano visualizzate su ogni pagina.
- Utilizzando la direttiva ng-repeat per esaminare ciascuna coppia chiave-valore definita nella variabile tutorial.
- Visualizzazione del nome e della descrizione di ciascuna coppia chiave-valore.
- Angular.html
<h2>Anguler</h2> <ul ng-repeat="ptutor in tutorial"> <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li> </ul>
- Nodo.html
<h2>Node</h2> <ul ng-repeat="ptutor in tutorial"> <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li> </ul>
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Se si fa clic sul collegamento Argomenti AngularJS 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 su Node.js Argomenti, si verificherà lo stesso risultato e verrà visualizzata la vista per gli argomenti 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 un percorso predefinito in AngularJS
Il routing in AngularJS offre anche la possibilità di avere un percorso predefinito. Questo è il percorso che viene scelto se non esiste corrispondenza per il percorso esistente.
Il percorso predefinito viene creato 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 un percorso predefinito 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:
- Qui stiamo usando lo stesso codice di cui sopra con l'unica differenza che stiamo usando l'istruzione Otherwise e l'opzione "redirectTo" per specificare quale vista deve essere caricata se non è specificato alcun percorso. Nel nostro caso vogliamo che venga mostrata la vista '/Angular'.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'uscita,
- Puoi vedere chiaramente che la vista predefinita mostrata è la vista JS angolare.
- Questo perché quando la pagina viene caricata, passa all'opzione 'otherwise' nella funzione $routeProvider e carica la vista '/Angular'.
Come accedere ai parametri dalla rotta AngularJS
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 di routing angolare,
- , http://guru99/index.html è l'URL della nostra applicazione principale
- Il simbolo # è il separatore tra l'URL dell'applicazione principale e il percorso.
- Angolare è il nostro percorso
- E infine "1" è il parametro che viene aggiunto al nostro percorso
La sintassi dell'aspetto dei parametri nell'URL è mostrata di seguito:
Pagina HTML#/percorso/parametro
Qui noterai che il parametro viene passato dopo il percorso nell'URL.
Quindi nel nostro esempio di percorsi AngularJS, sopra per gli argomenti Angular JS, possiamo passare i parametri come mostrato di seguito
Esempio.html#/Angular/1
Esempio.html#/Angular/2
Esempio.html#/Angular/3
Qui i parametri di 1, 2 e 3 possono effettivamente rappresentare il topicid.
Diamo un'occhiata in dettaglio a come possiamo implementare la rotta angolare con parametro:
Passaggio 1) Aggiungi il seguente codice alla tua vista
- Aggiungi una tabella per mostrare all'utente tutti gli argomenti del corso Angular JS
- Aggiungi una riga della tabella per mostrare l'argomento "Controller". Per questa riga, cambia 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.
- Aggiungi una riga della tabella per mostrare l'argomento "Modelli". Per questa riga, cambia 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.
- Aggiungi una riga della tabella per mostrare l'argomento "Direttive". Per questa riga, cambia 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) Aggiungi l'ID argomento nella funzione del servizio Routeprovider
Nella funzione del servizio routeprovider, aggiungi the:topicId per indicare che qualsiasi parametro passato nell'URL dopo la route deve essere assegnato alla variabile topicId.
Passaggio 3) Aggiungere il codice necessario al controller
- Assicurati di aggiungere prima "$routeParams" come parametro quando definisci la funzione del controller. Questo parametro avrà accesso a tutti i parametri del percorso passati nell'URL.
- 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 variabile '$scope.tutotialid'. Questo viene fatto in modo che possa essere referenziato a nostro avviso tramite la variabile tutorialid.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body ng-app="sampleApp"> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <table class="table table-striped"> <thead> <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead> <tbody> <tr> <td>l</td><td>l</td><td>Controllers</td> <td><a href="#Angular/l">Topic details</a></td> </tr> <tr> <td>2</td><td>2</td><td>Models</td> <td><a href="#Angular/2">Topic details</a></td> </tr> <tr> <td>3</td><td>3</td><td>Directives</td> <td><a href="#Angular/3">Topic details</a></td> </tr> </tbody> </table> <script> var sampleApp = angular.module('sampleApp',['ngRoute']); sampleApp.config( function($routeProvider){ $routeProvider. when('/Angular/:topicId',{ templateUrl : 'Angular.html', controller: 'AngularController' }) }); sampleApp.controller('AngularController',function($scope,$routeParams) { $scope.tutorialid=$routeParams.topicId }); </script> </body> </html>
Passaggio 4) Aggiungi l'espressione alla variabile visualizzata
Aggiungi l'espressione per visualizzare la variabile tutorialid nella pagina Angular.html.
<h2>Anguler</h2> <br><br>{{tutorialid}}
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Nella schermata di output,
- Cliccando sul link Dettagli argomento per il primo argomento, all'URL verrà aggiunto il numero 1.
- Questo numero verrà quindi preso come argomento "routeparam" dal servizio router provider Angular.JS e sarà quindi accessibile al nostro controller.
Come utilizzare il servizio Angular $route
Il servizio $route consente di accedere alle proprietà del percorso. Il servizio $route è disponibile come parametro quando la funzione è definita nel controller. Di seguito è mostrata la sintassi generale di come il parametro $route è disponibile dal controller;
myApp.controller('MyController',function($scope,$route)
- myApp è il modulo angular.JS definito per le tue applicazioni
- MyController è il nome del controller definito per la tua applicazione
- Proprio come viene resa disponibile per la tua applicazione la variabile $scope, che viene utilizzata per passare informazioni dal controller alla vista. Il parametro $route viene utilizzato per accedere alle proprietà del percorso.
Diamo un'occhiata a come possiamo utilizzare il servizio $route.
In questo esempio,
- Creeremo una semplice variabile personalizzata chiamata "mytext", che conterrà la stringa "This is angolare".
- Stiamo per collegare questa variabile alla nostra route. E più tardi accederemo a questa stringa dal nostro controller usando il servizio $route e quindi useremo successivamente l'oggetto scope per visualizzarla nella nostra view.
Vediamo quindi i passi che dobbiamo compiere per raggiungere questo obiettivo.
Passo 1) Aggiungi una coppia chiave-valore personalizzata al percorso. Qui aggiungiamo una chiave chiamata "miotesto" e le assegniamo il valore "Questo è angolare".
Passo 2) Aggiungere il codice pertinente al controller
- Aggiungi il parametro $route alla funzione del controller. Il parametro $route è un parametro chiave definito in angular, che consente di accedere alle proprietà del percorso.
- È possibile accedere alla variabile "mytext" definita nel percorso tramite il riferimento $ route.current. Questo viene quindi assegnato alla variabile 'text' dell'oggetto scope. È quindi possibile accedere alla variabile testo dalla vista di conseguenza.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body ng-app="sampleApp"> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <table class="table table-striped"> <thead> <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead> <tbody> <tr> <td>l</td><td>l</td><td>Controllers</td> <td><a href="#Angular/l">Topic details</a></td> </tr> <tr> <td>2</td><td>2</td><td>Models</td> <td><a href="#Angular/2">Topic details</a></td> </tr> <tr> <td>3</td><td>3</td><td>Directives</td> <td><a href="#Angular/3">Topic details</a></td> </tr> </tbody> </table> <script> var sampleApp = angular.module('sampleApp',['ngRoute']); sampleApp.config(['$routeProvider', function($routeProvider){ $routeProvider. when('/Angular/:topicId',{ mytext:"This is angular", templateUrl : 'Angular.html', controller: 'AngularController' }) }]); sampleApp.controller('AngularController',function($scope,$routeParams,$route) { $scope.tutorialid=$routeParams.topicId; $scope.text=$route.current.mytext; }); </script> </body> </html>
Passo 3) Aggiungi un riferimento alla variabile text dall'oggetto scope come espressione. Questo verrà aggiunto alla nostra pagina Angular.html come mostrato di seguito.
Ciò farà sì che il testo "Questo è angolare" venga inserito nella vista. L'espressione {{tutorialid}} è la stessa vista nell'argomento precedente e mostrerà il numero '1'.
<h2>Anguler</h2> <br><br>{{text}} <br><br>
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'uscita,
- Possiamo vedere che il testo "Questo è angolare" viene visualizzato anche quando facciamo clic su uno qualsiasi dei collegamenti nella tabella. Anche l'ID dell'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. Pertanto gli URL di routing, quando viene utilizzato il routing HTML5, apparirebbero come mostrato di seguito
Esempio.html/Angular/1
Esempio.html/Angular/2
Esempio.html/Angular/3
Questo concetto è normalmente noto come presentazione di un grazioso URL all'utente.
Ci sono 2 passaggi principali che devono essere eseguiti per il routing HTML5.
- Configurazione di $locationProvider
- Impostazione della nostra base per i collegamenti relativi
Esaminiamo nel dettaglio come eseguire i passaggi sopra menzionati nel nostro esempio sopra
Passo 1) Aggiungi il codice pertinente al modulo angolare
- Aggiungi una costante baseURL all'applicazione: è necessaria per il routing HTML5 in modo che l'applicazione sappia qual è la posizione di base dell'applicazione.
- Aggiungi i servizi $locationProvider. Questo servizio ti consente di definire la modalità html5.
- Imposta html5Mode del servizio $locationProvider su true.
Passo 2) Rimuovi tutti i #tag per i collegamenti ('Angular/1', 'Angular/2', 'Angular/3') per creare URL di facile lettura.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body ng-app="sampleApp"> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <table class="table table-striped"> <thead> <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead> <tbody> <tr> <td>l</td><td>l</td><td>Controllers</td> <td><a href="Angular/l">Topic details</a></td> </tr> <tr> <td>2</td><td>2</td><td>Models</td> <td><a href="Angular/2">Topic details</a></td> </tr> <tr> <td>3</td><td>3</td><td>Directives</td> <td><a href="Angular/3">Topic details</a></td> </tr> </tbody> </table> <script> var sampleApp = angular.module('sampleApp',['ngRoute']); sampleApp.constant("baseUrl","http://localhost:63342/untitled/Sample.html/Angular"); sampleApp.config( function($routeProvider,$locationProvider){ $routeProvider. when('/Angular/:topicId',{ templateUrl : 'Angular.html', controller: 'AngularController' }) }); sampleApp.controller('AngularController',function($scope,$routeParams,$route) { $scope.tutorialid=$routeParams.topicId }); </script> </body> </html>
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
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 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 nel percorso a cui è possibile accedere successivamente dall'interno della vista
- Il routing HTML5 viene utilizzato per rimuovere il tag # dall'URL di routing in modo angolare per formare un URL carino