$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>

Core Features – Tutorial AngularJS Crashkurs

streaming Going in Style 2017 film

  • Data Binding: Automatische Synchronisation von Daten zwischen Model und View. Wird also was im Model verändert, spiegelt sich das auch in der View wieder vica versa.
  • Scope: Bezieht sich auf einen bestimmten Bereich der nur unter diesen Scope sichtbar ist. Also alles was in diesen Bereich verwendet wird kann unter diesen Scope verwendet werden.
  • Modul: Das Modul ist ein Kontainer für Controllers, Services, Filter, Direktiven usw.
  • Controller: Kontroller enthalten vor allem Funktionen mit ausführbaren Code und steuern etwas wie der Name Controller es auch schon verraten lässt.
  • Services: Sind Singleton Objekte die bestimmte Funktionen ausführen können. Mit anderen Worten gibt es nur eine Instanz von einen bestimmten Service im ganzen Framework.
  • Filters: Selektiert eine bestimmte Menge von Objekten und gibt diese in Form einer Array zurück. Filter schränken also ein bestimmten Datenbestand aufgrund bestimmter Kriterien ein und zeigen nur noch diese an.
  • Directives: Sind Markes von DOM-Elementen wie Elemente, Attribute, Css usw. Das Schöne in AngularJS ist vor allem die Tatsache, dass sich damit das HTML erweitern lässt.
  • Templates: Vorlagen zeigen sich in Form von Direktiven, Markups, Filter und Form controls. So ist beispielsweise das Markup {{}} eine Form von Template die verwendet wird um Daten in einer View zu füllen.
  • Routing: Verzweigt beispielweise aufgrund einer bestimmter URL auf einen bestimmten Controller und deren HTML-Seite. Könnte auch mit einen Trigger verglichen werden der wenn er ausgelöst wird eine bestimmte Tätigkeiten ausführt.
  • Model View Whatever: Entspricht dem MVC geht aber über das hinaus. AngularJS lässt sich daher streng genommen nicht mehr auf das Pattern Model View Controller reduzieren.
  • Deep Linking: Analog dem Routing wird hier auf eine URL verzweigt aufgrund des Status der Applikation.
  • Dependency Injection: Vereinfacht gesagt lässt sich damit eine bestimmte Funktion mit weiteren Verhalten und Werten erweitern. Dies könnten sein: value, constant, factory, service und provider.