AngularJS Routen
- Vorige pagina AngularJS Animaties
- Volgende pagina AngularJS Applicaties
ngRoute De module helpt uw applicatie om een single-page application te worden.
Wat is routing in AngularJS?
Als u naar verschillende pagina's in de applicatie wilt navigeren, maar ook wilt dat de applicatie een SPA (single-page application) is zonder pagina herlaad, kunt u ngRoute Module.
ngRoute De module routeert uw applicatie naar verschillende pagina's zonder dat de hele applicatie opnieuw geladen hoeft te worden.
Voorbeeld
Navigeer naar "red.htm", "green.htm" en "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">homepagina</a></p>
<a href="#!red">rood</a>
<a href="#!green">groen</a>
<a href="#!blue">blauw</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/rood", {
templateUrl : "rood.htm"
})
.when("/groen", {
templateUrl : "groen.htm"
})
.when("/blauw", {
templateUrl : "blauw.htm"
});
});
</script>
</body>
Wat heb ik nodig?
Om uw applicatie voor routing voor te bereiden, moet u de AngularJS Route module opnemen:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Daarna moet u ngRoute voeg toe als afhankelijkheid van het applicatiemodule:
var app = angular.module("myApp", ["ngRoute"]);
Nu kan uw applicatie de modules die worden aangeboden $routeProvider de route module.
Gebruik $routeProvider Configureer verschillende routes in de applicatie:
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/rood", {
templateUrl : "rood.htm"
})
.when("/groen", {
templateUrl : "groen.htm"
})
.when("/blauw", {
templateUrl : "blauw.htm"
});
});
Waar is het gebleven?
Uw applicatie heeft een container nodig om de inhoud die door de route wordt aangeboden te plaatsen.
Deze container is ng-view
Deze instructie kan op drie verschillende manieren worden opgenomen in de applicatie. ng-view instructie:
Voorbeeld
<div ng-view></div>
Voorbeeld
<ng-view></ng-view>
Voorbeeld
<div class="ng-view"></div>
Een applicatie kan maar één ng-view instructie, wat de placeholder is voor alle weergaven die door de route worden aangeboden.
$routeProvider
Gebruik $routeProvider，u kunt de pagina weergeven die moet worden weergegeven wanneer de gebruiker op de link klikt.
Voorbeeld
definieer $routeProvider：
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/londen", {
templateUrl : "londen.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
met behulp van de config methodedefinitie $routeProviderwordt uitgevoerd bij het laden van de config werk dat wordt geregistreerd in de
controllers
Gebruik $routeProviderU kunt ook een controller definiëren voor elke "weergave".
Voorbeeld
Voeg controller toe:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/londen", {
templateUrl : "londen.htm",
controller : "londenCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londenCtrl", function ($scope) {
$scope.msg = "Ik hou van Londen";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" en "paris.htm" zijn gewone HTML-bestanden, waarin u AngularJS-expressies kunt toevoegen, net als in andere HTML-gedeelten van uw AngularJS-toepassing.
Deze bestanden zien eruit als volgt:
london.htm
<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>
paris.htm
<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>
Template
In het vorige voorbeeld hebben we $routeProvider.when Gebruikt in de templateUrl Eigenschap.
U kunt ook Eigenschap. Eigenschap, die het mogelijk maakt om direct HTML in de waarde van de eigenschap te schrijven, in plaats van de pagina te refereren.
Voorbeeld
Schrijf de template:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Klik op de links om deze inhoud te wijzigen</p>"
})
.when("/banaan", {
template : "<h1>Banaan</h1><p>Banana's bevatten ongeveer 75% water.</p>"
})
.when("/tomatentuin", {
template : "<h1>Tomatentuin</h1><p>Tomatentoeften bevatten ongeveer 95% water.</p>"
});
});
de otherwise-methode gebruikt
In het vorige voorbeeld hebben we $routeProvider de when-methode gebruiken.
U kunt ook otherwise Wanneer alle andere routes niet overeenkomen, wordt het de standaard route.
Voorbeeld
Als er geen link naar "Banana" of "Tomato" wordt geklikt, vertel hen dan:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banaan", {
template : "<h1>Banaan</h1><p>Banana's bevatten ongeveer 75% water.</p>"
})
.when("/tomatentuin", {
template : "<h1>Tomatentuin</h1><p>Tomatentoeften bevatten ongeveer 95% water.</p>"
})
.otherwise({
template : "<h1>Geen</h1><p>Niets is geselecteerd</p>"
});
});
- Vorige pagina AngularJS Animaties
- Volgende pagina AngularJS Applicaties
