Routing AngularJS
- Pagina precedente Animazione AngularJS
- Pagina successiva Applicazione AngularJS
ngRoute Il modulo aiuta la tua applicazione a diventare un'applicazione SPA.
Cos'è la routing in AngularJS?
Se desideri navigare a diverse pagine dell'applicazione ma anche che l'applicazione diventi un SPA (Single Page Application) senza ricaricare le pagine, puoi utilizzare ngRoute Modulo.
ngRoute Il modulo reindirizza la tua applicazione a diverse pagine senza dover ricaricare l'intera applicazione.
Esempio
Naviga a "red.htm", "green.htm" e "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">homepage</a></p>
<a href="#!red">rosso</a>
<a href="#!green">verde</a>
<a href="#!blue">blu</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>
Cosa mi serve?
Per preparare la tua applicazione alle rotte, devi includere il modulo AngularJS Route：
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Poi, devi includere ngRoute Aggiungi come dipendenza del modulo dell'applicazione：
var app = angular.module("myApp", ["ngRoute"]);
Ora la tua applicazione può accedere a quelli forniti $routeProvider modulo di rotta.
Usa $routeProvider Configura diverse rotte nell'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 è andato?
La tua applicazione ha bisogno di un contenitore per inserire il contenuto fornito dalla rotta.
Questo contenitore è ng-view
Puoi includere l'istruzione in tre modi diversi nell'applicazione. ng-view Istruzione：
Esempio
<div ng-view></div>
Esempio
<ng-view></ng-view>
Esempio
<div class="ng-view"></div>
L'applicazione può avere solo una ng-view Istruzione, che sarà il segnaposto per tutte le viste fornite dalla rotta.
$routeProvider
Usa $routeProviderPuoi definire la pagina da visualizzare quando l'utente clicca su un link.
Esempio
Definisci $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"
});
});
usando l'applicazione config metodi definizione $routeProvider.Eseguire in fase di caricamento dell'applicazione i metodi definiti in config lavoro registrato.
Metodi del controller
Usa $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 = "Amo Londra";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" e "paris.htm" sono file HTML normali, nei quali puoi aggiungere espressioni AngularJS, come in altre parti HTML dell'applicazione AngularJS.
Questi file sembrano così:
london.htm
<h1>London</h1>
<h3>London è la capitale dell'Inghilterra.</h3>
<p>È la città più popolosa del Regno Unito, con una regione metropolitana di oltre 13 milioni di abitanti.</p>
<p>{{msg}}</p>
paris.htm
<h1>Parigi</h1>
<h3>Parigi è la capitale della Francia.</h3>
<p>La regione di Parigi è una delle più grandi aree urbane in Europa, con più di 12 milioni di abitanti.</p>
<p>{{msg}}</p>
Modello
Nel esempio precedente, abbiamo usato $routeProvider.when Il metodo ha usato templateUrl .
Puoi anche usare Proprietà Proprietà, che ti permette di scrivere direttamente HTML nel valore dell'attributo, anziché fare riferimento alla pagina.
Esempio
Scrivi il modello:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Clicca sui link per cambiare questo contenuto</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Le banane contengono circa il 75% di acqua.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>I pomodori contengono circa il 95% di acqua.</p>"
});
});
il metodo otherwise
Nel esempio precedente, abbiamo usato $routeProvider il metodo when.
Puoi anche usare otherwise Il metodo, quando nessun'altra rotta corrisponde, diventa la rotta predefinita.
Esempio
Se non hanno cliccato né sul link "Banana" né sul link "Tomato", dite loro:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Le banane contengono circa il 75% di acqua.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>I pomodori contengono circa il 95% di acqua.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nessuna selezione è stata effettuata</p>"
});
});
- Pagina precedente Animazione AngularJS
- Pagina successiva Applicazione AngularJS
