Einen kleinen Einblick in AngularJS und NodeJS
Mit wenigen Schritten könnt ihr euren eigenen NodeJS Testserver erstellen und Daten an der Oberfläche anzeigen.
Unser Ziel:
NodeJS installieren https://nodejs.org/Unser Ziel:
- Node installieren
- Node verwenden
- Server selbst programmieren
- HTML und JavaScript Dateien ausliefern
- Kommunikation Server ====== Client
Dann lasst uns mal starten.
Server
Mit AngularJS und NodeJS können wir mit wenigen Zeilen Code und Node Paketen einen funktionierenden Testserver erstellen.
Schritt 1:
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
 |
| Quelle: eigene Darstellung |
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.
<html lang="de" ng-app="testApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script src="/app.js"></script>
<title>Mein erster Angular Test</title>
</head>
<body>
Mein erste Angular JS Test Applikation :)
<table class="table" ng-controller="ArticlesCtrl">
<tr ng-repeat="article in articles | filter:search">
<td>{{article.id}}</td>
<td>{{article.name}}</td>
<td>{{article.price}}</td>
</tr>
</table>
</body>
</html>
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:
Ich hoffe euch hat das erste Tutorial - AngularJS Startup guide gefallen. Wenn ihr Fragen oder Anregungen habt, schreibt mir oder hinterlasst einen Kommentar.
Im nächsten Tutorial hübschen wir unsere Webseite dann auf!
