Routing AngularJS
Moduł ngRoutepomaga Twojej aplikacji stać się aplikacją jednostronicową.
Co to jest routing w AngularJS?
Jeśli chcesz przechodzić do różnych stron w swojej aplikacji, ale chcesz, aby aplikacja była SPA (Single Page Application) bez przeładowywania strony, możesz użyć ngRoutemodułu.
Moduł ngRoutekieruje twoją aplikację na różne strony bez przeładowywania całej aplikacji.
Przykład:
Przejdź do "red.htm", "green.htm" i "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>
Czego potrzebuję?
Aby Twoje aplikacje były gotowe do routingu, musisz dołączyć moduł AngularJS Route:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Następnie należy dodać ngRoutejako zależność w module aplikacji:
var app = angular.module("myApp", ["ngRoute"]);
Teraz Twoja aplikacja ma dostęp do modułu tras, który zapewnia $routeProvider.
Użyj , $routeProvideraby skonfigurować różne trasy w swojej aplikacji:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Dokąd to zmierza?
Twoja aplikacja potrzebuje kontenera, aby umieścić zawartość dostarczoną przez routing.
Ten kontener to ng-viewdyrektywa.
Istnieją trzy różne sposoby włączenia ng-viewdyrektywy do aplikacji:
Przykład:
<div ng-view></div>
Przykład:
<ng-view></ng-view>
Przykład:
<div
class="ng-view"></div>
Aplikacje mogą mieć tylko jedną ng-viewdyrektywę i będzie to symbol zastępczy dla wszystkich widoków udostępnianych przez trasę.
$routeDostawca
Dzięki niej $routeProvidermożesz określić, jaka strona ma się wyświetlać, gdy użytkownik kliknie łącze.
Przykład:
Zdefiniuj $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"
});
});
Zdefiniuj przy $routeProviderużyciu configmetody swojej aplikacji. Praca zarejestrowana w configmetodzie zostanie wykonana podczas ładowania aplikacji.
Kontrolery
Za pomocą $routeProvidermożna również zdefiniować kontroler dla każdego „widoku”.
Przykład:
Dodaj kontrolery:
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” i „paris.htm” to normalne pliki HTML, do których możesz dodawać wyrażenia AngularJS tak samo, jak w przypadku innych sekcji HTML swojej aplikacji AngularJS.
Pliki wyglądają tak:
<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>
Szablon
W poprzednich przykładach użyliśmy templateUrlwłaściwości w
$routeProvider.whenmetodzie.
Możesz także użyć templatewłaściwości, która pozwala na pisanie kodu HTML bezpośrednio w wartości właściwości, bez odwoływania się do strony.
Przykład:
Napisz szablony:
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>"
});
});
Inaczej metoda
W poprzednich przykładach zastosowaliśmy whenmetodę $routeProvider.
Możesz także użyć otherwisemetody, która jest domyślną trasą, gdy żadna z pozostałych nie zostanie dopasowana.
Przykład:
Jeśli nie został kliknięty link „Banan” ani „Pomidor”, poinformuj ich:
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>"
});
});