Include – Tutorial AngularJS Crashkurs

  • Der Injector wird verwendet um Objekte die als Provider, instanzierter Typ, aufgerufene Methoden oder geladene Module zu erhalten
  • Warum braucht es die Dependency Injection
    • Separiert den Prozess zwischen Erstellung und Konsumierung von Abhängigkeiten
    • Der Verwender eine Dependency Injection muss sich nur noch Gedanken darüber machen, wie er sie zu verwenden hat, nicht aber um deren Erstellung wie dies bei Objektorientierten Sprachen via Konstruktor der Fall ist
    • Unterstützt auch das Mock-Objekte die für das Testen verwendet werden

Injector-Invoke.html

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

<body>
<div ng-app=„myApp“>
<div ng-controller=„myCtrl“>
<button ng-click=„setValue()“>Button</button>
{{value}}
</div>
</div>

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

app.factory(‚inject‘,function(){
return {
value: ‚http://tiptopplaces.com/‘
};
});

app.controller(‚myCtrl‘,function($scope,inject,$injector){
$scope.value=‚http://easeflow.net/‘;

$scope.setValue=function(inject){
$injector.invoke(function(inject) {
$scope.value=inject.value;
});
};
});
</script>

</body>

</html>

Injector.html

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

<body>
<div ng-app=„myApp“>
<div ng-controller=myCtrl>
<button ng-click=setValue()“>Button</button>
{{value()}}
</div>
</div>

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

myApp.service(‚inject‘,function() {
this.value=‚http://easeflow.net/‘;
});

myApp.controller(‚myCtrl‘,function($scope,$injector){
$scope.setValue=function(){
var inject=$injector.get(‚inject‘);
inject.value=‚http://tiptopplaces.com/‘;
};

$scope.value=function(){
var inject=$injector.get(‚inject‘);
return inject.value;
};
});
</script>

</body>

</html>

Isolierter Scope – Tutorial AngularJS Crashkurs

  • Ein isolierter Scope existiert unabhängig vom Parent-Scope und erbt auch nicht von dessen Eigenschaften
  • By default erbt eine Direktive von ihrem Scope, da die Eigenschaft scope auf false gesetzt ist
  • Wird die Eigenschaft scope jedoch auf true gesetzt, erbt diese nicht mehr von ihrem Parent-Scope, kann aber wie auch bei scope=false trotzdem weiterhin auf den Parent-Scope zugreifen
  • Wird nun ein isolierter Scope in einer Direktive definiert, kommen die drei Optionen @,= und & zum Zuge
  • @
  • Bindet Text
  • Notation über {{ }} im HTML
  • =
  • Two-way-Bindung
  • Kann irgendeinen Typ enthalten
  • Notation über “ “ im HTML
  • &
  • On-way-Bindung
  • Kann irgendeinen Typ enthalten
  • Notation über “ “ im HTML
  • Wird vor allem für Funktionen mit Übergabe-Parameter verwendet die Werte von      der Direktive zum Kontroller liefert
  • Verweise
  • Siehe auch Video Scopes – 006
  • Siehe auch Video Direktiven – 015

Isolated-@

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Isolierter Scope – Text binding</title>
</head>
<body>

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

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

app.controller(‚myCtrl‘, function($scope) {
$scope.ctrlValue = ‚http://easeflow.net/‘;
});

app.directive(’string‘, function() {
return {
scope: {
value: ‚@‘
},
template: ‚{{value}}</div>‘
};
});
</script>

</body>

</html>

Isolatet-=

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Isolierter Scope – Two way binding</title>
</head>
<body>

<div ng-app=„myApp“ ng-controller=myCtrl>
<div object value=„ctrlValue“></div>
</div>

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

app.controller(‚myCtrl‘, function($scope) {
$scope.ctrlValue = ‚http://easeflow.net/wordpress‘;
});

app.directive(‚object‘, function() {
return {
scope: {
value: ‚=‘
},
template: ‚<div>{{value}}</div>‘
};
});
</script>

</body>

</html>

Isolated-&

<!DOCTYPE html>
<html>
<script src=“lib/angular.js“></script>
<head lang=“en“>
<meta charset=“UTF-8″>
<title>Isolierter Scope – One way binding</title>
</head>
<body>

<div ng-app=“myApp“ ng-controller=“myCtrl“>
<div invoke param=“execute(message)“></div>
{{message}}
</div>

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

app.controller(„myCtrl“, function($scope) {
$scope.execute=function(message) {
$scope.message=message;
};
});

app.directive(„invoke“, function() {
return {
scope: {
param: „&“
},
template: ‚<input type=“text“ ng-model=“value“>‘  +
‚<button class=“button“ ng-click=“param({message:value})“>Submit</button>‘
};
});
</script>

</body>

UI-Bootstrap – Tutorial AngularJS Crashkurs

  • Ist ein frei erhältliches Framework auf der Basis von HTML5 und CSS 3
  • Enthält basierend auf HTML und CSS Vorlagen für:
    • Buttons
    • Formulare
    • Fortschrittsbalken
    • Grids
    • Horizontale und vertikale Reiter
    • Navigationselemente wie Brotkrümmelnavigation, Paginierung
    • Tabellen
    • und weitere Oberflächengestaltungselemente
  • Des weiteren gibt es sogar JavaScript-Erweiterungen die eingebunden werden können
  • Die JavaScript-Komponenten basieren auf dem Framework jQuery
  • Für das Responsive Webdesign eignet sich Bootstrap hervorragend

index.html

<!DOCTYPE html>
<html>
<link rel=„stylesheet“ href=„node_modules/bootstrap/dist/css/bootstrap.css“>
<script src=„lib/angular.js“></script>
<script src=„lib/angular/angular.min.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>UI-Bootstrap</title>
</head>
<!–Beispiele sind entnommen von: http://getbootstrap.com/components/ –>
<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
<button type=„button“ class=„btn btn-default“ aria-label=„Left Align“>
<span class=„glyphicon glyphicon-align-left“ aria-hidden=„true“></span>
</button>

<button type=„button“ class=„btn btn-default btn-lg“>
<span class=„glyphicon glyphicon-star“ aria-hidden=„true“></span> Star
</button>

<br>

<div class=„btn-group“ role=„group“ aria-label=„…“>
<button type=„button“ class=„btn btn-default“>Left</button>
<button type=„button“ class=„btn btn-default“>Middle</button>
<button type=„button“ class=„btn btn-default“>Right</button>
</div>

<br>

<div class=„btn-group“ role=„group“ aria-label=„…“>
<button type=„button“ class=„btn btn-default“>1</button>
<button type=„button“ class=„btn btn-default“>2</button>

<div class=„btn-group“ role=„group“>
<button type=„button“ class=„btn btn-default dropdown-toggle“ data-toggle=„dropdown“ aria-haspopup=„true“ aria-expanded=„false“>
Dropdown
<span class=„caret“></span>
</button>
<ul class=„dropdown-menu“>
<li><a href=„#“>Dropdown link</a></li>
<li><a href=„#“>Dropdown link</a></li>
</ul>
</div>
</div>
</div>

</body>

</html>

REST – Tutorial AngularJS Crashkurs

  • REST steht für Representational state transfer
  • Via HTTP wird über Methoden wie GET, POST, PUT, DELETE usw. zugegriffen
  • REST zeichnet sich aus für:
    • Einfachheit der Interface
    • Modifizierbarkeit der Komponenten sogar während der Laufzeit
    • Sichtbarkeit der Komponenten und des Anbieters der Services
    • Portierbarkeit
    • Verlässlichkeit
  • AngularJS stellt den Service $resource zur Kommunikation mit RESTful backends zur Verfügung und muss über angular-resource.js eingebunden werden
  • REST arbeitet Hand in Hand mit dem JSON-Format zusammen
  • ngMockE2E ermöglicht es eine REST-Attrappe ohne echte Kommunikation zu einen Server aufzubauen und muss über angular-mocks.js eingebunden werden
  • Zur besseren Handhabung von Rest-Client die Advanced Rest Client App installieren unter: https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo oder aber zu Googeln unter: crome extensions restclient
  • Der RestClient kann aufgerufen werden mit: chrome-extension://hgmloofddffdnphfgcellkdfbfbjeloo/RestClient.html

index.html

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

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

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

app.controller(‚myCtrl‘, function($scope, $http, $resource, $log) {

$http({
method: ‚GET‘,
url: ‚http://localhost:3000‘,

}).then(function successCallback(response) {
$scope.pages = response.data;
$log.debug(response);

}, function errorCallback(response) {
alert(‚Error‘);
$log.debug(response);
});
});
</script>

</body>

</html>

server.js

var express=require(‚express‘);
var mongoose=require(‚mongoose‘);
var cors=require(‚cors‘);

mongoose.connect(‚mongodb://localhost/pages‘);

var PageSchema={
page: String
};

var Page=mongoose.model(‚Page‘,PageSchema);
var app=express();

app.use(cors());

app.get(‚/‘,function(req,res){
console.log(‚Get Data‘);
Page.find(function(err,data){
res.send(data);
});
});

app.listen(3000);
console.log(‚Running‘);

MEAN Stack – Tutorial AngularJS Crashkurs

MEAN-Stack

  • MEAN-Stack ist eine Open-Source JavaScript Software für das Entwickeln von dynamischen Web-Sites and Web-Applikationen
  • MEAN setzt sich zusammen aus:
    • MongoDB
    • js
    • AngularJS
    • js
  • Für den MEAN-Stack wird JavaScript verwendet der sowohl Server- und Client-seitig angewendet wird

MongoDB

NoSQL

Dokumenten Speicher

  • Unterstützt XML und JSON
  • Kann mehrere Datenbanken und diese wiederum können mehrere Kollektionen enthalten
  • Individuelle Dokumente können unterschiedliche Strukturen enthalten
  • Jedes Dokument hat ein individueller Schlüssel
  • Es gibt eine Query-Abfragesprache um Felder abzufragen

Key-Value Speicher

  • Query können nur explizit nach einen bestimmten Key abgefragt werden
  • Je nach NoSQL DB können mehre Key-Values definiert werden

BigTable/tabulars

  • Jede Reihe kann verschiedene Set´s von Spalten enthalten
  • Wurde vor allem für eine grosse Anzahl von Spalten entwickelt
  • Reihen sind normalerweise versioniert

Graph

  • Eignet sich vor allem für vernetzte Nodes

Objekt Datenbank

  • Eignet sich hervorragend für die Objektorientierte Programmierung
  • Auf Stufe Persistenz-Layer können Objekte gespeichert werden
  • Objekte können untereinander via Pointers verlinkt werden

Weitere Datenbanken

  • Riak
  • Apache Cassandra
  • CouchDB
  • Redis

Express.js

  • Siehe HTTP Get-Express – 019

AngularJS

  • Siehe Intro – 001
  • Siehe Core Features – 002

Node.js

  • Unterstützt Netzwerkanwendungen die serverseitig ablaufen
  • Webserver lassen sich mit Node.js einfach realisieren
  • js bietet eine ressourcensparende Architektur in der eine grosse Anzahl gleichzeitig bestehender Netzwerkverbindungen möglich ist
  • js kann mit JavaScript programmiert werden das eine ereignisgesteuerte Architektur vorgibt und damit Arbeitsspeicher spart

index.html

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

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

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

app.controller(‚myCtrl‘, function($scope, $http, $log) {

$http({
method: ‚GET‘,
url: ‚http://localhost:3000‘,
}).then(function successCallback(response) {
$scope.pages = response.data;
$log.debug(response);

}, function errorCallback(response) {
alert(‚Error‘);
$log.debug(response);
});
});
</script>

</body>

</html>

server.js

var express=require(‚express‘);
var mongoose=require(‚mongoose‘);
var cors=require(‚cors‘);

mongoose.connect(‚mongodb://localhost/pages‘);

var PageSchema={
page: String
};

var Page=mongoose.model(‚Page‘,PageSchema);
var app=express();

app.use(cors());

app.get(‚/‘,function(req,res){
console.log(‚Get Data‘);
Page.find(function(err,data){
res.send(data);
});
});

app.listen(3000);