AngularJS - візуалізація на стороні сервера

Як ви знаєте, AirBnB opensourced Rendr ( http://nerds.airbnb.com/weve-open-sourced-rendr ) , який повинен дозволити стороні сервера візуалізації в Backbone додатків. Це круто, тому що можна запустити першу "ітерацію" візуалізації шаблону на сервері, і клієнт отримує повністю відтворений HTML-документ плюс весь додаток JS. Це значно скорочує час для відображення та може позбавити нас від інших систем шаблонування на стороні сервера.

Отже, чи вдалося комусь відтворити AngularJS за допомогою jsdom або ZombieJS ? Ціх емуляцій dom / браузера на Node.js теоретично повинно вистачити для простого шаблонізації Angular на стороні сервера, але результати, які, на мою думку, погуглив, були не надто переконливими.

Ось ще одне рішення: https://github.com/ithkuil/angular-on-server

wiki для деталей

Оновлення від автора цього репо : це було приблизно 6 років тому (на момент редагування). На даний момент люди, мабуть, повинні використовувати https://angular.io/guide/universal або просто https://prerender.io/

Цей новий пакет https://github.com/a-lucas/angular.js-server дозволяє вам попередньо відтворити Angular-додаток і надіслати HTML клієнту, який потім виконає код jS.

Він підтримує кешування на URL-адресу, і ви можете визначити правила для активації попереднього відтворення URL-адреси.

PS: Я є основним учасником цього пакету.

AngularJS працює без контексту jsdom без жодних хитрощів. Просто додайте angular.js до списку js src та головну сторінку програми angular до jsdom при його ініціалізації.

Отже, рендерінг дуже простий: просто використовуйте angular у jsdom, і це працює. Передати його в браузер дещо складніше.

Один із способів - пакетна синхронізація змін DOM.

Щоб отримувати динамічні оновлення від сервера до клієнта, ви можете використовувати MutationEvents (на жаль, jsdom не підтримує MutationObservers, але MutationEvents працює досить швидко). Використовуйте їх, щоб накопичувати зміни DOM у масиві акумулятора та періодично надсилати їх до клієнтського браузера (скажімо, за 25 мс).

Крім того, щоб увімкнути події користувача, вам слід відстежувати їх у документі в браузері, а схожі накопичувати та перекидати на сервер.

Однією з реалізацій такого підходу є jsdom-sync ( https://www.npmjs.org/package/jsdom-sync )

Негативною стороною візуалізації на стороні сервера є відсутність розміру моделі коробки DOM, оскільки для отримання ширини / висоти елемента вона повинна бути фактично відображена. Означає, що це рішення ледве підходить для svg тощо.

Ви також можете розглянути можливість перегляду моделі та синхронізувати її з областями браузера, але це зовсім інша історія.

Я теж шукаю рішення. Але це не можливість використовувати браузер для відображення html на сервері та надсилання його на інтерфейс. Airbnb спробуйте спочатку, але відхилено, оскільки він повільний та потребує ресурсів. Це не виробниче рішення.

Оновлення: Незабаром це стане можливим із введенням Object.observe;)

AngularJS 2.0 також може працювати на сервері. Войта Джина розповідає про це у шоу "JavaScript Jabber" №109 - http://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/ (32:30 у програвачі) ). Існує посилання на новий модуль введення залежностей AngularJS - https://github.com/angular/di.js .

@ dai-shi створив connect-prerenderer, дивіться тут . Ще кілька питань, але, сподіваємось, хороший старт

Одним із підходів є маршрутизація запитів HTML на сервер nodejs, на якому запущено phantomjs. Я використав підхід, заснований на phantomjs. Перевірте це, якщо це вирішить

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

Я знаю, що це трохи пізня відповідь, angular.js-сервер ( https://github.com/a-lucas/angular.js-server ) використовує модифіковану версію angular, яка запускає стан очікування, необхідний для виявлення, коли всі ajax запит і $ compile події обробляються.

Мені вдалося попередньо відтворити стек mean.js майже без змін.

Це не ефективно, але я працював над простим сервером PhantomJS для Heorku, який буде аналізувати будь-який клієнтський JS. Я використовую його спеціально для Angular та Rails для обслуговування HTML для запитів ботів.

Я сподіваюся, це все одно може допомогти somone, але ось пакет npm, який я створив:

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