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>

Direktiven – Tutorial AngularJS Crashkurs

  • Direktiven sind Markers für ein DOM-Element wie Attribute, Element-Name, Kommentar oder aber eine CSS-Klasse
  • Built-In Direktiven wären beispielsweise ngClass, ngModell usw.
  • Es können auch eigene Direktiven erstellt werden die aber nicht mit ng anfangen sollen, da dieses Kürzel AngularJS vorbehalten sein sollte
  • Direktiven sollten in der camelCased Notation geschrieben werden. Diese werden dann in AngularJS als Markers mit Bindestrich verstanden
  • Folgende Direktiven-Eigenschaften sind vorhanden:
    • restrict: Beschränkt das HTML auf Elemente, Attribute, Klassen oder aber Kommentare
    • replace: Wenn true dann ersetzt dieses aufgrund der template-Eigenschaft den Inhalt im HTML-Anzeigeteil
    • scope: Bezieht sich auf die Möglichkeit ein isolierter Scope anzuwenden
    • template: Enthält die Vorlage die dann im HTML-Anzeigeteil verwendet werden kann
    • templateUrl: Wie auch die template-Eigenschaft, bezieht sich aber auf ein separates HTML-File
    • controllerAs: Der bestehende Controller erhält ein alias der stattdessen verwendet werden kann
    • controller: Wenn notwendig kann eine Direktive einen eigenen Controller enthalten
    • link: Ermöglicht direkte Manipulationen über das Document-Object-Model via scope, element, attrs etc.

Element.html

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

<body>

<div ng-app=„myApp“>
<my-element></my-element>
</div>

<script>
var app = angular.module(„myApp“, []);

app.directive(„myElement“, function() {
return {
restrict: „E“,
template: „<div>My first element</div>“,
};
});
</script>

</body>
</html>

 

Attribut.html

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

<body>

<div ng-app=„myApp“>
<div my-attribute></div>
</div>

<script>
var app = angular.module(„myApp“, []);

app.directive(„myAttribute“, function() {
return {
restrict: „A“,
link: function() {
alert(‚My first attribute‘);
}
}
});
</script>

</body>
</html>

 

Class.html

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

<body>

<div ng-app=„myApp“>
<div class=„my-class“></div>
</div>

<script>
var app = angular.module(„myApp“, []);

app.directive(„myClass“, function() {
return {
restrict: „C“,
link: function() {
alert(‚My first class‘);
}
}
});
</script>

</body>
</html>

jQuery – Tutorial AnglarJS Crashkurs

  • jQuery enthält Funktionen zur DOM-Navigation und Manipulation
  • jQuery Funktionen;
    • Zugriff auf die Elementselektion analog dem CSS-3-Selektoren
    • Ermöglicht Document-Object-Model Manipulationen
    • Erweiterung des Event-System
    • Diverse Hilfsfunktionen die den Code-Aufwand minimieren
    • Es können Animationen und Effekte eingesetzt werden
    • Erweiterte AJAX-Funktionalitäten
    • Erweiterbar durch Plug-ins wie beispielsweise jQuery-UI
  • Einfache Einbindung von jQuery in AngularJS

jQuery.html

<!DOCTYPE html>
<html>
<script src=„http://code.jquery.com/jquery-2.1.0.js“></script>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>jQuery</title>
</head>

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
<ul>
<li ng-repeat=x in pages>
{{x.page}}
</li>
</ul>
</div>

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

app.controller(‚myCtrl‘, function($scope, $element) {
$scope.pages= [
{page:„http://easeflow.net/“},
{page:„http://tiptopplaces.com/“},
{page:„http://easeflow.net/wordpress/“}];

$element.hide();
$element.fadeIn();
});
</script>

</body>

</html>

CSS/Table – Tutorial AngularJS Crashkurs

  • CSS steht für Cascade Style Sheet
  • CSS ermöglicht die Darstellung von den Inhalten zu trennen
  • HTML ermöglicht CSS in Form von Style in HTML einzubinden und zu verwenden
  • Table ermöglichen in HTML Daten in tabellarischer Form einzubinden und mit CSS zu verknüpfen
  • Table ermöglichen in HTML Daten in tabellarischer Form einzubinden und mit CSS zu verknüpfen
  • Über die Direktive ng-repeat können nun die Daten in tabellarischer Form ausgegeben werden und wie gewohnt mit Elementen wie table, tr, td usw. verwendet werden

CSS-Table.html

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

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
<table>
<tr ng-repeat=x in pages>
<td>{{x.page}}</td>
</tr>
</table>
</div>

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

app.controller(‚myCtrl‘, function($scope) {
$scope.pages= [
{page:„http://easeflow.net/“},
{page:„http://tiptopplaces.com/“},
{page:„http://easeflow.net/wordpress/“}];
});
</script>

<style>
table, th , td  {
border:3px solid green;
padding: 1px;
}
</style>

</body>

</html>

Filter – Tutorial AngularJS Crashkurs

  • Filter filtern wie es der Name schon aussagt, können aber im Falle von AngularJS noch viel mehr vielfältigere Aufgaben übernehmen
  • Zwei Arten von Filter sind vorhanden:
    • Formatierungsfilter: Formatieren Werte beispielsweise Buchstaben zu Grossbuchstaben
    • Collection-Filter: Geben je nach dem eine Teilmenge in Form einer Array zurück
  • Folgende Filter-Arten sind vorhanden:
    • uppercase: Konvertiert Buchstaben zu Grossbuchstaben
    • lowercase: Konvertiert Buchstaben zu Kleinbuchstaben
    • currency: Formatiert Text zu einer bestimmten Währung
    • filter: Gibt eine Teilmenge von Daten zurück in Form einer Array
    • orderby: Sortiert eine Array aufgrund bestimmter Kriterien

LowerUppercase.html

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

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
Name uppercase: {{fullName() | uppercase}}
<br>
Name lowercase: {{fullName() | lowercase}}
</div>

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

app.controller(‚myCtrl‘, function($scope) {
$scope.firstName=‚Walter‘;
$scope.lastName=‚Glaser‘;
$scope.site=‚http://easeflow.net/‘;
$scope.eMail=‚walter.glaser@easeflow.net‘;

$scope.fullName= function() {
return $scope.firstName+‚ ‚+$scope.lastName;
}
});
</script>

</body>

</html>

Currency.html

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

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
Total: {{number * price | currency}}
</div>

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

app.controller(‚myCtrl‘, function($scope) {
$scope.number=7;
$scope.price=12.5;
});
</script>

</body>

</html>

OrderBy.html

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

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
<ul>
<li ng-repeat=x in pages | orderBy: ‚page‚“>
{{x.page}}
</li>
</ul>
</div>

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

app.controller(‚myCtrl‘, function($scope) {
$scope.pages= [
{page:„http://easeflow.net/“},
{page:„http://tiptopplaces.com/“},
{page:„http://easeflow.net/wordpress/“}];
});
</script>

</body>

</html

Filter.html

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

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
Search: <input type=„text“ ng-model=„search“ />
<br>
Result: {{pages | filter:search}}
</div>

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

app.controller(‚myCtrl‘, function($scope) {
$scope.pages= [
{page:„http://easeflow.net/“},
{page:„http://tiptopplaces.com/“},
{page:„http://easeflow.net/wordpress/“}];
});
</script>

</body>
</html>

 

HTML DOM – Tutorial AngularJS Crashkurs

  • AngularJS enthält Direktiven die es ermöglichen HTML-DOM-Elemente zu binden
  • Folgende Direktiven werden zu DOM-Bindung eingesetzt:
    • ng-show: Zeigt ein bestimmtes Control an
    • ng-hide: Verbirgt ein bestimmtes Control
    • ng-disabled: Deaktiviert ein bestimmtes Control

 

Binding.html

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

<body>

<div ng-app = „“>
<table>
<tr>
<td><input type = „checkbox“ ng-model = „disabled“>Deaktiviere Button</td>
<td><button ng-disabled = „disabled“>Button</button></td>
</tr>

<tr>
<td><input type = „checkbox“ ng-model = „show“>Anzeigen Button</td>
<td><button ng-show = „show“>Button</button></td>
</tr>

<tr>
<td><input type = „checkbox“ ng-model = „hide“>Verstecken Button</td>
<td><button ng-hide = „hide“>Button</button></td>
</tr>
</table>

</div>

</body>

</html>

 

Dependendency Injection – Tutorial AngularJS Crashkurs

  • Dependency Injection ist ein Entwurfsmuster welches die Abhängigkeiten eines Objektes regelt
  • Erzeugte Abhängigkeiten werden nicht vom initialisierten Objekt selbst erzeugt sondern in einer zentralen Komponente verwaltet
  • Der grosse Vorteil der Dependency Injection ist das wegfallen von Aufgaben die das verwalten von Abhängigkeiten betrifft und somit ein bestimmtes Objekt entlastet es und mehr auf seine wesentlichen Aufgaben konzentrieren lässt
  • Durch das wegfallen der Verwaltung von Abhängigkeiten wird ein Objekt noch mehr freier von unnötigen Beziehungen zu anderen Objekten und kann daher flexibler eingesetzt werden
  • Dependency Injection wird u.a. in Services verwendet wie:
    • Constant
    • Value
    • Service
    • Factory
    • Provider
  • Verweis: Bitte zuvor noch den Crashkurs über Scopes anschauen da dies u.a. auch Dependency Injection behandelt

Value.html

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

<body ng-app=„myApp“ ng-controller=myCtrl>

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

app.controller(‚myCtrl‘,function($scope, nbrValue) {
console.log(nbrValue);
});
</script>
</body>

</html>

 

Factory.html

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

<body ng-app=„myApp“ ng-controller=myCtrl>

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

myApp.value(’stringValue‘, ‚Factory‘);

myApp.factory(‚myFactory‘, function(stringValue) {
return ‚Value:‘+ stringValue;
});

myApp.controller(‚myCtrl‘, function($scope, myFactory) {
console.log(myFactory);
});
</script>

</body>

</html

 

Service.html

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

<body ng-app=„myApp“ ng-controller=myCtrl>

<script>
var myApp = angular.module(„myApp“, []);

myApp.service(„myService“, myService);

function myService() {
this.execute = function() {
console.log(„myService“);
}
}

myApp.controller(„myCtrl“, function($scope, myService) {
myService.execute();
});
</script>

</body>

</html>

Validation – Tutorial AngularJS Crashkurs

  • Formulare bieten Services an wie die Gültigkeitsprüfung von Controls
  • Die Validationen erfolgen auf der Client-Seite und reduzieren daher den Aufwand der Prüfungen auf der Server-Seite
  • CSS sprich Cascade-Style-Sheets können eingesetzt werden um beispielsweise Formular-Felder farblich auf einen bestimmten Status zu setzen
  • Für die Validation werden folgende Zustandseigenschaften eingesetzt:
    – $valid / $invalid – Enthält den Gültigkeitsstatus eines Feldes
    – $pristine – Zeigt ob mit einen bestimmten Feld schon eine Interaktion stattgefunden hat
    – $dirty – Ist die Umkehrung von $pristine
    – $error – Enthält das Fehlerobjekt mit dem Error-Zustand des Objektes

Validation.html

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

<body>
<form ng-app=„myApp“ ng-controller=myCtrl“  name=„myForm“ novalidate>

Name: <input type=„text“ name=„name“ ng-model=„name“ required>
<span style=color:red“ ng-show=myForm.name.$dirty && myForm.name.$invalid>
<span ng-show=myForm.name.$error.required>Bitte geben Sie den Namen ein</span></span>

<br>

E-Mail: <input type=„email“ name=„email“ ng-model=„email“ required>
<span style=color:red“ ng-show=myForm.email.$dirty && myForm.email.$invalid>
<span ng-show=myForm.email.$error.required>Es muss eine Email-Adresse eingegeben werden</span>
<span ng-show=myForm.email.$error.email>Die Email-Adresse ist ungültig</span></span>

<br>

<input type=„submit“ ng-disabled=
myForm.name.$dirty &&
myForm.name.$invalid ||
myForm.email.$dirty &&
myForm.email.$invalid>
</form>

<script>
var app=angular.module(‚myApp‘,[]);
app.controller(‚myCtrl‘, function($scope) {
$scope.name=‚Walter Glaser‘;
$scope.email=‚walter.glaser@easeflow.net‘;
});
</script>

</body>
</html>

 

Forms – Tutorial AngularJS Crashkurs

  • Ein Formular ist ein Kontainer für die darin befindlichen Elemente
  • Ein Formlar wird durch das Form-Element definiert und sollte das Attribut novalidate enthalten, da AngularJS eigene Mechanismen der Validation von Hause aus mitbringt
  • Es gibt die verschiedensten Elemente wie beispielsweise, das Input Element das wiederum verschiedene Rollen übernehmen kann wie die Rolle einer Checkbox, Radiobutton, Editfeld etc.
  • Das Objekt Angular enthält verschiedene Methoden darunter unter anderen. die Funktion copy die sich bestens für Formular-Operationen eignet

Forms.html

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

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
<form novalidate>
First Name: <input type=„text“ ng-model=„person.firstName“><br>
Last Name:  <input type=„text“ ng-model=„person.lastName“><br>

<button ng-click=restore()“>Restore</button>
</form>

<p>Person = {{person }}</p>
<p>Save = {{savePerson}}</p>
</div>

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

app.controller(‚myCtrl‘, function($scope) {
$scope.savePerson = {firstName:„Walter“, lastName:„Glaser“};

$scope.restore = function() {
$scope.person = angular.copy($scope.savePerson);
};

$scope.restore();
});
</script>

</body>
</html>

 

 

Events – Tutorial AngularJS Crashkurs

  • Events ermöglichen von aussen kommenden Ereignissen programmtechnisch zu reagieren
  • AngularJS enthält eigene Ereignisse die vor den Javascript-Events verwendet werden sollen
  • Auszug von AngularJS Events:
    • ng-blur
    • ng-change
    • ng-click
    • ng-dblclick
    • ng-focus
    • ng-keydown
    • ng-keyup
    • ng-keypress
    • ng-mousedown
    • ng-mouseenter
    • ng-mouseleave
    • ng-mousemove
    • ng-mouseover

 

Events.html

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

<body ng-app=„myApp“>
<div ng-controller=myCtrl>
Name: <input type=„text“ ng-model=„name“/>

<button ng-click=showName(name)“>Show Name</button>
</div>

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

myApp.controller(‚myCtrl‘, function($scope, $window) {
$scope.name= ‚Walter Glaser‘;

$scope.showName=function(name) {
$window.alert(name)
}
});
</script>

</body>
</html>