AngularJS 与 Turbolinks
涡轮链接也AngularJS两者都可以用来使 Web 应用程序响应更快，即响应用户交互时，网页上会发生某些事情，而无需重新加载和重新呈现整个页面。
它们在以下方面有所不同：
AngularJS帮助您建立一个丰富的客户端应用程序，您可以在其中编写大量在客户端计算机上运行的 JavaScript 代码。此代码使网站能够与用户交互。它使用 JSON API 与服务器端后端（即 Rails 应用程序）进行通信。
涡轮链接另一方面，有助于使网站具有交互性，而无需您编写 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 只是替换页面的一部分并阻止整个页面加载，因此您必须确保角度应用程序已正确初始化（“引导”），即使在 Turbolinks 完成此类部分重新加载之后也是如此。因此，将上述模块声明替换为以下代码：
# app/assets/javascripts/angular-app.js.coffee
# with turbolinks
@app = angular.module 'MyApplication', ['ngResource']
$(document).on 'turbolinks:load', ->
angular.bootstrap document.body, ['MyApplication']
不要自动引导
您经常在教程中看到如何使用以下命令自动引导 Angular 应用程序ng-appHTML 代码中的属性。
<!-- 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 http://docs.angularjs.org/guide/bootstrap
- Turbolinks 上的 Railscasts（解释回调）：http://railscasts.com/episodes/390-turbolinks http://railscasts.com/episodes/390-turbolinks
- 演示应用程序：https://github.com/fiedl/rails-5-angular-and-turbolinks-demo https://github.com/fiedl/rails-5-angular-and-turbolinks-demo
