Question

我收到类似其他帖子的奇怪错误，但我无法解决问题。我正在使用jQuery的document.ready（）来确保在引用包含与Firebase和Angularfire合并的AngularJS前端的本地Javascript文件之前加载所有按钮。

我在控制台中遇到以下错误，该错误通常伴随着Angular控制器，其中包含未引用或未初始化的依赖注入：

错误：[$ injector：nomod]模块'myApp'不可用！你要么拼写错误的模块名称或忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

我在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（消息）似乎确实有效，这似乎需要模块为控制器和工厂工作，但标签中的对象不能编译而是保留纯文本，这通常意味着控制器失败了。将它放在$（document）.ready（）中是否会将其他标记带出范围？

Answer 1

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

首先删除auto-bootstrap指令：

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

然后在加载模块后手动引导应用程序：

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

有关详细信息，请参阅

使用$（document）.ready（）时Angular模块不可用

1 个答案: