javascript - AngularJS Controller 在 jquery 文档就绪回调之前调用

Question

我有两个 Angular 1.x Controller 和一个外部开源库，其在文档准备就绪时进行初始化，如下所示，

 $(function () {
    $.support.x = 10;
 });

所以我加载 JS 文件的顺序是1. Angular 框架2.这个外部操作系统库3.我的AngularJS Controller

一旦我加载页面，开源库的 document.ready(jquery) 不会首先被调用，而是控制权首先转到 AngularJS Controller 构造函数。 Controller 执行完成后，仅调用 document.ready(jquery)。

我已经简化了这里的上下文，但是在我的 Controller 之前我还有其他 javascript 文件。我的疑问是，

1. 为什么 Controller 首先被加载？
2. 这与我的 JS 文件的顺序有关吗？
3. AngularJS 首先加载，无论其他 document.ready(jquery) 方法如何在其他 JS 库中？

提前致谢。

Answer 1

来自 docs :

AngularJS initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to complete.

所以:

1)我认为这是因为 angular.js 脚本比任何 $(document).ready(function(){}); 处理程序更早运行，并且 angularjs 在该处理程序被触发之前开始引导；

2)是的。看一下这两个示例(区别仅在于 angular.js 脚本位置):

angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$timeout', function MyCtrl($scope, $timeout) {
    var ctrl = this;
    console.log('ctrl');  
    return ctrl;
}]);

<div ng-app="myApp">
  <div ng-controller="MyCtrl as $ctrl">  
  </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    console.log('doc');
});
</script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>

和:

angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$timeout', function MyCtrl($scope, $timeout) {
    var ctrl = this;
    console.log('ctrl');  
    return ctrl;
}]);

<div ng-app="myApp">
  <div ng-controller="MyCtrl as $ctrl">  
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<script>
$(document).ready(function(){
    console.log('doc');
});
</script>

第一个输出将为 doc-ctrl，第二个输出将为 ctrl-doc。

3) 默认情况下，它按照引用中的描述加载。但你可以使用manual initialization来控制过程。无论何时包含 angular.js 脚本，输出顺序都是 doc - stuff.loaded -> do bootstrap - ctrl

angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$timeout', function MyCtrl($scope, $timeout) {
    var ctrl = this;
    console.log('ctrl');  
    return ctrl;
}]);

<div>
  <div ng-controller="MyCtrl as $ctrl">  
  </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>

<script>
$(document).on('stuff.loaded', function(){
  console.log("stuff.loaded -> do bootstrap");
  //manually bootstrap angularjs app
  angular.element(function() {
    angular.bootstrap(document, ['myApp']);
  });
});
</script>

<script>
$(document).ready(function(){
  console.log('doc');
  //some your stuff here 
  //...
  $(document).trigger('stuff.loaded');
});
</script>