1. 首页
  2. 问题
  3. 结合使用angularjs和Turbolinks
一尘不染

结合使用angularjs和Turbolinks

angularjs

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


阅读 196

收藏
2020-07-04

共1个答案

一尘不染

AngularJS与Turbolinks

Turbolink 和 AnguluarJS
都可以用来使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>
  ...

进一步阅读

2020-07-04