AngularJS Routing
Die ngRoutemodule help jou aansoek om 'n Enkelbladsy-toepassing te word.
Wat is roetering in AngularJS?
As jy na verskillende bladsye in jou aansoek wil navigeer, maar jy wil ook hê dat die toepassing 'n SPA (Single Page Application) moet wees, met geen bladsy herlaai nie, kan jy die ngRoutemodule gebruik.
Die ngRoutemodule stuur jou aansoek na verskillende bladsye sonder om die hele toepassing te herlaai.
Voorbeeld:
Navigeer na "rooi.htm", "groen.htm" en "blou.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 het ek nodig?
Om jou toepassings gereed te maak vir roetering, moet jy die AngularJS Route-module insluit:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Dan moet jy die ngRouteas 'n afhanklikheid in die toepassingsmodule byvoeg:
var app = angular.module("myApp", ["ngRoute"]);
Nou het jou toepassing toegang tot die roetemodule, wat die $routeProvider.
Gebruik die $routeProviderom verskillende roetes in jou toepassing op te stel:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Waarheen gaan dit?
Jou toepassing het 'n houer nodig om die inhoud wat deur die roetering verskaf word, te plaas.
Hierdie houer is die ng-viewrichtlijn.
Daar is drie verskillende maniere om die ng-viewopdrag in jou aansoek in te sluit:
Voorbeeld:
<div ng-view></div>
Voorbeeld:
<ng-view></ng-view>
Voorbeeld:
<div
class="ng-view"></div>
Aansoeke kan slegs een ng-viewriglyn hê, en dit sal die plekhouer wees vir alle aansigte wat deur die roete verskaf word.
$routeProvider
Met die $routeProviderkan jy definieer watter bladsy om te vertoon wanneer 'n gebruiker op 'n skakel klik.
Voorbeeld:
Definieer 'n $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 die $routeProvidergebruik van die configmetode van jou aansoek. Werk wat in die configmetode geregistreer is, sal uitgevoer word wanneer die toepassing laai.
Beheerders
Met die $routeProviderkan jy ook 'n kontroleerder vir elke "aansig" definieer.
Voorbeeld:
Voeg beheerders by:
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";
});
Die "london.htm" en "paris.htm" is normale HTML-lêers, wat jy AngularJS-uitdrukkings kan byvoeg soos jy sou met enige ander HTML-afdelings van jou AngularJS-toepassing.
Die lêers lyk soos volg:
<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 die vorige voorbeelde het ons die templateUrleienskap in die
$routeProvider.whenmetode gebruik.
Jy kan ook die templateeiendom gebruik, wat jou toelaat om HTML direk in die eiendomswaarde te skryf, en nie na 'n bladsy te verwys nie.
Voorbeeld:
Skryf sjablone:
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>"
});
});
Die ander metode
In die vorige voorbeelde het ons die whenmetode van die $routeProvider.
Jy kan ook die otherwisemetode gebruik, wat die verstekroete is wanneer nie een van die ander 'n pasmaat kry nie.
Voorbeeld:
As nie die "Piesang" of die "Tamatie" skakel geklik is, laat weet hulle:
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>"
});
});