AngularJS-Routing
Das ngRouteModul verhilft Ihrer Bewerbung zu einer Single Page Application.
Was ist Routing in AngularJS?
Wenn Sie zu verschiedenen Seiten in Ihrer Anwendung navigieren möchten, die Anwendung aber auch eine SPA (Single Page Application) sein soll, ohne dass Seiten neu geladen werden, können Sie das ngRouteModul verwenden.
Das ngRouteModul leitet Ihre Anwendung auf verschiedene Seiten weiter, ohne die gesamte Anwendung neu zu laden.
Beispiel:
Navigieren Sie zu „red.htm“, „green.htm“ und „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>
Was brauche ich?
Um Ihre Anwendungen bereit für das Routing zu machen, müssen Sie das AngularJS Route-Modul einbinden:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Dann müssen Sie das ngRouteals Abhängigkeit im Anwendungsmodul hinzufügen:
var app = angular.module("myApp", ["ngRoute"]);
Jetzt hat Ihre Anwendung Zugriff auf das Routenmodul, das die $routeProvider.
Verwenden Sie die $routeProvider, um verschiedene Routen in Ihrer Anwendung zu konfigurieren:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Wohin geht es?
Ihre Anwendung benötigt einen Container, um den vom Routing bereitgestellten Inhalt zu platzieren.
Dieser Container ist die ng-viewDirektive.
Es gibt drei verschiedene Möglichkeiten, die ng-viewRichtlinie in Ihre Bewerbung aufzunehmen:
Beispiel:
<div ng-view></div>
Beispiel:
<ng-view></ng-view>
Beispiel:
<div
class="ng-view"></div>
Anwendungen können nur eine ng-viewAnweisung haben, und diese ist der Platzhalter für alle Ansichten, die von der Route bereitgestellt werden.
$routeProvider
Mit $routeProviderkönnen Sie definieren, welche Seite angezeigt werden soll, wenn ein Benutzer auf einen Link klickt.
Beispiel:
Definiere ein $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"
});
});
Definieren Sie die $routeProvideranhand der configMethode Ihrer Anwendung. Die in der Methode registrierte Arbeit configwird ausgeführt, wenn die Anwendung geladen wird.
Controller
Mit $routeProviderkönnen Sie auch für jede "Ansicht" einen Controller definieren.
Beispiel:
Controller hinzufügen:
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“ und „paris.htm“ sind normale HTML-Dateien, denen Sie AngularJS-Ausdrücke hinzufügen können, wie Sie es mit allen anderen HTML-Abschnitten Ihrer AngularJS-Anwendung tun würden.
Die Dateien sehen so aus:
<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>
Schablone
In den vorherigen Beispielen haben wir die templateUrlEigenschaft in der
$routeProvider.whenMethode verwendet.
Sie können auch die templateEigenschaft verwenden, die es Ihnen ermöglicht, HTML direkt in den Eigenschaftswert zu schreiben und nicht auf eine Seite zu verweisen.
Beispiel:
Vorlagen schreiben:
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 Sonst-Methode
In den vorherigen Beispielen haben wir die whenMethode der verwendet $routeProvider.
Sie können auch die otherwiseMethode verwenden, die die Standardroute ist, wenn keine der anderen eine Übereinstimmung erhält.
Beispiel:
Wenn weder auf den Link „Banane“ noch auf den „Tomate“-Link geklickt wurde, teilen Sie ihm dies mit:
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>"
});
});