AngularJS jest często wykorzystywany do tworzenia SPA (aplikacji jednostronnej). Jednakże powstaje pewien problem natury takiej, że sama aplikacja może wymagać utworzenia różnych widoków w ramach tej samej strony. Jak więc to obsłużyć? Z odsieczą przychodzi moduł ngRoute, z którego aby można było korzystać trzeba pobrać plik angular-route.min.js. Bez załączenia tego pliku oprócz głównego pliku z AngularJS nie da się obsłużyć przekierowań.
Najważniejszym elementem w kodzie HTML strony będzie element div zawierający specjalny atrybut o jakże przewrotnie brzmiącej nazwie ng-view. W ramach jednej aplikacji może istnieć jeden i tylko jeden element o tym atrybucie i warto o tym pamiętać.
Sam kod HTML strony głównej nie jest jakoś specjalnie skomplikowany, ale myślę, że to dobrze jak na przykład podstaw AnularJS:
<body ng-app = "myFirstAngularApplicationEver">
<div class = "outer">
<div class="toCenter">
<article class="myRouting">
<p><a href="#!/">Strona główna</a></p> <!-- pierwszy link przekierowania widoku strony -->
<p><a href="#!/pierwszy">Widok 1</a></p> <!-- drugi link przekierowania widoku strony -->
<div ng-view> <!-- a tutaj wstawiam widok strony -->
</div>
</article>
</div>
</div>
</body>
Czas dodać szczyptę kodu związanego z obsługą przekierowania:
<script>
let app = angular.module(
"myFirstAngularApplicationEver",
["ngRoute"] // ładuję moduł routingu
);
app.config(
function($routeProvider){ // ta funkcja będzie odpowiedzialna za realizację przekierowań
$routeProvider
.when("/", { // gdy w adresie pojawi się "/" to
template: "<p>Strona startowa</p>" // wyświetl ten tekst
})
.when("/pierwszy", { // Agdy w adresie pojawi się "/pierwszy" to
templateUrl: "AngularJS_example06_first_view.html", // ustaw szablon na stronę zawartą w pliku "AngularJS_example06_first_view.html"
controller: "addBeautifulPeopleController" // i ustaw kontroler na ten o nazwie "addBeautifulPeopleController"
})
.otherwise( {redirect: "/"} ); // w przeciwnym przypadku (czyli jak ktoś wpisze jakieś głupoty w adresie) przepieruj na stronę startową
});
</script>
Zasadniczo nie ma co tu tłumaczyć, wszak wszystko w kodzie zostało wyjaśnione. Został jeszcze kod dotyczący kontrolera addBeautifulPeopleController, który wyrzuciłem do oddzielnego pliku:
