jQuery文档就绪回调之前调用AngularJS控制器

Question

我有两个Angular 1.x控制器和一个外部开放源代码库，可以在文档中进行如下初始化，

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

因此，我加载JS文件的顺序为1. Angular框架2.此外部OS库3.我的AngularJS控制器

加载页面后，不会首先调用开源库的document.ready(jquery) ，而是首先将控制权交给AngularJS控制器构造函数。 控制器执行完成后，仅调用document.ready(jquery) 。

我在这里简化了上下文，但在控制器之前也有其他javascript文件。 我有疑问

1. 为什么首先要加载控制器？
2. 与我的JS文件的顺序有关吗？
3. AngularJS首先加载，而不考虑其他JS库中的其他document.ready(jquery)方法。

提前致谢。

Answer 1

从文档 ：

如果那时将document.readyState设置为complete ，则AngularJS会在DOMContentLoaded事件或评估angular.js脚本时自动初始化。

所以：

1）我认为这是因为angular.js脚本比任何$(document).ready(function(){});都更早$(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）默认情况下，它按报价中的说明加载。 但是您可以使用手动初始化来控制该过程。 无论何时包括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> 

Answer 2

您在使用ng-app吗？ 如果是这样，您可以引导角度手册并删除ng-app

document.ready(function{
    angular.bootstrap(document, ['myApp']);
})

然后dom准备好角度引导程序后，角度将运行