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准備好角度引導程序后，角度將運行