如您所知,AirBnb开源的Rendr(http://nerds.airbnb.com/weve-open-sourced-rendr)应启用 Backbone 应用的服务器端呈现。这很酷,因为可以在服务器上运行模板渲染的第一次“迭代”,并且客户端获得完全呈现的HTML文档以及整个JS应用程序。它大大缩短了显示时间,可以让我们摆脱其他服务器端的模板系统。
那么,有人设法用jsdom或ZombieJS 渲染AngularJS吗?对于简单的服务器端角度模板,Node.js上的这些dom /浏览器仿真理论上应该足够了,但我发现谷歌搜索的结果并不是很有说服力。
答案 0 :(得分:13)
这是另一种解决方案:https://github.com/ithkuil/angular-on-server
wiki了解详情
该回购的作者更新:大约6年前(编辑时)。此时,人们应该使用https://angular.io/guide/universal或https://prerender.io/
答案 1 :(得分:6)
这个新包https://github.com/a-lucas/angular.js-server允许您预渲染一个Angular应用程序并将HTML发送到客户端,然后执行jS代码。
它支持每个网址的缓存,您可以定义规则来激活网址预呈现。
PS:我是这个包的主要贡献者。
答案 2 :(得分:5)
AngularJS在没有任何技巧的情况下使用jsdom上下文。只需将angular.js添加到js src列表和角度应用的主页面到jsdom的初始化。
因此,渲染非常简单:只需在jsdom中使用angular即可。把它放到浏览器上有点困难。
一种方法是批量同步DOM更改。
要获得动态的服务器到客户端更新,您可以使用MutationEvents(不幸的是,jsdom不支持MutationObservers,但MutationEvents工作得非常快)。使用它们在累加器数组中堆叠DOM更改并定期将其推送到客户端浏览器(例如,每25毫秒)。
另外,为了启用用户事件,您应该在浏览器上以文档方式跟踪它们,并且类似地累积并将它们推送到服务器。
这种方法的一个实现是jsdom-sync(https://www.npmjs.org/package/jsdom-sync)
服务器端渲染的缺点是缺少DOM盒模型大小,因为要获得元素宽度/高度,它应该实际渲染。意味着这个解决方案几乎不适合svg等等。
此外,您可以考虑观看范围模型并将其与浏览器端范围同步,但那是完全不同的故事。
答案 3 :(得分:4)
我也在寻找解决方案。但是,使用浏览器在服务器上呈现html并将其发送到前端不是一种选择。 Airbnb首先尝试但拒绝,因为它很慢且资源匮乏。它不是一种生产解决方案。
更新:通过引入Object.observe可以很快实现;)
答案 4 :(得分:4)
AngularJS 2.0也可以在服务器上运行。 Vojta Jina在“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。
答案 5 :(得分:2)
@ dai-shi创建了connect-prerenderer,请参阅here。还有一些问题,但希望是一个良好的开端
答案 6 :(得分:2)
一种方法是将HTML请求路由到运行phantomjs的nodejs服务器。我使用了一种基于phantomjs的方法。如果它解决了,请查看
http://himangshu.io/blog/optimizing-single-page-application-using-prerender/
答案 7 :(得分:2)
我知道这是一个迟到的答案,angular.js-server(https://github.com/a-lucas/angular.js-server)使用angular的修改版本,触发一个空闲状态,以检测何时处理所有ajax请求和$ compile事件。
我设法预先渲染了mean.js堆栈,几乎没有任何修改。
答案 8 :(得分:1)
这不是高效的,但我一直在研究一个解析任何客户端JS的简单PhantomJS server for Heorku。我特意使用Angular和Rails来为HTML提供机器人请求。
答案 9 :(得分:-1)
我希望它仍然有助于somone,但这是我创建的npm包: