AngularJS - rendu côté serveur
Comme vous le savez peut-être, AirBnb a ouvert la solution Rendr ( http://nerds.airbnb.com/weve-open-sourced-rendr ), ce qui devrait permettre le rendu côté serveur. de Backbone apps. C'est cool, car on peut exécuter la première "itération" de rendu de modèle sur le serveur et le client obtient un document HTML entièrement rendu ainsi que l'ensemble de l'application JS. Cela réduit considérablement le temps d'affichage et peut nous débarrasser d'autres systèmes de templates basés sur serveur.
Donc, quelqu'un a-t-il réussi à rendre AngularJS avec jsdom ou ZombieJS ? Ces émulations de dom/browser sur Node.js devraient en théorie suffire pour un simple template côté serveur Angular modélisé, mais les résultats que j’ai trouvés en le googlant n’étaient pas très concluants.
Voici une autre solution: https://github.com/ithkuil/angular-on-server
wiki pour plus de détails
Mise à jour de l'auteur de ce référentiel : c'était il y a environ 6 ans (au moment de cette modification). À ce stade, les gens devraient probablement utiliser https://angular.io/guide/universal ou juste https://prerender.io/
Ce nouveau package (https://github.com/a-lucas/angular.js-server vous permet de pré-afficher une application Angular et d'envoyer du code HTML au client, qui exécutera alors le code jS.
Il prend en charge la mise en cache par URL et vous pouvez définir des règles pour activer le pré-rendu des URL.
PS: Je suis le contributeur principal de ce paquet.
AngularJS fonctionne avec le contexte jsdom sans astuces. Ajoutez simplement angular.js à la liste de src de js et à la page principale de angular app à jsdom à son initializion.
Le rendu est donc très simple: il suffit d'utiliser angular dans jsdom et cela fonctionne. Le mettre dans le navigateur est un peu plus dur.
L'une des méthodes consiste à synchroniser par lots les modifications DOM.
Pour obtenir des mises à jour dynamiques serveur à client, vous pouvez utiliser MutationEvents (malheureusement, jsdom ne prend pas en charge MutationObservers, mais MutationEvents fonctionne assez rapidement). Utilisez-les pour empiler les modifications DOM dans le tableau d'accumulation et transmettez-les périodiquement au navigateur client (par exemple, toutes les 25 ms).
De plus, pour activer les événements utilisateur, vous devez les suivre au niveau document sur navigateur, accumuler les similarités et les transmettre au serveur.
Une implémentation de cette approche est jsdom-sync ( https://www.npmjs.org/package/jsdom-sync )
L'inconvénient du rendu côté serveur est l'absence de taille de modèle de la boîte DOM, car pour obtenir la largeur/hauteur de l'élément, il doit être réellement rendu. Signifie que cette solution convient à peine pour svg et ainsi de suite.
Vous pouvez également envisager de regarder le modèle de scope et de le synchroniser avec les scope du côté du navigateur, mais c'est une histoire totalement différente.
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;)
AngularJS 2.0 peut également fonctionner sur un serveur. Vojta Jina en parle dans l'émission "JavaScript Jabber" # 109 - http://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/ = (32:30 dans le joueur). Il y a un lien vers le nouveau module d'injection de dépendance d'AngularJS - https://github.com/angular/di.js .
Je sais que c’est un peu une réponse tardive, angular.js-server ( https://github.com/a-lucas/angular.js-server ) utilise une version modifiée de angular qui déclenche un état d’inactivité nécessaire pour détecter le moment où tous les événements de demande ajax et $ compile sont traités.
J'ai réussi à pré-rendre la pile mean.js sans presque aucune modification.
Une approche consiste à router les requêtes HTML vers le serveur nodejs exécutant phantomjs. J'ai utilisé une approche basée sur les fantômes. Vérifiez si cela résout
http://himangshu.io/blog/optimizing-single-page-application-using-prerender/
@ dai-shi a créé connect-prerenderer, voir ici . Encore quelques problèmes mais j'espère un bon début
Ce n'est pas performant, mais j'ai travaillé sur un simple serveur PhantomJS pour Heork qui analysera n'importe quel client JS. Je l'utilise spécifiquement avec Angular et Rails pour servir HTML aux requêtes bot).