$routeProvider-routeParams – Tutorial AngularJS Crashkurs

  • $routeProvider wird verwendet um routes zu konfigurieren deren übergeordneter Service $route ist
  • Mit $routeParams können auch Parameter übergeben werden in Form eines Doppelpunkt nach dem Pfad
  • Bitte zuvor das Video Routing (016) anschauen

RouteProvider.html

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<script src=„lib/angular-route.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>RouteProvider</title>
</head>

<body>

<div ng-app=„myApp“ ng-controller=„myCtrl“>
<ng-view>{{value}}</ng-view>

</div>

<script>
var app=angular.module(‚myApp‘, [’ngRoute‘]);

app.config(function($routeProvider) {
$routeProvider
.when(‚/‘,
{
templateUrl: ‚Page.html‘,
})
.when(‚/parameter:value‘, {
template: ‚Parameter value‘,
controller: ‚myCtrl‘
})
.otherwise({
templateUrl: ‚Error.html‘,
})
});

app.controller(‚myCtrl‘, function($scope, $routeParams) {
$scope.value=$routeParams.value;
})
</script>

</body>

</html>

Page.html

<!DOCTYPE html>
<html>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Routing</title>
</head>

<body>

<div>
Hauptseite
</div>

</body>

</html>

Error.html

<!DOCTYPE html>
<html>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Routing</title>
</head>

<body>

<div>
Seite existiert nicht
</div>

</body>

</html>

Routing – Tutorial AngularJS Crashkurs

  • Routen ermöglichen bestimmte logische Seiten innerhalb einer Single Page Application anzuzeigen
  • Im Grunde gibt es ja nur eine Seite in der Single Page Application, aber durch das # Zeichen kann diese in mehrere logische Seiten aufgeteilt werden
  • Für das Routing wird die Direktive ngRoute mit §routeProvider und $routeParams verwendet

Routing.html

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<script src=„lib/angular-route.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Routing</title>
</head>

<body>

<div ng-app=„myApp“>
<ng-view></ng-view>
</div>

<script>
var app=angular.module(‚myApp‘, [’ngRoute‘]);

app.config(function($routeProvider) {
$routeProvider
.when(‚/‘,
{
templateUrl: ‚Page.html‘
})
.when(‚/template‘, {
template: ‚Eigenschaft template‘
})
.otherwise({
template: ‚Seite existiert nicht‘
})
});
</script>

</body>

</html>

 

Page.html

<!DOCTYPE html>
<html>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Routing</title>
</head>

<body>

<div>
Eigenschaft templateUrl
</div>

</body>

</html>