AngularJS - rendu côté serveur

Question

Comme vous le savez peut-être, AirBnb opensourced Rendr (http://nerds.airbnb.com/weve-open-sourced-rendr) qui devrait permettre de rendu côté serveur de l' épine Dorsale des applications. C'est cool, car on peut lancer la première "itération" du modèle de rendu sur le serveur et le client obtient complètement rendu HTML document ainsi que l'ensemble de la JS app. Il réduit considérablement les temps d'affichage et peut nous débarrasser de l'autre côté serveur création de modèles de systèmes.

Donc, quelqu'un a réussi à rendre AngularJS avec jsdom ou ZombieJS? Ces dom/navigateur émulations sur Node.js devrait en théorie être assez simple de serveur-côté Angulaire de la création de modèles, mais les résultats que j'ai trouvé sur google, il ne sont pas très concluants.

Answer 1

Voici une autre solution: https://github.com/ithkuil/angular-on-server

wiki pour plus de détails

Answer 2

AngularJS travaille dans jsdom contexte sans toutes les astuces. Ajoutez simplement angular.js js src liste et la page principale de l'angulaire de l'application de jsdom sur son initializion.

Donc, le rendu est très simple: il suffit d'utiliser angulaire dans jsdom et il fonctionne. Mettre de navigateur est un peu plus difficile.

Une façon de lot de la synchronisation des DOM changements.

Pour obtenir des dynamiques de serveur à client des mises à jour vous pouvez utiliser MutationEvents (malheureusement, jsdom ne prend pas en charge MutationObservers, mais MutationEvents travail assez rapide). Les utiliser à empiler vers le haut DOM changements dans l'accumulateur de tableau et de le pousser périodiquement vers le navigateur client (par exemple, par 25 ms).

Aussi pour permettre à l'utilisateur d'événements, vous devez suivre le document-sage sur le navigateur et les similarry accumuler et de les pousser vers le serveur.

Une mise en œuvre d'une telle approche est jsdom-sync (https://www.npmjs.org/package/jsdom-sync)

L'inconvénient d'un serveur de rendu côté est de l'absence de DOM boîte de la taille du modèle, parce que pour obtenir de l'élément largeur/hauteur, il doit être effectivement rendus. Signifie que cette solution correspond à peine pour le svg et ainsi de suite..

Aussi, vous pouvez envisager de regarder le champ d'application de modèle et de le synchroniser avec le navigateur côté étendues, mais c'est totalement différent.

Answer 3

Je cherche aussi une solution. Mais ce n'est pas une option d'utiliser un navigateur pour rendre le code HTML sur le serveur et l'envoyer à l'interface. Airbnb l'essaie en premier, mais il est rejeté car lent et gourmand en ressources. Ce n'est pas une solution de production.

Mise à jour: Ceci peut être bientôt possible avec l'introduction de Object.observe;)

Answer 4

AngularJS 2.0 peut fonctionner sur un serveur, trop. Vojta Jina en parle sur "JavaScript Jabber" afficher le n ° 109 - http://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/ (32:30 dans le lecteur). Il y a un lien vers la nouvelle AngularJS' injection de dépendance du module https://github.com/angular/di.js.

Answer 5

@ dai-shi a créé connect-prerenderer, voir ici . Encore quelques problèmes mais j'espère un bon début