node.js - real - AngularJS: representación del lado del servidor
node js tiempo real (10)
Como ya sabrá, AirBnb abrió Rendr ( http://nerds.airbnb.com/weve-open-sourced-rendr ), que debería permitir la representación del lado servidor de las aplicaciones Backbone . Esto es genial, porque uno puede ejecutar la primera "iteración" de representación de plantillas en el servidor y el cliente obtiene un documento HTML completamente renderizado más la aplicación JS completa. Reduce enormemente el tiempo de visualización y puede hacer que nos deshagamos de otros sistemas de plantillas del lado del servidor.
Entonces, ¿alguien ha logrado renderizar AngularJS con jsdom o ZombieJS ? Estas emulaciones dom / browser en Node.js deberían ser en teoría suficientes para las plantillas angulares simples del lado del servidor, pero los resultados que encontré en Google no fueron muy concluyentes.
@ dai-shi creado connect-prerenderer, mira here . Todavía hay algunos problemas, pero espero que sea un buen comienzo
AngularJS 2.0 también puede funcionar en un servidor. Vojta Jina habla de ello en el programa "JavaScript Jabber" # 109 - http://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/ (32:30 en el reproductor ) Hay un enlace al nuevo módulo de inyección de dependencias de AngularJS: https://github.com/angular/di.js .
AngularJS funciona con el contexto jsdom sin ningún truco. Simplemente agregue angular.js a js src list y página principal de la aplicación angular a jsdom en su inicialización.
Entonces, renderizar es muy simple: solo usa angular en jsdom y funciona. Ponerlo en el navegador es algo más difícil.
Una forma es la sincronización por lotes de los cambios DOM.
Para obtener actualizaciones dinámicas de servidor a cliente, puede usar MutationEvents (desafortunadamente, jsdom no es compatible con MutationObservers, pero MutationEvents funciona bastante rápido). Úselos para acumular cambios de DOM en la matriz de acumuladores y empújelos periódicamente al navegador del cliente (por ejemplo, cada 25 ms).
También para habilitar los eventos del usuario, debe hacer un seguimiento de los documentos en el navegador y acumularlos de manera similar e insertarlos en el servidor.
Una implementación de dicho enfoque es jsdom-sync ( https://www.npmjs.org/package/jsdom-sync )
Una desventaja de la representación del lado del servidor es la ausencia del tamaño del modelo del cuadro DOM, porque para obtener el ancho / alto del elemento debería representarse realmente. Significa que esta solución apenas se ajusta para svg, etc.
También puede considerar mirar el modelo del alcance y sincronizarlo con los alcances del navegador, pero esa es una historia totalmente diferente.
Aquí hay otra solución: https://github.com/ithkuil/angular-on-server
wiki para más detalles
Espero que todavía pueda ayudar a alguien, pero aquí hay un paquete de npm que he creado:
Este nuevo paquete https://github.com/a-lucas/angular.js-server permite preprocesar una aplicación angular y enviar HTML al cliente, que luego ejecutará el código jS.
Admite el almacenamiento en memoria caché por url y puede definir reglas para activar la preprocesamiento de URL.
PD: soy el principal contribuyente para este paquete.
Esto no funciona, pero he estado trabajando en un servidor PhantomJS simple para Heorku que analizará cualquier JS del cliente. Lo uso específicamente con Angular y Rails para servir HTML a las solicitudes de bot.
Estoy buscando una solución también. Pero no es una opción usar el navegador para procesar el html en el servidor y enviarlo a la interfaz. Airbnb lo intenta primero pero lo rechaza porque es lento y consume muchos recursos. No es una solución de producción.
Actualización: Esto pronto puede ser posible con la introducción de Object.observe;)
Sé que esta es una respuesta tardía, el servidor angular.js ( https://github.com/a-lucas/angular.js-server ) usa una versión modificada de angular que activa un estado inactivo necesario para detectar cuando todos ajax request y $ compile events son procesados.
Logré preprocesar la pila mean.js casi sin modificación.
Un enfoque es enrutar las solicitudes HTML al servidor nodejs que ejecuta phantomjs. Usé un enfoque basado en phantomjs. Compruébalo si resuelve
http://himangshu.io/blog/optimizing-single-page-application-using-prerender/