当前位置: 首页 > 面试题库 >

结合使用angularjs和Turbolinks

贲骏喆
2023-03-14
问题内容

我正在尝试在我的应用程序中通过turbolinks使用Angularjs框架。页面更改后,请勿初始化新的事件监听器。有什么办法可以使其工作吗?提前致谢!


问题答案:

AngularJS与Turbolinks

TurbolinkAnguluarJS
都可以用来使Web应用程序更快地响应,在某种意义上,响应用户交互,网页上发生了某些事情,而无需重新加载和重新呈现整个页面。

它们在以下方面有所不同:

  • AngularJS 帮助您构建一个 丰富的客户端应用程序 ,在其中编写许多在客户端计算机上运行的JavaScript代码。此代码使网站与用户互动。它使用JSON API与服务器端后端(即与Rails应用程序)通信。

  • *另一方面, *Turbolinks 有助于使网站具有交互性,而无需您编写JavaScript。它使您能够 坚持 在服务器端运行 的Ruby / Rails代码 ,并且仍然“神奇地”使用AJAX替换并因此仅重新渲染页面中已更改的部分。

Turbolinks可以让您无需使用任何手动操作即可完成此功能强大的AJAX机制,而仅对Ruby /
Rails进行编码,而随着应用程序的增长,可能会出现一个阶段,您希望集成一个JavaScript框架(例如AngularJS)。

尤其是在这个中间阶段,您希望一次将AngularJS一次集成到您的应用程序中,一个组件一次,将Angular
JS和Turbolinks一起运行是很有意义的。

如何同时使用AngularJS和Turbolinks

使用回调手动引导Angular

在Angular代码中,有一行定义了应用程序模块,如下所示:

# app/assets/javascripts/angular-app.js.coffee
# without turbolinks
@app = angular.module 'MyApplication', ['ngResource']

该代码在页面加载时运行。但是,由于Turbolinks只是替换了页面的一部分并阻止了整个页面的加载,因此您必须确保正确地初始化了angular应用程序(“自举”),即使在Turbolinks完成了部分重新加载之后也是如此。因此,将以下模块声明替换为以下代码:

# app/assets/javascripts/angular-app.js.coffee
# with turbolinks
@app = angular.module 'MyApplication', ['ngResource']

$(document).on 'turbolinks:load', ->
  angular.bootstrap document.body, ['MyApplication']

不要自动引导

您通常会在教程中看到如何通过使用ng-appHTML代码中的属性来自动引导Angular应用程序。

<!-- app/views/layouts/my_layout.html.erb -->
<!-- without turbolinks -->
<html ng-app="YourApplication">
  ...

但是,将这种机制与上面显示的手动引导程序一起使用将导致应用程序两次引导,因此将导致应用程序停止运行。

因此,只需删除此ng-app属性:

<!-- app/views/layouts/my_layout.html.erb -->
<!-- with turbolinks -->
<html>
  ...

进一步阅读

  • AngularJS引导程序:http : //docs.angularjs.org/guide/bootstrap
  • Turbolinks上的Railscasts(解释了回调):http : //railscasts.com/episodes/390-turbolinks
  • 演示应用程序:https : //github.com/fiedl/rails-5-angular-and-turbolinks-demo


 类似资料:
  • 问题内容: 我正在使用CodeIgniter编写的现有站点上工作,我们正在考虑将AngularJS用于需要大量前端功能的某些页面,但我们不想替换所有CodeIgniter视图(一次(尚未))。 因此,我单击了由angular的路由器控制的链接,该链接由javascript处理,但下一个链接可能是应由CodeIgniter框架处理的“正常”请求。 有两种结合这两种方法的优雅方法吗?我真的不介意一些额

  • 本文向大家介绍实例详解angularjs和ajax的结合使用,包括了实例详解angularjs和ajax的结合使用的使用技巧和注意事项,需要的朋友参考一下 这是一篇关于easyui配合ajax使用的文章,顺带介绍angularjs的使用以及让你感受到angularjs的威力。网上对于ajax 的文也是多如牛毛 。我就不直接从那种原生的httpxmlrequest 对象的js 写起了哈。看那种东西也

  • 问题内容: 大约几个小时前,我在Stack Overflow上询问了有关如何将char []转换为MD5哈希的方法。 Neil Smithline建议我使用BCrypt,但不能将其与char []一起使用。 我使用char []来存储从登录表单中检索到的密码的原因是因为仅支持char []。 当前,我正在尝试使用上面的代码生成哈希,但是由于变量passwordCars的类型为char [],因此不

  • 问题内容: Node.js非常适合我们的Web项目,但是很少有需要Python的计算任务。我们已经为他们准备了Python代码。我们非常关心速度,如何以异步非阻塞方式从node.js调用Python“工人”的最优雅方法是什么? 问题答案: 对于node.js和Python服务器之间的通信,如果两个进程都在同一服务器上运行,则我将使用Unix套接字,否则将使用TCP / IP套接字。对于封送处理协议

  • 问题内容: 我希望能够在具有许多s的复杂SQL查询中使用PostgreSQL中的函数。这是查询示例: 我想在这里删除该表,因为我的表具有一个名为 taglist* 的 整数数组 字段,该字段由所有链接的tag id组成。 * 我尝试了以下操作: 此方法有效,但带来的结果与第一个查询不同。 所以我要做的是在查询中使用的结果来补偿表。 我怎样才能做到这一点? UPDATE: 与提及的标记ID的列表相同

  • 本文向大家介绍玩转spring boot 结合AngularJs和JDBC(4),包括了玩转spring boot 结合AngularJs和JDBC(4)的使用技巧和注意事项,需要的朋友参考一下 参考官方例子:http://spring.io/guides/gs/relational-data-access/  一、项目准备 在建立mysql数据库后新建表“t_order” 修改pom.xml 二