0
他の投稿と同様の不思議なエラーが発生していますが、解決できませんでした。私はFirebaseとAngularfireに組み込まれたAngularJSフロントエンドを含むローカルJavascriptファイルを参照する前に、すべてのボタンがロードされるようにjQueryのdocument.ready（）を使用しています。
私は、一般的に参照されていないか、初期化されていない依存性注入との角度コントローラに付属のコンソールで次のエラーを取得しています：
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（メッセージ）は、モジュールを必要とするように思えるれ、動作するようには思えませんコントローラーとファクトリーが動作するように作業するが、タグ内のオブジェクトはコンパイルされず、通常はコントローラーが失敗したことを意味するプレーンテキストが残されます。それを$（document）.ready（）の中に置くことは、他のタグをスコープの外に出ますか？
あなたは、この使用して 'getScript'をロードする必要があるだろうが、あなたは手動でアプリをブートストラップではなく' NG-app' – charlietfl
を使用する必要がある場合はそのI部分がある@charlietfl理由は考えていませんヘッダーに配置されていれば見つからない要素に対してはエラーを投げるが、スクリプトが本文に含まれていればAngularはロードされない。 – BobtimusPrime
これらのスクリプトは、おそらくディレクティブに含まれている必要があります。しかし手動のブートストラップ手法を使っても、あなたのスクリプトをスクリプトタグに含めることができるはずです – charlietfl