Node.js
Node.js (express.js) mit angle.js Beispielcode

Einführung

Unser Projekt erstellen

Wir sind gut zu gehen, also laufen wir wieder von der Konsole:

mkdir our_project
cd our_project

Jetzt sind wir an dem Ort, an dem unser Code leben wird. Um das Hauptarchiv unseres Projekts zu erstellen, können Sie es ausführen

Ok, aber wie erstellen wir das Express-Skelett-Projekt?

Es ist einfach:

npm install -g express express-generator

Linux-Distributoren und Mac sollten sudo verwenden , um dies zu installieren, da sie im Verzeichnis nodejs installiert sind, auf das nur der root- Benutzer zugreifen kann. Wenn alles gut gelaufen ist, können wir endlich das Express-App-Skelett erstellen, einfach ausführen

express

Dieser Befehl erstellt in unserem Ordner eine Express-Beispielanwendung. Die Struktur ist wie folgt:

bin/
public/
routes/
views/
app.js
package.json

Wenn wir npm starten, gehen Sie zu http: // localhost: 3000 und sehen die Express-App betriebsbereit. Fairerweise haben wir eine Express-App ohne allzu große Umstände generiert. .

Wie funktioniert Express, kurz?

Express ist ein Framework, das auf Nodejs aufgebaut ist. Die offizielle Dokumentation finden Sie auf der Express-Site . Für unseren Zweck müssen wir jedoch wissen, dass Express für die Wiedergabe der Startseite unserer Anwendung beispielsweise http: // localhost: 3000 / home verantwortlich ist . In der kürzlich erstellten App können wir Folgendes überprüfen:

FILE: routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

Was dieser Code uns sagt , ist , dass , wenn der Benutzer geht auf http: // localhost: 3000 muss die Indexansicht machen und einen JSON mit einem Titel - Eigenschaft und Wert Express übergeben. Wenn wir jedoch das Views-Verzeichnis überprüfen und index.jade öffnen, können wir Folgendes sehen:

extends layout
block content
    h1= title
    p Welcome to #{title}

Dies ist eine weitere leistungsstarke Express-Funktion, Template Engines . Sie ermöglichen das Rendern von Inhalten auf der Seite durch Übergabe von Variablen oder das Erben einer anderen Vorlage, sodass Ihre Seiten kompakter und für andere verständlicher sind. Die Dateierweiterung ist .jade , soweit ich weiß, dass Jade den Namen für Pug geändert hat, im Grunde ist es die gleiche Template-Engine, jedoch mit einigen Updates und Kernmodifikationen.

Pug installieren und Express Template Engine aktualisieren.

Ok, um Pug als Template Engine für unser Projekt zu verwenden, müssen wir Folgendes ausführen:

npm install --save pug

Dadurch wird Pug als Abhängigkeit von unserem Projekt installiert und in package.json gespeichert . Um es zu benutzen, müssen wir die Datei app.js ändern :

var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

Und ersetzen Sie die Sichtlinienmaschine durch Mops, und das ist alles. Wir können unser Projekt erneut mit npm start ausführen und wir werden sehen, dass alles gut funktioniert.

Wie passt AngularJS in all das?

AngularJS ist ein Javascript- MVW -Framework (Model-View-Whatever), das hauptsächlich zum Erstellen von SPA (Simple Page Application) verwendet wird. Die Installation ist relativ einfach. Sie können die AngularJS-Website besuchen und die neueste Version v1.6.4 herunterladen .

Nach dem Herunterladen von AngularJS, wenn die Datei in unseren öffentlichen / javascripts- Ordner in unserem Projekt kopiert werden soll, eine kleine Erklärung. Dies ist der Ordner, der die statischen Assets unserer Website, Bilder, CSS, Javacipt-Dateien usw. bereitstellt. Natürlich ist dies über die app.js- Datei konfigurierbar, aber wir machen es einfach. Jetzt erstellen wir eine Datei namens ng-app.js , die Datei, in der sich unsere Anwendung befindet, in unserem öffentlichen Ordner "javascripts", genau dort, wo AngularJS lebt. Um AngularJS auf den neuesten Stand zu bringen, müssen wir den Inhalt von views / layout.pug wie folgt ändern:

doctype html
html(ng-app='first-app')
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body(ng-controller='indexController')
    block content

  script(type='text-javascript', src='javascripts/angular.min.js')
  script(type='text-javascript', src='javascripts/ng-app.js')

Was machen wir hier? Nun , wir enthalten AngularJS Core und unsere kürzlich erstellte Datei ng-app.js. Wenn also die Vorlage gerendert wird, wird AngularJS aktiviert. Beachten Sie die Verwendung der ng-app- Direktive AngularJS, dass dies unser Anwendungsname ist und dabei bleiben sollte.
Der Inhalt unserer ng-app.js ist also:

angular.module('first-app', [])
       .controller('indexController', ['$scope', indexController]);

function indexController($scope) {
    $scope.name = 'sigfried';
}

Wir verwenden hier die grundlegendste AngularJS-Funktion, die bidirektionale Datenbindung. Dadurch können wir den Inhalt unserer Ansicht und des Controllers sofort aktualisieren. Dies ist eine sehr einfache Erklärung. Sie können jedoch eine Recherche in Google oder StackOverflow durchführen wie es wirklich funktioniert

Wir haben also die grundlegenden Blöcke unserer AngularJS-Anwendung, aber es gibt etwas, das wir tun müssen. Wir müssen unsere index.pug-Seite aktualisieren, um die Änderungen unserer Winkel-App zu sehen. Lassen Sie uns dies tun:

extends layout
block content
  div(ng-controller='indexController')
    h1= title
    p Welcome {{name}}
    input(type='text' ng-model='name')

Hier binden wir nur die Eingabe an unseren definierten Eigenschaftsnamen im AngularJS-Bereich in unserem Controller:

$scope.name = 'sigfried';

Der Zweck davon ist, dass wenn wir den Text in der Eingabe ändern, der Absatz oben den Inhalt innerhalb von {{Name}} aktualisiert, dies wird Interpolation genannt , ein weiteres AngularJS-Feature, um unseren Inhalt in der Vorlage darzustellen.

Nun ist alles eingerichtet, wir können jetzt npm starten. Gehen Sie zu http: // localhost: 3000 und sehen Sie unsere Express-Anwendung, die die Seite bedient, und AngularJS, die das Front-End der Anwendung verwaltet.