Angular 使用 $(document).ready() 时模块不可用

Question

我遇到了一个类似于其他帖子的奇怪错误，但我无法补救。我正在使用 jQuery 的 document.ready() 来确保在引用我的本地 Javascript 文件之前加载所有按钮，该文件包含一个 AngularJS 前端并入Firebase 和 Angular 开火。

我在控制台中收到以下错误，该错误通常伴随 Angular 具有未引用或未初始化的依赖项注入的控制器：

Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我在关注 Youtube 上的 this tutorial 时编写了这段代码，基本上复制了所有相同的内容，除了包括上述 jQuery。

Index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Piano Lessons Administrator Signup</title>

    <!--Jquery-->
    <script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>

    <!--AngularJS-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>

    <!--Firebase Dependency-->
    <script src="https://www.gstatic.com/firebasejs/4.8.0/firebase.js"></script>

    <!-- AngularFire -->
    <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>

    <!--Local Javascript-->
    <script>
    $(document).ready(function(){
      $(function(){
          $.getScript('javascripts/piano.js');  
      });
    });
    </script>
    </head>


   <body ng-app="myApp">
      <div ng-congroller="MyCtrl as ctrl">

        <pre>{{ ctrl.object | json }} </pre>

      </div> <!--End myCtrl-->
   </body>

...
</html>

...和Piano.js

(function () {

// Initialize Firebase
var config = {
    apiKey: "myApikey",
    authDomain: "myAuthDomain",
    databaseURL: "myDatabaseURL",
    projectId: "projectId",
    storageBucket: "myStorageBucket",
    messagingSenderId: "MyMessagingSender"
};
firebase.initializeApp(config);

var myApp = angular
    .module('myApp', ['firebase'])
    .config(function ($firebaseRefProvider) {
    $firebaseRefProvider.registerUrl({
        default: config.databaseURL,
        object: `${config.databaseURL}/angular/object`
    });  
})
    .factory('ObjectFactory', ObjectFactory)
    .controller('MyCtrl', MyCtrl);

function ObjectFactory($firebaseObject, $firebaseRef){
    return $firebaseObject($firebaseRef.object);
}

function MyCtrl(ObjectFactory){
    this.object = ObjectFactory;
    this.sayHello = () => {
    //console.log(this.object.name);
        return `Hello, ${this.object.name}`;
    }
}

const ctrl = new MyCtrl({ name: 'David' });
const message = ctrl.sayHello();
console.log(message);

...
}());

有趣的是，console.log(message) 似乎确实有效，这似乎需要模块工作才能使控制器和工厂工作，但标签中的对象无法编译保留纯文本，这通常意味着控制器出现故障。将它放在 $(document).ready() 中会使其他标签超出范围吗？

Answer 1

由于模块是在 DOMContentLoaded 事件之后加载的，因此需要手动 bootstrapped 应用程序。

首先删除 auto-bootstrap 指令：

 <body ̶n̶g̶-̶a̶p̶p̶=̶"̶m̶y̶A̶p̶p̶"̶ >

然后手动bootstrap加载模块后的应用程序：

$(document).ready(function(){
  $(function(){
      $.getScript('javascripts/piano.js');
      angular.bootstrap(document.body, ['myApp']);  
  });
});

有关详细信息，请参阅

Angular 使用 $(document).ready() 时模块不可用

Angular Module not available when using $(document).ready()

javascript

jquery

angularjs

firebase

angularfire