如何在项目中结合Turbolinks与AngularJS且避免重复加载Angular？

这个问题我之前帮不少开发者排查过，核心冲突点在于Turbolinks的页面切换机制：它会保留页面的<head>部分，只替换<body>内容；而你把Angular相关脚本放在页脚，每次Turbolinks跳转页面时，都会重新加载这些脚本，导致Angular被重复初始化，触发「WARNING: Tried to load angular more than once.」的警告。

下面是一套经过验证的解决方案，分步骤来操作：

1. 调整脚本加载位置，避免重复加载Angular核心库 #

把Angular的核心脚本（比如angular.js）以及你的自定义Angular模块脚本（比如myServices）移到<head>标签里。Turbolinks默认不会重复加载<head>中的静态资源，这样就能确保Angular核心代码只加载一次。

示例代码：

<head>
  <meta charset="UTF-8">
  <title>你的网站标题</title>
  <!-- 先加载Angular核心库 -->
  <script src="/scripts/angular.js"></script>
  <!-- 加载你的自定义Angular模块（比如myServices） -->
  <script src="/scripts/my-services.js"></script>
  <!-- 最后加载Turbolinks -->
  <script src="/scripts/turbolinks.js"></script>
</head>

2. 手动控制Angular应用的初始化与销毁 #

放弃使用ng-app自动初始化Angular，改用angular.bootstrap()手动初始化，同时绑定Turbolinks的生命周期事件，在页面切换时清理旧的Angular实例，避免冲突。

在页脚（或单独的初始化脚本）添加以下代码：

// 监听Turbolinks页面加载完成事件（首次加载+跳转加载都触发）
document.addEventListener('turbolinks:load', function() {
  // 检查当前body是否已经绑定了Angular应用实例
  var existingInjector = angular.element(document.body).injector();
  if (!existingInjector) {
    // 定义你的Angular应用模块（如果还没定义的话）
    angular.module('myApp', ['myServices'])
      .controller('ApplicationController', ['$scope', function($scope) {
        // 这里写你的控制器逻辑
        $scope.exampleData = "Hello from Angular + Turbolinks!";
      }]);
    
    // 手动初始化Angular应用到body元素
    angular.bootstrap(document.body, ['myApp']);
  }
});

// 监听Turbolinks缓存页面之前的事件，清理旧的Angular实例
document.addEventListener('turbolinks:before-cache', function() {
  var injector = angular.element(document.body).injector();
  if (injector) {
    // 获取$rootScope并销毁，释放资源
    var $rootScope = injector.get('$rootScope');
    $rootScope.$destroy();
    // 移除body上绑定的Angular相关数据，避免下次初始化冲突
    angular.element(document.body).removeData();
  }
});

同时，记得把<body>标签上的ng-app="myApp"属性去掉，因为我们已经用angular.bootstrap手动初始化了。修改后的body标签：

<body ng-controller="ApplicationController">
  <!-- 页面内容 -->
</body>

关键注意事项 #

• 所有Angular相关的模块、服务脚本都要放在<head>里，确保只加载一次；
• 如果你的页面中有其他第三方脚本（比如jQuery插件），也要检查是否会被Turbolinks重复加载，必要时同样移到<head>或绑定Turbolinks事件初始化；
• 手动初始化Angular后，所有控制器、指令的定义要确保在turbolinks:load事件触发前已经加载完成（所以模块脚本放head是最优选择）。

这样调整后，Turbolinks的页面切换就能和AngularJS和平共处，不会再出现重复加载的警告了。

内容的提问来源于stack exchange，提问作者camilleB