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

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>