jQuery的文档准备回调之前称为AngularJS控制器

Question

我有两个角1.x的控制器，并与如下被初始化文件上准备外部开源库，

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

所以排序，其中我加载JS文件 1角框架 2.这种外部OS库 3.我AngularJS控制器

一旦我加载页面，开源库的document.ready(jquery)是没有得到所谓的第一次，而控制是要AngularJS控制器结构首先。控制器执行完成后，仅调用document.ready(jquery)。

我在这里简化了上下文，但在控制器之前还有其他JavaScript文件。我所怀疑的是，

1. 为什么控制器首先被加载？
2. 它与我的JS文件的排序有关吗？
3. AngularJS首先加载其他document.ready(jquery)方法 其他JS库吗？

在此先感谢。

Answer 1

从docs：

AngularJS在DOMContentLoaded时自动初始化或 当angular.js脚本被评估，如果在那个时候 document.readyState设置为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>

Answer 2

您使用的是ng-app吗？如果是这样，你可以引导角度手动和删除NG-应用

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

然后角DOM后运行准备 angular bootstrap