Router AngularJS
- Poprzednia strona Animacje AngularJS
- Następna strona Aplikacje AngularJS
ngRoute Moduł pomaga twojej aplikacji stać się aplikacją SPA.
Co to jest routing w AngularJS?
Jeśli chcesz nawigować do różnych stron aplikacji, ale chcesz również, aby aplikacja była SPA (Single Page Application) bez przeładowywania stron, możesz użyć ngRoute Moduł.
ngRoute Moduł route do różnych stron aplikacji bez konieczności przeładowania całej aplikacji.
Przykład
Nawiguj do "red.htm", "green.htm" i "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">strona główna</a></p>
<a href="#!red">czerwony</a>
<a href="#!green">zielony</a>
<a href="#!blue">niebieski</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 przygotować Twoją aplikację do tras, musisz zawrzeć moduł AngularJS Route:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Następnie, musisz dodać ngRoute Dodaj jako zależność do modułu aplikacji:
var app = angular.module("myApp", ["ngRoute"]);
Teraz Twoja aplikacja może uzyskać dostęp do dostarczanych $routeProvider modułu trasowego.
Użyj $routeProvider Skonfiguruj różne trasy w 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"
});
});
Dzieje się z nim co?
Twoja aplikacja potrzebuje kontenera do umieszczenia zawartości dostarczonej przez trasę.
ten kontener to ng-view .
można włączyć instrukcję w trzech różnych sposobach w aplikacji. ng-view instrukcja:
Przykład
<div ng-view></div>
Przykład
<ng-view></ng-view>
Przykład
<div class="ng-view"></div>
Aplikacja może mieć tylko jedną ng-view instrukcja, która będzie placeholderem dla wszystkich widoków dostarczonych przez trasę.
$routeProvider
Użyj $routeProvidermożesz zdefiniować stronę, która ma się wyświetlić po kliknięciu w link.
Przykład
definiować $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"
});
});
używając aplikacji config metoda zdefiniowania $routeProviderw momencie ładowania aplikacji wykona się w config zarejestrowane w metodzie.
kontroler
Użyj $routeProvidermożesz również zdefiniować kontroler dla każdej "widoku".
Przykład
Dodaj kontroler:
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 = "Kocham Londyn";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" i "paris.htm" są zwykłymi plikami HTML, w których możesz dodać wyrażenia AngularJS, tak jak w innych部分ach HTML aplikacji AngularJS.
Te pliki wyglądają tak:
london.htm
<h1>London</h1>
<h3>London jest stolicą Anglii.</h3>
<p>Jest to najbardziej zaludniona miasto w Wielkiej Brytanii, z metropolitalną strefą liczącą ponad 13 milionów mieszkańców.</p>
<p>{{msg}}</p>
paris.htm
<h1>Paryż</h1>
<h3>Paryż jest stolicą Francji.</h3>
<p>Strefa Paryża jest jednym z największych centrów zaludnienia w Europie, z ponad 12 milionami mieszkańców.</p>
<p>{{msg}}</p>
Szablon
W poprzednim przykładzie w $routeProvider.when Metoda użyła templateUrl .
Możesz również użyć Atrybutu Atrybut, który pozwala na bezpośrednie pisanie HTML w wartości atrybutu, zamiast odnosić się do strony.
Przykład
Napisz szablon:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : '<h1>Main</h1><p>Kliknij na linki, aby zmienić ten treść</p>'"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Banany zawierają około 75% wody.</p>"
})
.when("/pomidor", {
template : "<h1>Pomidor</h1><p>Pomidory zawierają około 95% wody.</p>"
});
});
metody otherwise
W poprzednim przykładzie użyliśmy $routeProvider metody when.
Możesz również użyć otherwise Metoda, gdy nie pasuje żaden inny ścieżka, staje się domyślną ścieżką.
Przykład
Jeśli ani nie kliknąłeś linku "Banana", ani nie kliknąłeś linku "Tomato", powiedz im:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Banany zawierają około 75% wody.</p>"
})
.when("/pomidor", {
template : "<h1>Pomidor</h1><p>Pomidory zawierają około 95% wody.</p>"
})
.otherwise({
template : "<h1>Brak</h1><p>Nic nie zostało wybrane</p>"
});
});
- Poprzednia strona Animacje AngularJS
- Następna strona Aplikacje AngularJS
