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