我遇到了一个类似于其他帖子的奇怪错误，但我无法纠正。我使用 jQuery 的 document.ready() 来确保在引用本地 Javascript 文件之前加载所有按钮，该文件包含与 Firebase 和 Angularfire 结合的 AngularJS 前端。
我在控制台中收到以下错误，该错误通常伴随着具有未引用或未初始化依赖项注入(inject)的 Angular Controller :
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.
我在关注this tutorial时编写了这段代码在 YouTube 上，除了前面提到的 jQuery 之外，基本上复制了所有相同的内容。
索引.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) 似乎可以工作，这似乎需要模块为 Controller 和工厂工作才能工作，但标记中的对象不会编译，留下纯文本，这通常意味着 Controller 出现故障。将其放入 $(document).ready() 中是否会使其他标签超出范围？
最佳答案
由于模块是在 DOMContentLoaded 之后加载的事件，应用程序需要手动引导。
首先删除自动引导指令:
<body ̶n̶g̶-̶a̶p̶p̶=̶"̶m̶y̶A̶p̶p̶"̶ >
然后在加载模块后手动引导应用程序:
$(document).ready(function(){
$(function(){
$.getScript('javascripts/piano.js');
angular.bootstrap(document.body, ['myApp']);
});
});
欲了解更多信息，请参阅
关于javascript - 使用 $(document).ready() 时，Angular 模块不可用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47745772/