it-swarm.com.de

AngularJS - serverseitiges Rendering

Wie Sie vielleicht wissen, hat AirBnb Rendr ( http://nerds.airbnb.com/weve-open-sourced-rendr ) geöffnet, wodurch das serverseitige Rendern aktiviert werden sollte von Backbone Apps. Das ist cool, weil man die erste "Iteration" des Vorlagen-Renderings auf dem Server ausführen kann und der Client ein vollständig gerendertes HTML-Dokument sowie die gesamte JS-App erhält. Dadurch wird die Anzeigezeit erheblich verkürzt und andere serverseitige Template-Systeme können vermieden werden.

Also, hat es jemand geschafft, AngularJS mit jsdom oder ZombieJS zu rendern? Diese Dom/Browser-Emulationen auf Node.js sollten theoretisch für einfaches serverseitiges Angular templating ausreichen, aber die Ergebnisse, die ich beim Googeln gefunden habe, waren nicht sehr schlüssig.

73
tillda

Hier ist eine andere Lösung: https://github.com/ithkuil/angular-on-server

wiki für Details

Update vom Autor dieses Repos : Das war vor ungefähr 6 Jahren (zum Zeitpunkt dieser Bearbeitung). Zu diesem Zeitpunkt sollten die Benutzer wahrscheinlich https://angular.io/guide/universal oder nur https://prerender.io/ verwenden

13
outluch

Mit diesem neuen Paket https://github.com/a-lucas/angular.js-server können Sie eine Angular=) - Anwendung vorrendern und HTML an die senden Client, der dann den jS-Code ausführt.

Es unterstützt das Cachen per URL und Sie können Regeln definieren, um das URL-Pre-Rendering zu aktivieren.

PS: Ich bin der Hauptverantwortliche für dieses Paket.

6
Antoine Lucas

AngularJS arbeitet ohne Tricks mit dem jsdom-Kontext. Füge angle.js einfach zu js src list und der Hauptseite von angular app zu jsdom bei seiner Initialisierung hinzu.

Daher ist das Rendern sehr einfach: Verwenden Sie einfach angular in jsdom und es funktioniert. Es ist etwas schwieriger, es im Browser darzustellen.

Eine Möglichkeit ist das Batch-Synchronisieren von DOM-Änderungen.

Um dynamische Server-zu-Client-Updates zu erhalten, können Sie MutationEvents verwenden (leider unterstützt jsdom MutationObservers nicht, aber MutationEvents funktionieren ziemlich schnell). Verwenden Sie diese, um DOM-Änderungen im Akkumulator-Array zu stapeln und regelmäßig an den Client-Browser zu senden (z. B. alle 25 ms).

Um Benutzerereignisse zu aktivieren, sollten Sie sie auch dokumentarisch im Browser verfolgen und gleichzeitig sammeln und auf den Server übertragen.

Eine Implementierung eines solchen Ansatzes ist jsdom-sync ( https://www.npmjs.org/package/jsdom-sync )

Ein Nachteil des serverseitigen Renderns ist das Fehlen der Größe des DOM-Boxmodells, da das Element, um Breite/Höhe zu erhalten, tatsächlich gerendert werden sollte. Bedeutet, dass diese Lösung kaum für Svg und so weiter passt.

Sie können auch in Betracht ziehen, das Scope-Modell zu betrachten und es mit browserseitigen Scopes zu synchronisieren, aber das ist eine völlig andere Geschichte.

5
setec

Ich suche auch nach einer Lösung. Es ist jedoch keine Option, den Browser zum Rendern des HTML-Codes auf dem Server und zum Senden an das Frontend zu verwenden. Airbnb versucht es zuerst, lehnt es aber ab, weil es langsam und ressourcenhungrig ist. Es ist keine Produktionslösung.

Update: Dies kann in Kürze mit der Einführung von Object.observe möglich sein;)

4
Aleksandrenko

AngularJS 2.0 kann auch auf einem Server ausgeführt werden. Vojta Jina spricht darüber in "JavaScript Jabber" show # 109 - http://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/ = (32:30 im Spieler). Es gibt einen Link zum neuen AngularJS-Modul für die Abhängigkeitsinjektion - https://github.com/angular/di.js .

4
bullgare

Ich weiß, dass dies eine späte Antwort ist. Angular.js-Server ( https://github.com/a-lucas/angular.js-server ) verwendet eine modifizierte Version von angular, der einen Ruhezustand auslöst, der erforderlich ist, um zu erkennen, wann alle Ajax-Request- und $ compile-Ereignisse verarbeitet werden.

Ich habe es geschafft, den Stapel mean.js fast ohne Modifikation vorzurendern.

2
Ant

Ein Ansatz besteht darin, die HTML-Anforderungen an den NodeJS-Server weiterzuleiten, auf dem PhantomJS ausgeführt werden. Ich habe einen Ansatz verwendet, der auf Phantomen basiert. Probieren Sie es aus, wenn es sich löst

http://himangshu.io/blog/optimizing-single-page-application-using-prerender/

2
himangshuj

@ dai-shi Connect-Prerenderer erstellt, siehe hier . Noch ein paar Fragen, aber hoffentlich ein guter Start

2
Lior

Dies ist nicht performant, aber ich arbeite an einem einfachen PhantomJS-Server für Heork , der jeden Client-JS analysiert. Ich benutze es speziell mit Angular und Rails, um HTML für Bot-Anfragen bereitzustellen.

1
smothers