Erste Schritte beim Erstellen einer Website mit AngularJS + Express JS

Ab März wurde mir eine neue Aufgabe im Bereich UI-Entwicklung zugewiesen, bei der Technologien wie AngularJS und Express JS zum Einsatz kamen. Daher nutzte ich die Gelegenheit, an Wochenenden die neuen Technologien zu erlernen.

Die UI-Architektur des Produkts unseres Teams sieht wie folgt aus:

Das Frontend verwendet hauptsächlich das AngularJS-Framework, kombiniert mitBootstrapden vielen von ihm bereitgestellten Steuerelementen, sowie JQuery. Das Backend verwendet hauptsächlich einen mit Express JS erstellten Web Server. Express JS lässt sich sehr komfortabel mit Nginx einsetzen.

Infolgedessen hatte ich, als das Projekt nicht ausgelastet war, die Zeit und das Interesse, AngularJS und Express JS zu lernen.

Gleichzeitig habe ich ein sehr einfaches Website-Beispiel mit AngularJS + Express JS umgesetzt.

I. AngularJS

AngularJS ist ein Projekt, das von Google-Mitarbeitern entwickelt und später von Google gepflegt wurde. Die neueste Version 1.4 und die stabile Version 1.3.15 können Sie von https://angularjs.org/ herunterladen. Um AngularJS zu lernen, besuchen Sie bitteAngularJS-Tutorial 。

Einfach ausgedrückt ist AngularJS einJavascript-Framework, das im Frontend läuft.Seine beiden Hauptmerkmale sind das Erweitern von HTML durchDirektivenund durchAusdrückeDaten an HTML zu binden. Es bietet außerdem Controller, Filter, Factory-Dienste usw.

Da AngularJS im Frontend läuft,kann es mit jeder serverseitigen Technologie kombiniert werden,und es passt hervorragend zu Express JS.

AngularJS wurde geschaffen, um die Nachteile der DOM-Manipulation in statischen Webseiten zu beheben,und eignet sich für die Entwicklung dynamischer Webanwendungen.。

Das Prinzip von AngularJS lässt sich anhand des folgenden Diagramms verstehen:

Hier sind einige wichtige Konzepte von AngularJS:

1. Controller

Um die Daten in einer Webseite dynamisch zu manipulieren, können wir einen Controller für die HTML-Seite schreiben. Ein Controller ist im Wesentlichen eine Javascript-Methode. Zum Beispiel können wir für jede HTML-Seite eine entsprechende Javascript-Methode als Controller schreiben, um die Daten auf der Seite zu steuern. Wie folgt:

index.html

<!doctype html>
<html ng-app="myApp">
    <head>
        <script src="lib/angular-1.3.15/angular.js.html"></script>
        <script src="lib/angular-1.3.15/angular-route.js.html"></script>
        <script src="js/controller.js.html"></script>
        <script src="js/angularMainApp.js.html"></script>
    </head>
    <body ng-view>
        <div>
            <p>Hello {{name}}</p>
        </div>
    </body>
</html>

Dies ist eine Seite, die mit einem AngularJS-Controller geschrieben wurde. Geben Sie die AngularJS-App als myApp an. Beachten Sie den Ausdruck {{name}}; name ist eine dynamische Variable. Woher kommt der Wert von name? Er wird name im entsprechenden Controller zugewiesen, sodass Benutzer beim Besuch der index.html-Seite den echten Wert von name sehen können.

controller.js

// Declare angular JS level module wich depends on filters, and services
var myControllers = angular.module('myControllers', []);

// controller
myControllers.controller('indexContrl', ['$scope', function ($scope) {
    $scope.name = "Kevin";
}]);

In controller.js definieren wir einen Controller namens indexContrl, der in index.html einen Wert an name zuweist. Natürlich wird der Controller-Code in der realen Entwicklung definitiv groß sein. Ich schlage vor, jeden Controller wie indexContrl in eine separate JS-Datei zu legen, was standardisierter und einfacher zu warten ist.

Es gibt ein Problem:Wie wird indexContrl mit index.html verknüpft? Woher weiß AngularJS, dass wir indexContrl verwenden wollen, um index.html zu steuern?

Es gibt zwei Möglichkeiten. Eine besteht darin, es direkt in index.html anzugeben:

        <div ng-controller="indexContrl">
            <p>Hello {{name}}</p>
        </div>

Aber dieser Ansatz ist für große Websites zu umständlich. Es wird empfohlen, einen anderen Weg zu verwenden, nämlich ein anderes Modul von AngularJSng-routezur Routensteuerung zu nutzen. Definieren Sie für unterschiedliche Pfade die jeweiligen Controller in derselben Datei. Wie folgt:

myAngularApp.js

// Declare angular JS level module wich depends on filters, and services
var myApp = angular.module('myApp', [ 'ngRoute', 'myControllers']);

// route
myApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
        when(
                '/',
                {
                    templateUrl: 'index.html',
                    controller: 'indexContrl'
                }
        ).
        otherwise( {
            redirectTo: '/404'
        });
    }
]);

Es ist wichtig zu beachten, dass Sie ng-route im myApp-Modul referenzieren und außerdem die Datei angular-route.js in Ihre Seite einbinden müssen; andernfalls funktioniert es nicht.

Auf diese Weise werden die Daten in der Seite index.html von der Funktion indexContrl gesteuert. Dies ist nur eine einfache Demo; für weitere Funktionen müssen Sie die Dokumentation lesen.

2. Filter

AngularJS bietet Filterfunktionalität. Im Wesentlichen definieren wir einige gängige Methoden, um die Datenausgabe auf der Seite zu formatieren. Das ist sehr praktisch.

Es wird empfohlen, sie während der Entwicklung in eine separate Datei Filter.js zu legen.

3. Factory-Service

Es ermöglicht uns außerdem, einige gängige Methoden als Services zu definieren. Allerdings werden alle Services verzögert instanziiert; sie werden erst instanziiert, wenn sie verwendet oder benötigt werden, und sie sind alle Singletons.

Es wird empfohlen, sie während der Entwicklung in einer separaten Factory.js-Datei abzulegen.

II. Express JS

Im Frontend des Beispiels haben wir das AngularJS-Framework verwendet, um HTML-Seiten und entsprechende JS-Dateien zu entwickeln. Aber das Backend der Website erfordert andere Technologien. Wenn wir Node.js als Backend verwenden möchten, ist es sehr einfach; http.createServer reicht aus. In der realen Website-Entwicklung ist Express JS jedoch besser geeignet.

Express JS ist derzeit das beliebteste Webentwicklungs-Framework auf Basis von Node.js, das verschiedene Module wie Session und Cookie bereitstellt und schnell eine voll funktionsfähige Website erstellen kann.

Im Wesentlichen wird Express JSauf Basis des integrierten http-Moduls von Node.js entwickelt..

Express JS lässt sich sehr bequem mit dem Nginx-Reverse-Proxy-Server verwenden.

Hier ist ein wichtiges Konzept von Express JSMiddleware; Sie können viele von Express JS oder anderen bereitgestellte Module als Middleware laden und verwenden. Ihre Aufgabe ist es, HTTP-Anfragen zu verarbeiten. Nachdem eine Middleware die Verarbeitung abgeschlossen hat, kann sie an die nächste Middleware weitergegeben werden.

Sie können NPM verwenden, um Express JS herunterzuladen.

npm install express

Wenn Sie schnell mit Express JS ein Website-Backend erstellen möchten, empfehle ich ein Tool namens express-generator. Es kann Ihnen helfen, schnell ein Express JS-Projekt zu erstellen und die erforderlichen Dateien zu generieren.

npm install -g express-generator

Aber hier habe ich festgestellt, dass express-generator ziemlich viele andere Module verwendet, wie Jade für das View-Rendering, was etwas kompliziert ist. Trotzdem habe ich es als Referenz verwendet und selbst ein einfachstes Express JS-Projekt erstellt.

Der Pfad ist wie folgt:

Der public-Ordner enthält UI-bezogene Dateien, wie folgt:

Unter ihnen ist app.js die Einstiegsdatei von Express JS, äquivalent zur main-Funktion.

app.js

var express = require('express');
var http    = require('http');
var path    = require('path');
var routes  = require('./routes/index');

var app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);

http.createServer(app).listen(3000);

Hier verwenden wir Express JS, um einen Server zu erstellen. Beachten Sie, dass Zeile 8 den Ordner für Seiten angibt und Zeile 10 die Routeninformationen für den Pfad / in der Datei index im Ordner routes definiert.Die Reihenfolge dieser beiden Zeilen darf nicht falsch sein.。

routes/index

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;

Das bedeutet, dass bei Anfragen an den Pfad / nach der Datei index.html im Ordner public gesucht wird.

Auf diese Weise, mit einem einzigen Befehl,

node app.js

können Sie die Website starten.

III. Beispielergebnisse und Zusammenfassung

Besuchen Sie schließlich die Website, und Sie können das korrekte Ergebnis sehen. Die Website ist online, und die Variablen auf der Seite wurden vom AngularJS-Controller durch die korrekten Daten ersetzt.

Lassen Sie mich einen kleinen Punkt erwähnen. Beim ersten Test wurden die Variablen auf der Seite egal was ich tat nicht ersetzt. Ich verbrachte Stunden, tauschte die AngularJS-Bibliothek aus, änderte den Controller-Code, alles vergebens. Schließlich fand ich nach Prüfung von Referenzen und Dokumentation heraus, dass es nur dann funktioniert, wenn die Seiteng-viewenthält, funktioniert es. So ist das also ... Was für eine Qual ...

Dieser Artikel stellt nur ein sehr einfaches Beispiel für den Aufbau einer Website mit AngularJS + Express JS vor. Ich hoffe, er ist nützlich für Sie.

Originalartikel: http://www.cnblogs.com/KevinSong/p/4495729.html