将 angularjs 与 turbolinks 一起使用 [英] Using angularjs with turbolinks
问题描述
我正在尝试在我的应用程序中使用 Angularjs 框架和 turbolinks.页面更改后，它不会初始化新的事件侦听器.有什么办法让它工作吗?提前致谢！
I am trying to use Angularjs framework in my app with turbolinks. After page change it do not initialize new eventlisteners. Is it any way to make it work? Thanks in advance!
推荐答案
AngularJS vs. Turbolinks
Turbolinks 和 AnguluarJS 都可用于使 Web 应用程序响应更快，从某种意义上说，响应用户交互，网页上会发生一些事情无需重新加载和重新渲染整个页面.
AngularJS vs. Turbolinks
Turbolinks as well as AnguluarJS can both be used to make a web application respond faster, in the sense that in response to a user interaction something happens on the web page without reloading and rerendering the whole page.
它们在以下方面有所不同:
They differ in the following regard:
AngularJS 可帮助您构建富客户端应用程序，您可以在其中编写大量在客户端计算机上运行的 JavaScript 代码.此代码使站点与用户交互.它使用 JSON API 与服务器端后端(即 Rails 应用程序)进行通信.
AngularJS helps you to build a rich client-side application, where you write a lot of JavaScript code that runs on the client machine. This code makes the site interactive to the user. It communicates with the server-side backend, i.e. with the Rails app, using a JSON API.
Turbolinks 有助于使网站具有交互性，而无需您编写 JavaScript 代码.它允许您坚持使用在服务器端运行的 Ruby/Rails 代码，并且仍然神奇地"使用 AJAX 来替换并因此重新呈现页面中已更改的部分.
Turbolinks, on the other hand, helps to to make the site interactive without requiring you to code JavaScript. It allows you to stick to the Ruby/Rails code run on the server-side and still, "magically", use AJAX to replace, and therefore rerender, only the parts of the page that have changed.
Turbolinks 的强大之处在于允许您使用这种强大的 AJAX 机制而无需手动执行任何操作，只需编写 Ruby/Rails 代码，随着您的应用程序的增长，可能会出现一个阶段，您希望在其中集成 JavaScript 框架，例如 AngularJS.
Where Turbolinks is strong in allowing you use this powerful AJAX mechanism without doing anything by hand and just code Ruby/Rails, there might come a stage, as your application grows, where you would like to integrate a JavaScript framework such as AngularJS.
特别是在这个中间阶段，您希望将 AngularJS 依次集成到您的应用程序中，一次一个组件，将 Angular JS 和 Turbolinks 一起运行是非常有意义的.
Especially in this intermedium stage, where you would like to successively integrate AngularJS into your application, one component at a time, it can make perfectly sense to run Angular JS and Turbolinks together.
在您的 Angular 代码中，您有一行定义您的应用程序模块，如下所示:
In your Angular code, you have a line defining your application module, something like this:
# app/assets/javascripts/angular-app.js.coffee
# without turbolinks
@app = angular.module 'MyApplication', ['ngResource']
此代码在页面加载时运行.但是由于 Turbolinks 只是替换了页面的一部分并阻止了整个页面的加载，因此您必须确保 Angular 应用程序已正确初始化(引导")，即使在 Turbolinks 完成此类部分重新加载之后也是如此.因此，将上面的模块声明替换为以下代码:
This code is run when the page is loaded. But since Turbolinks just replaces a part of the page and prevents an entire page load, you have to make sure, the angular application is properly initialized ("bootstrapped"), even after such partial reloads done by Turbolinks. Thus, replace the above module declaration by the following code:
# app/assets/javascripts/angular-app.js.coffee
# with turbolinks
@app = angular.module 'MyApplication', ['ngResource']
$(document).on 'turbolinks:load', ->
angular.bootstrap document.body, ['MyApplication']
不要自动引导
您经常在教程中看到如何通过在 HTML 代码中使用 ng-app 属性自动引导 Angular 应用程序.
Don't bootstrap automatically
You often see in tutorials how to bootstrap an Angular app automatically by using the ng-app attribute in your HTML code.
<!-- app/views/layouts/my_layout.html.erb -->
<!-- without turbolinks -->
<html ng-app="YourApplication">
...
但是将此机制与上面显示的手动引导程序一起使用会导致应用程序引导程序两次，因此会使应用程序停止运行.
But using this mechanism together with the manual bootstrap shown above would cause the application to bootstrap twice and, therefore, would brake the application.
因此，只需删除此 ng-app 属性:
Thus, just remove this ng-app attribute:
<!-- 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
这篇关于将 angularjs 与 turbolinks 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
