AngularJS – rendu côté serveur

Comme vous le savez peut-être, AirBnb opensourced Rendr ( http://nerds.airbnb.com/weve-open-sourced-rendr ) qui devrait permettre le rendu côté serveur des applications Backbone . C’est cool, car on peut exécuter la première “itération” du rendu du modèle sur le serveur et le client obtient un document HTML entièrement rendu, plus toute l’application JS. Il réduit considérablement le temps d’affichage et peut nous débarrasser des autres systèmes de templates côté serveur.

Ainsi, quelqu’un a-t-il réussi à rendre AngularJS avec jsdom ou ZombieJS ? Ces émulations dom / browser sur Node.js devraient en théorie suffire à la simple modélisation angular côté serveur, mais les résultats que j’ai trouvés sur Google n’étaient pas très concluants.

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

    wiki pour plus de détails

    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 ensuite 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 consortingbuteur principal pour ce package.

    AngularJS fonctionne avec un contexte jsdom sans aucune astuce. Il suffit d’append angular.js à la liste js src et la page principale de l’application angular à jsdom sur son initialisation.

    Donc, le rendu est très simple: utilisez simplement angular in jsdom et ça marche. Le mettre dans un navigateur est un peu plus difficile.

    L’une des méthodes consiste à synchroniser par lots les modifications de DOM.

    Pour obtenir des mises à jour dynamics de serveur à client, vous pouvez utiliser MutationEvents (malheureusement, jsdom ne prend pas en charge MutationObservers, mais MutationEvents fonctionne assez rapidement). Utilisez-les pour emstackr les modifications DOM dans le tableau d’accumulateur et poussez-le périodiquement vers le navigateur client (par exemple, toutes les 25 ms).

    De même, pour activer les événements utilisateur, vous devez les suivre au niveau du document lorsque vous naviguez dans le navigateur et que la similarité s’accumule et les transmet au serveur.

    Une des implémentations 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 du modèle de la boîte DOM, car pour obtenir la largeur / hauteur de l’élément, il doit être rendu. Signifie que cette solution convient à peine pour svg et ainsi de suite.

    Aussi, vous pouvez envisager de regarder le modèle de scope et de le synchroniser avec des scopes côté navigateur, mais c’est une histoire totalement différente.

    Je cherche aussi une solution. Mais ce n’est pas une option pour utiliser le navigateur pour afficher le code HTML sur le serveur et l’envoyer au client. Airbnb l’essayer d’abord, mais rejeté parce qu’il est lent et gourmand en ressources. Ce n’est pas une solution de production.

    Mise à jour: Cela sera bientôt possible avec l’introduction d’Object.observe;)

    AngularJS 2.0 peut également fonctionner sur un serveur. Vojta Jina en parle sur “JavaScript Jabber” show # 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 le nouveau module d’dependency injection d’AngularJS – https://github.com/angular/di.js .

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

    Une approche consiste à acheminer les requêtes HTML vers le serveur nodejs exécutant phantomjs. J’ai utilisé une approche basée sur les phantomjs. Découvrez-le s’il résout

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

    Je sais que c’est une réponse un peu tardive, angular.js-server ( https://github.com/a-lucas/angular.js-server ) utilise une version modifiée de l’angle qui déclenche un état d’inactivité nécessaire pour détecter Les événements ajax et $ comstack sont traités.

    J’ai réussi à prédéfinir la stack mean.js avec presque aucune modification.

    Ce n’est pas performant, mais j’ai travaillé sur un simple serveur PhantomJS pour Heorku qui parsingra tout client JS. Je l’utilise spécifiquement avec Angular et Rails pour servir les requêtes HTML aux bot.

    J’espère que cela pourrait encore aider somone, mais voici un paquet npm que j’ai créé:

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