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>