Question

我的Angular应用程序运行正常。但是，我厌倦了在我的HTML中有这么多script标签，所以我写了一个小脚本 - 我想 - 为我生成所有标签：

var scriptURLs = [
  "js/angular.min.js",
  "js/firebase.min.js",
  "js/angularfire.min.js",
  "js/myapp.js",
  "js/mycontroller.js"
  // ...and so on
]
window.onload = function loadScripts(){
  scriptURLs.forEach(function(url){
    var el = document.createElement("SCRIPT");
    el.src = url;
    document.head.appendChild(el);
  });
}

这会生成所有script标记，并且网址都是正确的：不会抛出404。但是，这会产生一系列angular is not defined错误。我在没有window.onload的情况下尝试了同样的结果。

再次对我的HTML中的所有script标签进行硬编码没有问题，或者我可以使用Grunt或其他一些依赖管理器，但我仍然想知道为什么会这样。

每次重新加载页面时，抛出错误的文件的顺序都略有不同，因此看起来文件是异步加载的，因此执行顺序错误。但我对script标签的理解是它们是同步阻塞和加载并执行的（除非你使用async属性，我不是）。所以我有点困惑！

有关为何发生这种情况的任何想法？谢谢！

Answer 1

删除ng-app指令，删除window.onload，然后手动引导我的应用修复它：

HTML：

<head>
  <title>MyApp</title>
  <link rel="stylesheet" href="css/style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
  <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/1.1.3/angularfire.min.js"></script>
  <script src="js/script.js"></script>
</head>

JS：

loadScripts();
angular.element(document.head).ready(function(){
  angular.bootstrap(document, ["messageBoard"]);
});

试图动态加载我的Angular脚本会产生“找不到角度”错误

1 个答案: