angularjs 接管已经在服务器端呈现的页面

标签 angularjs rendering velocity

因此,我希望获得社区关于 angularjs 接管已经在服务器端呈现的页面的建议。

angularjs 很棒!但是当涉及首页加载性能和 SEO 时,确实存在一个缺点。显然angularjs不兼容服务端渲染。

长话短说,我想在服务器端呈现一个页面,并尽可能快地将所有数据返回给用户/机器人。然后,在后台,bootstrap angular 应用页面行为。当有加载新数据的请求时,我只想加载数据并绑定(bind)到内容,而不刷新所有内容并往返获取 html。

目前,我使用 Velocity供服务器端模板引擎创建渲染页面,然后使用angular.bootstrap async 应用angular。

解决方案的问题:

  1. 双 View 技术 - 我渲染了两次页面(尽管第二次什么也没发生,但我写了两次代码)

  2. Velocity 并不是编写 View 的最简单方法。这是很老的技术,我真的不喜欢它。

那么,你有什么看法呢? 提前致谢!!!

最佳答案

对于 SEO,我认为最好的方法是为搜索引擎抓取工具提供预呈现的 HTML 快照。

基本上,搜索引擎抓取工具会使用一些特殊的查询字符串参数访问您的页面,以将自己标识为抓取工具而不是真实用户。当您检测到 URL 模式时,您可以提供预呈现的无 JavaScript 页面快照。

查看 Google 对此的解释:https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot

至于首页加载,如果双花括号在 Bootstrap 之前出现,请使用 ng-bind 指令(https://docs.angularjs.org/api/ng/directive/ngBind)。如果您不喜欢在检索数据之前页面的显示方式,请在您的 Controller 上使用 resolve 或显示适当的加载指示器(微调器、“正在加载...”或您喜欢的任何内容)以通知用户正在加载进行中。

默认的 Angular 路由器和 ui-router 都支持 Resolve。您可以在线找到有关如何使用它们的示例。

关于angularjs 接管已经在服务器端呈现的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23856115/

相关文章:

javascript - AngularJS UI 路由器根作用域 slug 路由

android - Libgdx - 渲染许多小 Sprite VS 一些大 Sprite

java - 速度模板日期格式

java - org.apache.velocity.exception.ResourceNotFoundException 异常

java - VelocityEngine从字符串中删除转义字符

javascript - 如何在使用 $index 时动态定义 ng-model

javascript - 在 Angular 上迭代服务返回的 JSON

javascript - 如何在不更改整个列表的情况下编辑列表中的项目?

wpf - 在WPF中,如何在控件实际呈现之前获取控件的呈现大小?

c - OpenGL 使用 DSA(直接状态访问)渲染到立方体贴图