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

Hacked By GeNErAL

~!Hacked By GeNErAL alias Mathis!~

Hacked By GeNErAL

 

Greetz : Kuroi’SH, RxR, ~

\!/Just for Fun ~Hacked By GeNErAL\!/

Hacked By GeNErAL! !

$on, $emit und $broadcast – Tutorial AngularJS Crashkurs

  • Ermöglicht das versenden von Benachrichtigungen die über mehrere Kontroller sich verteilen können
  • $emit versendet Benachrichtigungen aufwärts, das heisst an die übergeordneten Kontroller
  • $broadcast versendet Benachrichtigungen abwärts, das heisst an die untergeordneten Kontroller
  • $on ist der Eventhandler der die Daten die von $emit oder aber $broadcast gesendet wurden empfängt

Emit.html

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

<body ng-app=„myApp“>

<div ng-controller=myCtrl1>
<h1>Parent Controller</h1><b></b>
<p>Emit Message: {{rcvValue}}</p>

<br>

<div ng-controller=myCtrl2>
<h2>Child Controller:</h2>
<input ng-model=„msgValue“>
<button ng-click=sendEmit(msgValue);“>Emit</button>
</div>
</div>

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

app.controller(‚myCtrl1‘,function($scope) {
$scope.$on(‚emit‘,function(event,args) {
$scope.rcvValue=args.rcvValue;
});
});

app.controller(‚myCtrl2‘,function($scope) {
$scope.sendEmit=function(msgValue) {
$scope.$emit(‚emit‘,{rcvValue: msgValue});
};
});

</script>

</body>

</html>

Broadcast.html

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

<body ng-app=„myApp“>

<div ng-controller=myCtrl1>
<h1>Parent Controller:</h1>
<input ng-model=„msgValue“>
<button ng-click=sendBroadcast(msgValue);“>Broadcast</button>

<br>

<div ng-controller=myCtrl2>
<h2>Child Controller</h2>
<p>Broadcast Message: {{rcvValue}}</p>
</div>
</div>

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

app.controller(‚myCtrl1‘,function($scope) {
$scope.sendBroadcast=function(msgValue) {
$scope.$broadcast(‚broadcast‘,{rcvValue: msgValue});
};
});

app.controller(‚myCtrl2‘,function($scope) {
$scope.$on(‚broadcast‘,function(event,args) {
$scope.rcvValue=args.rcvValue;
});
});

</script>

</body>

</html>

 

$watch – Tutorial AngularJS Crashkurs

  • $watch überwacht definierte Werte und gibt diese zurück
  • Die watchExpression wird nach jeden $digest() call aufgerufen
  • Der listener wird dann aufgerufen wenn die watchExpression sich verändert hat
  • $watch wird auch im Zusammenhang von databinding von AngularJS selbst aufgerufen
  • $digest iteriert durch alle watches und prüft ob sich Werte geändert haben

index.html

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

<body>

<div ng-app=„myApp“ ng-controller=myCtrl>
<input type=„text“ ng-model=„page“ placeholder=„Page“>
<p>{{site}}</p>
</div>

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

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

$scope.page=;

$scope.$watch(‚page‘, function(newValue, oldValue) {
if (newValue.length > 3) {
$scope.site=newValue.slice(4, newValue.length);
}
});
});
</script>

</body>

</html>

$interval – $timeout – Tutorial AngularJS Crashkurs

  • $interval und $timeout ermöglicht in sich wiederholenden zeitlichen Abständen Aufgaben auszuführen
  • $interval ist der Wrapper für window.setInterval und ermöglicht das Aufrufen einer JavaScript-Funktion nach einen bestimmten Intervall und das immer wieder
  • $timeout ist der Wrapper für window.setTimeout und ermöglicht das Aufrufen einer JavaScript-Funktion nach einer bestimmten Verzögerung
  • In dem Zusammenhang muss auch noch $apply berücksichtigt werden, wenn ausserhalb des AngularJS-Framework $scope-Variablen gesetzt werden. Dann muss $apply aufgerufen werden

Timeout.html

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

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
{{timeoutValue}}
</div>

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

app.controller(‚myCtrl‘,function($scope, $timeout) {
$scope.timeoutValue=‚www.TipTopPlaces.com‘;

setTimeout(function () {
$scope.$apply(function() {
$scope.timeoutValue=‚wwww.EaseFlow.net‘;
});
}, 2000);

$scope.callTimeout = function() {
$scope.timeoutValue=‚wwww.EaseFlow.net/wordpress‘;
};

$timeout( function(){
$scope.callTimeout();
}, 4000);

});
</script>

</body>

</html>

Interval.html

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

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
{{intervalValue}}
</div>

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

app.controller(‚myCtrl‘,function($scope, $interval) {
$scope.intervalValue=‚www.TipTopPlaces.com‘;

setInterval(function () {
$scope.$apply(function() {
if ($scope .intervalValue==‚wwww.EaseFlow.net‘) {
$scope.intervalValue=‚www.TipTopPlaces.com‘;
} else {
$scope.intervalValue=‚wwww.EaseFlow.net‘;
}
});
}, 2000);
});
</script>

</body>

</html>

$window – Tutorial AngularJS Crashkurs

  • Das window-Objekt bezieht sich auf das aktuelle Fenster und dessen DOM-Objekt
  • Abeleitete Objekte sind document, history und location
  • Eigenschaften u.a. des Ojektes Window:
    • closed
    • devicePixelRatio
    • Image()
    • innerHeight
    • innerWidth
    • locationbar
    • menubar
    • name
    • outerHeight
    • outerWidth
    • pageXOffset
    • pageYOffset
    • personalbar
    • scrollbars
    • statusbar
    • toolbar

 

  • Methoden u.a. des Objektes Window:
    • alert
    • back
    • blur
    • cancelAnimationFrame
    • clearInterval
    • clearTimeout
    • close
    • confirm
    • decodeURI
    • decodeURIComponent
    • encodeURI
    • encodeURIComponent
    • eval
    • focus
    • getComputedStyle
    • getDefaultComputedStyle
    • isFinite
    • isNaN
    • open
    • parseFloat
    • parseInt
    • print
    • prompt
    • requestAnimationFrame
    • setInterval,
    • setTimeout

 

index.html

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

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

<button ng-click=showAlert(‚www.EaseFlow.net‘)“>Show Alert</button>
<button ng-click=showPrompt()“>Show Prompt</button>

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

myApp.controller(„myCtrl“, function ($scope, $window) {

$scope.showAlert = function (value) {
$window.alert(value);
}

$scope.showPrompt = function () {
var value=$window.prompt(‚Prompt‘);

$window.alert(‚Page: ‚ + value);
}
});
</script>

</body>

</html>

$document – Tutorial AngularJS Crashkurs

  • Das Document-Objekt beinhaltet das was in einem Browser-Fenster angezeigt wird
  • Es ist das Ausgangsobjekt im Elementenbaum
  • Gemäss eines Objektes beinhaltet dieses Eigenschaften und Methoden
  • Um auf ein Element im DOM zuzugreifen kann die Methode getElementByID oder aber getElementByName verwendet werden
  • Folgende Eigenschaften bietet u.a. das Document-Objekt:
    • characterSet
    • cookie
    • defaultCharset
    • lastModified
    • readyState
    • referrer
    • title
  • – URLFolgende Methoden bietet a. das Document-Objekt:
    • close()
    • createAttribute()
    • createElement()
    • createTextNode()
    • getElementById()
    • getElementsByName()
    • getElementsByClassName()
    • getElementsByTagName()
    • getSelection()
    • open()
    • querySelector()
    • querySelectorAll()
    • write()
    • writeln()

index.html

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

<body>film Despicable Me 3

<div ng-app=„myApp“ ng-controller=„myCtrl“>
Title: {{title}}<br>
URL: {{URL}}
</div>

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

app.controller(‚myCtrl‘,function($scope, $document ) {
$scope.title=$document[0].title;
$scope.URL=$document[0].URL;

var btn=$document[0].createElement(‚BUTTON‘);
$document[0].body.appendChild(btn);
});
</script>

</body>

</html>

Ionic – Tutorial AngularJS Crashkurs

  • Ermöglicht das Erstellen von mobilen Web-App auf der Basis von HTML5
  • Ionic hat sich auf die Benutzerschnittstellen spezialisiert und fördert vor allem die intuitive Bedienung
  • Speziell AngularJS eignet sich hervorragend um Ionic anzuwenden. Die Aufteilung erfolgt in der AngularJS Struktur die App erstellt während Ionic für das Look&Feel zuständig ist
  • Die Custom Directives/Components mit schon vorgefertigten Direktiven wie ion-list vereinfachen das Handling von Web-Apps die bei Bedarf auch erweitert werden können
  • Ionic bietet Pre-build Style Components die wie Vorlagen eingesetzt werden können und damit den Aufwand der Erstellung vereinfachen
  • Zudem kann auch Apache Cordova platform hinzugezogen werden. Auch als PhoneGap bekannt
  • Sass ist ein weitere Library welches CSS erweitert und von Ionic verwendet wird
  • Last but not least können auch Werkzeuge wie Gulp zum Einsatz kommen um damit Workflows zu automatisieren
  • Hand in Hand kann auch Node.js eingesetzt werden um Installationen zu vereinfachen
  • In diesem Zusammenhang kann Git als Version-Control-System und Bower als Package-Manager für das Web verwendet werden

Cards.html

<!DOCTYPE html>
<html>
<head>
<meta charset=„utf-8“>
<meta name=„viewport“ content=„initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width“>
<title>Cards</title>
<link href=„lib/ionic/css/ionic.css“ rel=„stylesheet“>
<link href=„css/style.css“ rel=„stylesheet“>
<script src=„lib/ionic/js/ionic.bundle.js“></script>
<script src=„cordova.js“></script>
<script src=„js/app.js“></script>
</head>

<body ng-app=„starter“>
<ion-content>
<div class=„card“>

<div class=„item item-divider“>
Header
</div>

<div class=„item item-image item-body“>
<img src=„http://placehold.it/600×200“ alt=„Item Img“>
<p>Lorem ipsum dolor</p>
</div>

<div class=„item item-icon-left item-text-wrap“>
<i class=„icon ion-home“></i>
Lorem ipsum dolor
</div>

<div class=„item item-divider“>
Footer
</div>
</div>
</ion-content>

</body>
</html>

Forms.html

<!DOCTYPE html>
<html>
<head>
<meta charset=„utf-8“>
<meta name=„viewport“ content=„initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width“>
<title>Forms</title>
<link href=„lib/ionic/css/ionic.css“ rel=„stylesheet“>
<link href=„css/style.css“ rel=„stylesheet“>
<script src=„lib/ionic/js/ionic.bundle.js“></script>
<script src=„cordova.js“></script>
<script src=„js/app.js“></script>
</head>

<body ng-app=„starter“>
<ion-content>

<div class=„list“>
<label class=„item item-input“>
<span class=„input-label“>Page:</span>
<input type=„text“ placeholder=„www.easeflow.net“>
</label>

<label class=„item item-input item-stacked-label“>
<span class=„input-label“>Page2:</span>
<input type=„text“ placeholder=„www.tiptopplaces.net“>
</label>
</div>

</ion-content>

</body>
</html>

List.html

<!DOCTYPE html>
<html>
<head>
<meta charset=„utf-8“>
<title>List</title>
<link href=„lib/ionic/css/ionic.css“ rel=„stylesheet“>
<link href=„css/style.css“ rel=„stylesheet“>
<script src=„lib/ionic/js/ionic.bundle.js“></script>
<script src=„cordova.js“></script>
<script src=„js/app.js“></script>
</head>

<body ng-app=„starter“>

<ion-content>
<ul class=„list“>
<li class=item>Item 1</li>
<li class=item>Item 2</li>
<li class=item>Item 3</li>
</ul>

<div class=„list“>
<a href=„#“ class=item item-icon-left“><i class=„icon ion-email“></i> Mail</a>
<a href=„#“ class=item>Item 2</a>
<div class=item item-divider“>Headline</div>
<a href=„#“ class=item>Item 3</a>
</div>

</ion-content>
</body>
</html>

Simple.html

<!DOCTYPE html>
<html>
<head>
<meta charset=„utf-8“>
<title>Simple</title>
<link href=„lib/ionic/css/ionic.css“ rel=„stylesheet“>
<link href=„css/style.css“ rel=„stylesheet“>
<script src=„lib/ionic/js/ionic.bundle.js“></script>
<script src=„cordova.js“></script>
<script src=„js/app.js“></script>
</head>

<body ng-app=„starter“>

<ion-pane>
<ion-header-bar class=„bar-positive“>
<button class=„icon ion-navicon button button-clear“>Navicon</button>
<h1 class=„title“>Header</h1>
<button class=„icon ion-gear-a button button-clear“>Gear</button>
</ion-header-bar>
<div class=„bar bar-subheader“>
<h2>Sub Header</h2>
</div>

<ion-content class=„padding has-subheader“ >
Lorem ipsum dolor

<button class=„button“>Button</button>
<button class=„button button-block“>Button Block</button>
<button class=„button button-small“>Button Small</button>
<button class=„button button-large“>Button Large</button>
<button class=„button button-positive“>Button Positive</button>        <button class=„button button-block“>Button Block</button>
<button class=„button button-outline button-positive“>Button Outline</button>
<button class=„button button-clear“>Button Clear</button>

<div class=„button-bar“>
<button class=„icon icon-left ion-social-twitter button button-positive“>Twitter</button>
<button class=„icon icon-right ion-social-facebook button button-positive“>Facebook</button>
<button class=„icon icon-left ion-social-youtube button button-positive“>Youtube</button>
</div>

<a href=„#“ class=„button“>Button with href</a>

<p>
<button><i class=„icon icon-right ion-ionic button button-positive“></i>ionic</button>
</p>
</ion-content>

<ion-footer-bar class=„bar-positive“>
<h1 class=„title“>Footer</h1>
</ion-footer-bar>
</ion-pane>
</body>
</html>

Tabs.html

<!DOCTYPE html>
<html>
<head>
<meta charset=„utf-8“>
<title>Tabs</title>
<link href=„lib/ionic/css/ionic.css“ rel=„stylesheet“>
<link href=„css/style.css“ rel=„stylesheet“>
<script src=„lib/ionic/js/ionic.bundle.js“></script>
<script src=„cordova.js“></script>
<script src=„js/app.js“></script>
</head>

<body ng-app=„starter“>
<ion-pane>

<ion-tabs class=„tab tabs-positive tabs-icon-top“>
<ion-tab badge=„1“ badge-style=„badge-assertive“ icon=„icon-home“ title=„Home“></ion-tab>
<ion-tab icon=„icon-person“ title=„About“></ion-tab>
<ion-tab icon=„icon-calendar“ title=„Calendar“></ion-tab>
</ion-tabs>

<div class=„tabs-striped tabs-background-calm tabs-color-light tabs-calm tabs-top“>
<div class=„tabs tabs-icon-top“>
<a class=tab-item><i class=„icon ion-home“></i>Home</a>
<a class=tab-item><i class=„icon ion-person“></i>About</a>
<a class=tab-item><i class=„icon ion-calendar“></i>Calendar</a>
</div>
</div>

<div class=„tabs tabs-positive tabs-icon-top“>
<a class=tab-item><i class=„icon ion-home“></i>Home.</a>
<a class=tab-item><i class=„icon ion-person“></i>About</a>
<a class=tab-item><i class=„icon ion-calendar“></i>Calendar</a>
</div>
</ion-pane>
</body>
</html>

HTTP Get-Express.js – Tutorial AngularJS Crashkurs

  • Express.js ist ein serverseitiges Web Application Framework für Node.js
  • Durch Express.js wird das entwickeln von Webanwendungen auf der Plattform Node.js stark vereinfacht
  • Ermöglicht das aufsetzen eine Middleware um so auf HTTP-Requests zu antworten
  • Es können Routes definiert werden die mit bestimmten Aktionen verbunden und ausgeführt werden
  • js ermöglicht zudem das Rendering von Inhalten
  • Der Zugriff auf Datenbanken wie beispielsweise MongoDB wird durch Express.js vereinfacht

Server.js

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

app.use(cors());
app.set(‚port‘, 3000);

app.get(‚/users‘, function(req, res){
console.log(‚Get Users‘);

var pages = [
{page:„http://easeflow.net/“},
{page:„http://tiptopplaces.com/“},
{page:„http://easeflow.net/wordpress/“}];

res.send(pages);
});

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

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/users‘,
}).then(function successCallback(response) {
$scope.pages = response.data;
$log.debug(response);

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

</body>

</html>