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

Как вы, возможно, знаете, AirBnb opensursced Rendr (http://nerds.airbnb.com/weve-open-sourced-rendr), который должен включать серверный рендеринг для Backbone-приложений. Это классно, потому что можно запустить первую "итерацию" рендеринга шаблона на сервере, и клиент получает полностью визуализированный HTML-документ плюс все приложение JS. Это значительно сокращает время вывода на экран и может избавить нас от других серверных систем шаблонов.

Итак, кому-то удалось отобразить AngularJS с jsdom или ZombieJS? Эти эмуляции dom/browser на Node.js теоретически должны быть достаточными для простой серверной Angular шаблонизации, но результаты, которые я нашел в googling, были не очень убедительными.

Ответы

Ответ 2

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

Он поддерживает кэширование на каждый URL, и вы можете определить правила для активации предварительного рендеринга URL.

PS: Я являюсь основным участником этого пакета.

Ответ 3

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 и т.д.

Также вы можете рассмотреть возможность просмотра модели области и ее синхронизацию с областями на стороне браузера, но это совершенно другая история.

Ответ 4

Я тоже ищу решение. Но это не вариант использования браузера для рендеринга html на сервере и отправки его во внешний интерфейс. Airbnb сначала попробуйте, но отклонится, потому что медленный и ресурсный голод. Это не производственное решение.

Обновление: это может быть возможно с введением Object.observe;)

Ответ 6

@dai-shi создал connect-prerenderer, см. здесь. Еще несколько вопросов, но, надеюсь, хорошее начало.

Ответ 8

Я знаю, что это немного поздний ответ, angular.js-server (https://github.com/a-lucas/angular.js-server) использует измененную версию angular, который запускает состояние ожидания, необходимое для обнаружения, когда обрабатываются все запросы ajax и события компиляции.

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

Ответ 9

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