Směrování AngularJS
Modul ngRoutepomáhá vaší aplikaci stát se jednostránkovou aplikací.
Co je směrování v AngularJS?
Pokud chcete ve své aplikaci přejít na různé stránky, ale zároveň chcete, aby aplikace byla SPA (Single Page Application), bez nutnosti opětovného načítání stránky, můžete použít ngRoutemodul.
Modul směrujengRoute vaši aplikaci na různé stránky, aniž by znovu načítal celou aplikaci.
Příklad:
Přejděte na "red.htm", "green.htm" a "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>
Co potřebuji?
Aby byly vaše aplikace připraveny na směrování, musíte zahrnout modul AngularJS Route:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Poté musíte přidat ngRoutejako závislost v aplikačním modulu:
var app = angular.module("myApp", ["ngRoute"]);
Nyní má vaše aplikace přístup k modulu trasy, který poskytuje $routeProvider.
$routeProviderKe konfiguraci různých tras ve vaší aplikaci použijte :
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
kam to jde?
Vaše aplikace potřebuje kontejner pro umístění obsahu poskytovaného směrováním.
Tento kontejner je ng-viewsměrnice.
Existují tři různé způsoby, jak zahrnout ng-viewsměrnici do vaší aplikace:
Příklad:
<div ng-view></div>
Příklad:
<ng-view></ng-view>
Příklad:
<div
class="ng-view"></div>
Aplikace mohou mít pouze jednu ng-viewdirektivu a ta bude zástupným symbolem pro všechna zobrazení poskytovaná trasou.
$routeProvider
Pomocí $routeProvidermůžete definovat, jaká stránka se zobrazí, když uživatel klikne na odkaz.
Příklad:
Definujte $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"
});
});
Definujte $routeProviderpomocí configmetody vaší aplikace. Práce registrovaná v configmetodě bude provedena při načítání aplikace.
Ovladače
Pomocí $routeProvidermůžete také definovat ovladač pro každý "pohled".
Příklad:
Přidat ovladače:
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“ a „paris.htm“ jsou normální soubory HTML, do kterých můžete přidávat výrazy AngularJS stejně, jako byste je přidali do jiných částí HTML vaší aplikace AngularJS.
Soubory vypadají takto:
<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>
Šablona
V předchozích příkladech jsme použili templateUrlvlastnost v
$routeProvider.whenmetodě.
Můžete také použít templatevlastnost, která vám umožňuje psát HTML přímo do hodnoty vlastnosti a neodkazovat na stránku.
Příklad:
Napište šablony:
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>"
});
});
Jinak metoda
V předchozích příkladech jsme použili whenmetodu $routeProvider.
Můžete také použít otherwisemetodu, která je výchozí cestou, když žádná z ostatních nenajde shodu.
Příklad:
Pokud jste neklikli ani na odkaz „Banán“ ani „Rajče“, dejte jim vědět:
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>"
});
});