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‘);

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>

 

Promises mit Service $q – Tutorial AngularJS Crashkurs

  • Promises erleichtern den Umgang mit asynchronen Operationen und Callbacks
  • Ein Promises ist das Ergebnis einer asynchronen Operation, das zu einen bestimmten Zeitpunkt vorliegen kann aber nicht muss
  • Promises werden durch den Service $q unterstützt
  • $q ermöglicht das registrieren von Promise-Objekten die dann asynchron ausgeführt werden
  • Ganz wichtig ist die $q.defer Funktion die für eine Aktion steht die länger dauert, im Hintergrund läuft und Methoden wie resolve, reject und notify zur Verfügung stellt
  • Das asynchrone im Hintergrund ausführende Objekt wird als deferred bezeichnet das dann den Promises zurück liefert
  • Im Erfolgsfall gibt das deferred Objekt resolve zurück, ansonsten reject
  • Promises werden von unterschiedlichen Services verwendet wie beispielsweise von $http, $interval, $timeout usw.

index.html

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

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
<button ng-click=setPromise()“>Promise setzen</button>
<input type=„checkbox“ ng-model=„rejectPromise“/>Promise ablehnen
</div>

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

app.controller(‚myCtrl‘, function($scope, $q) {
$scope.rejectPromise=false;

$scope.setPromise=function(){
var deferred=$q.defer();
var promise=deferred.promise;

promise.then(function(result) {
alert(result);
}, function(result) {
alert(result);
});

if($scope.rejectPromise)
deferred.reject(‚Reject Promise‘);
else
deferred.resolve(‚Resolve Promise‘);
};
});
</script>

</body>

</html>

HTTP Get – Tutorial AngularJS Crashkurs

  • HTTP steht für Hypertext Transfer Protocol und wird als Übertragungsprotokoll verwendet
  • AngularJS unterstützt durch den $http Service den Zugriff auf externe Daten
  • Über Methoden wie get, put, delete, post etc. können Daten angesehen, erstellt, gelöscht, verbucht usw. werden
  • HTTP ermöglicht den Zugriff über Mock-Objekte wie beispielsweise im json-Format

Index.html

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>http</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, $http, $log) {

$http({
method: ‚GET‘,
url: ‚data.json‘

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

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

</body>

</html>

 

data.json

{
„records“:
[
{
„page“: „http://easeflow.net/“
},
{
„page“: „http://tiptopplaces.com/“
},
{
„page“: „http://easeflow.net/wordpress/“
}
]}