AngularJS Routing
Il ngRoutemodulo aiuta la tua applicazione a diventare un'applicazione a pagina singola.
Che cos'è il routing in AngularJS?
Se si desidera navigare in diverse pagine dell'applicazione, ma si desidera anche che l'applicazione sia una SPA (Applicazione a pagina singola), senza dover ricaricare le pagine, è possibile utilizzare il ngRoutemodulo.
Il ngRoutemodulo indirizza l'applicazione a pagine diverse senza ricaricare l'intera applicazione.
Esempio:
Passa a "red.htm", "green.htm" e "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
Di cosa ho bisogno?
Per rendere le tue applicazioni pronte per il routing, devi includere il modulo AngularJS Route:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Quindi devi aggiungere ngRoutecome dipendenza nel modulo dell'applicazione:
var app = angular.module("myApp", ["ngRoute"]);
Ora la tua applicazione ha accesso al modulo route, che fornisce il file $routeProvider.
Utilizzare $routeProviderper configurare percorsi diversi nella propria applicazione:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Dove va?
La tua applicazione ha bisogno di un contenitore per inserire il contenuto fornito dal routing.
Questo contenitore è la ng-viewdirettiva.
Esistono tre modi diversi per includere la ng-viewdirettiva nell'applicazione:
Esempio:
<div ng-view></div>
Esempio:
<ng-view></ng-view>
Esempio:
<div
class="ng-view"></div>
Le applicazioni possono avere solo una ng-viewdirettiva e questo sarà il segnaposto per tutte le viste fornite dal percorso.
$ provider di percorsi
Con il $routeProviderpuoi definire quale pagina visualizzare quando un utente fa clic su un collegamento.
Esempio:
Definisci un $routeProvider:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
Definisci l' $routeProviderutilizzo del configmetodo della tua applicazione. Il lavoro registrato nel configmetodo verrà eseguito durante il caricamento dell'applicazione.
Controllori
Con il $routeProviderpuoi anche definire un controller per ogni "vista".
Esempio:
Aggiungi controller:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function
($scope) {
$scope.msg = "I love Paris";
});
"london.htm" e "paris.htm" sono normali file HTML, a cui puoi aggiungere espressioni AngularJS come faresti con qualsiasi altra sezione HTML della tua applicazione AngularJS.
I file si presentano così:
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
Modello
Negli esempi precedenti abbiamo utilizzato la templateUrlproprietà nel
$routeProvider.whenmetodo.
Puoi anche utilizzare la templateproprietà, che ti consente di scrivere HTML direttamente nel valore della proprietà e non fare riferimento a una pagina.
Esempio:
Scrivi modelli:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click
on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
Il metodo altrimenti
Negli esempi precedenti abbiamo utilizzato il whenmetodo del $routeProvider.
Puoi anche usare il otherwisemetodo, che è il percorso predefinito quando nessuno degli altri ottiene una corrispondenza.
Esempio:
Se non è stato cliccato né il link "Banana" né il link "Pomodoro", informarli:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});