der schnellste Webserver der Welt

Mit wenigen Schritten könnt ihr euren eigenen NodeJS Testserver erstellen und Daten an der Oberfläche anzeigen.

Unser Ziel:

1. Node installieren
2. Node verwenden
3. Server selbst programmieren
4. HTML und JavaScript Dateien ausliefern
5. Kommunikation Server ====== Client

Dann lasst uns mal starten.

Server

NodeJS installieren nodejs.org

Schritt 2:
Ordner erstellen in dem ihr eure Erste Testapplikation erstellen wollt.
In dem Ordner eine Datei package.json erstellen.

Diese zeigt dem Node Package Manager (der Paketverwaltung) an welche Pakete für euer Projekt heruntergeladen und installiert werden müssen.

{
"name": "nodeSeed",
"version": "0.1.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "~1.10.2",
"express": "~4.11.1"
}
}

Perfekt, jetzt rufen wir aus der Kommandozeile den Befehl


npm install

auf. Hierdurch installiert der Node Package Manager alle benötigten Pakete, in unserem Fall body-parser und express. Das ganze sollte dann ungefähr so aussehen
Schritt 3:
Erstellt eine Datei server.js in eurem Ordner und fügt folgenden Inhalt ein

var express = require('express');
var bodyParser = require('body-parser')
var app = express();
var port = 7000;
http = require('http'),
path = require('path'),
app.use(express.static(path.join(__dirname, 'public')));
app.use( bodyParser.json() ); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({
extended: true
})); // to support URL-encoded bodies
http.createServer(app).listen(port);
console.log('Server listen on port : ' + port);

Super! Jetzt haben wir unseren ersten eigenen Server programmiert
Sieht wenig aus, oder?

Wenn ihr jetzt in der Kommandozeile in eurem Ordner node server.js aufruft lauscht euer Server auf dem Port 7000.

Schritt 4 (Der Client Code):
Jetzt müssen wir nur noch einen Ordner public erstellen in dem wir eine Datei app.js erstellen.
App.js wird unseren Client Code enthalten. Ist also für alles was dem User angezeigt wird verantwortlich.


angular.module('testApp', [])
.controller('ArticlesCtrl', function($scope){
$scope.articles = [
{ id: 1, name: "Pizza Vegetaria", price: 5 },
{ id: 2, name: "Pizza Salami", price: 5.5 },
{ id: 3, name: "Pizza Thunfisch", price: 6 }
];
});


Zeile 1 definiert den Namen unseres Moduls, dieser kann natürlich von euch frei gewählt werden. testApp passt aber erstmal für unsere Zwecke.
Zeile 2 zeigt, was unser Controller, also die Verarbeitungsschicht alles kann. Javascript Kenner werden sich hier schon wie zu hause fühlen.
Die restlichen Zeilen enthalten unsere Testdaten. Alles in JSON, also einfach zu lesen und zu verstehen.

Schritt 5:
Zum Clientcode gehört neben dem Javascript Teil natürlich auch noch HTML.
Denn was wäre eine Webseite ohne HTML?
Legt direkt neben der app.js Datei eine index.html Datei mit folgendem Inhalt an.

Mein erster Angular Test Mein erste Angular JS Test Applikation 
{{article.name}}{{article.price}}

Im Head definieren wird die JavaScript importe, also AngularJS und unsere app.js.
Im Body können wir die Funktionen (im Angular-Jargon Direktiven) ng-repeat verwenden.

So, jetzt können uns im Browser unter http://localhost:7000/ unser Ergebnis anschauen
Das Ergebnis sieht noch nicht wirklich hübsch aus, aber es wird angezeigt!