Question

我有两个Angular 1.x控制器和一个外部开源库，可以在文档就绪时初始化，如下所示，

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

所以我加载JS文件的顺序是 1.角度框架 2.此外部OS库 3.我的AngularJS控制器

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

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

为什么控制器先加载？
是否与我的JS文件的排序有关？
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脚本放置）：

＆＃13;

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

＆＃13;

<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>

＆＃13;

和：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

然后角度将在dom准备好后运行 angular bootstrap

AngularJS控制器在jquery文件准备好回调之前调用

2 个答案: