AngularJS - serverseitiges Rendern

Wie Sie vielleicht wissen, sollte AirBnb Rendit ( http://nerds.airbnb.com/weve-open-sourced-rendr ) öffnen, das das serverseitige Rendern von Backbone- Apps ermöglichen soll. Das ist cool, weil man die erste "Iteration" des Template-Renderings auf dem Server ausführen kann und der Client ein vollständig gerendertes HTML-Dokument sowie die gesamte JS-App erhält. Dies verkürzt die Anzeigezeit erheblich und kann andere serverseitige Template-Systeme loswerden.

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

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 Benutzer wahrscheinlich https://angular.io/guide/universal oder nur https://prerender.io/ verwenden.

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

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

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

AngularJS arbeitet mit jsdom-Kontext ohne Tricks. Fügen Sie einfach angular.js zur js src-Liste und die Hauptseite der eckigen App zu jsdom bei der Initialisierung hinzu.

Das Rendern ist also sehr einfach: Verwenden Sie einfach eckig in jsdom und es funktioniert. Es ist etwas schwieriger, es in den Browser zu stellen.

Eine Möglichkeit ist die Stapelsynchronisierung 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 sie, um DOM-Änderungen im Akkumulator-Array zu stapeln und regelmäßig an den Client-Browser zu senden (z. B. pro 25 ms).

Um Benutzerereignisse zu aktivieren, sollten Sie sie auch im Browser dokumentweise verfolgen und Ähnlichkeiten 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-Box-Modells, da es zum Rendern der Elementbreite / -höhe 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 anzusehen und es mit browser-seitigen Scopes zu synchronisieren, aber das ist eine ganz andere Geschichte.

Ich suche auch nach einer Lösung. Es ist jedoch keine Option, einen Browser zu verwenden, um das HTML auf dem Server zu rendern und an das Frontend zu senden. Airbnb versucht es zuerst, wird aber abgelehnt, weil es langsam und ressourcenhungrig ist. Es ist keine Produktionslösung.

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

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

@ dai-shi erstellt connect-prerenderer, siehe hier . Noch ein paar Probleme, aber hoffentlich ein guter Start

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 Phantomjs basiert. Überprüfen Sie, ob es sich löst

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

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

Ich habe es geschafft, den mean.js-Stack fast ohne Änderungen vorab zu rendern.

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

Ich hoffe, es könnte noch jemandem helfen, aber hier ist ein npm-Paket, das ich erstellt habe:

https://www.npmjs.com/package/ng-node-compile