Hoekige JS-routering
De ngRoutemodule helpt uw aanvraag om een Single Page Application te worden.
Wat is routering in AngularJS?
Als u naar verschillende pagina's in uw applicatie wilt navigeren, maar u wilt ook dat de applicatie een SPA (Single Page Application) is, zonder pagina's opnieuw te laden, kunt u de ngRoutemodule gebruiken.
De ngRoutemodule leidt uw applicatie naar verschillende pagina's zonder de hele applicatie opnieuw te laden.
Voorbeeld:
Navigeer naar "red.htm", "green.htm" en "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>
Wat heb ik nodig?
Om uw applicaties klaar te maken voor routering, moet u de AngularJS Route-module opnemen:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Dan moet u de ngRouteals afhankelijkheid in de toepassingsmodule toevoegen:
var app = angular.module("myApp", ["ngRoute"]);
Nu heeft uw applicatie toegang tot de routemodule, die de $routeProvider.
Gebruik de $routeProviderom verschillende routes in uw toepassing te configureren:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Waar gaat het naartoe?
Uw toepassing heeft een container nodig om de inhoud van de routering te plaatsen.
Deze container is de ng-viewrichtlijn.
Er zijn drie verschillende manieren om de ng-viewrichtlijn op te nemen in uw aanvraag:
Voorbeeld:
<div ng-view></div>
Voorbeeld:
<ng-view></ng-view>
Voorbeeld:
<div
class="ng-view"></div>
Toepassingen kunnen slechts één ng-viewrichtlijn hebben en dit zal de tijdelijke aanduiding zijn voor alle weergaven die door de route worden geboden.
$routeProvider
Met de $routeProviderkunt u definiëren welke pagina moet worden weergegeven wanneer een gebruiker op een link klikt.
Voorbeeld:
Definieer een $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"
});
});
Definieer het $routeProvidergebruik van de configmethode van uw toepassing. Werk dat in de configmethode is geregistreerd, wordt uitgevoerd wanneer de toepassing wordt geladen.
Controllers
Met de $routeProviderkunt u ook voor elke "weergave" een controller definiëren.
Voorbeeld:
Voeg regelaars toe:
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";
});
De "london.htm" en "paris.htm" zijn normale HTML-bestanden, waaraan u AngularJS-expressies kunt toevoegen zoals u zou doen met andere HTML-secties van uw AngularJS-toepassing.
De bestanden zien er als volgt uit:
<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>
Sjabloon
In de vorige voorbeelden hebben we de templateUrleigenschap in de
$routeProvider.whenmethode gebruikt.
U kunt ook de templateeigenschap gebruiken, waarmee u HTML rechtstreeks in de eigenschapswaarde kunt schrijven en niet naar een pagina kunt verwijzen.
Voorbeeld:
Schrijf sjablonen:
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>"
});
});
De anders methode
In de voorgaande voorbeelden hebben we de whenmethode van de $routeProvider.
U kunt ook de otherwisemethode gebruiken, wat de standaardroute is wanneer geen van de anderen een overeenkomst krijgt.
Voorbeeld:
Als noch op de link "Banaan" of "Tomaat" is geklikt, laat het hen dan weten:
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>"
});
});