問題タブ [angularjs-module]

AngularJS の初心者で、認証サービスを作成しようとしていますが、このエラーが発生しています。

これが私のコードです：

Service.js

App.js

索引.html

私が間違っていることは何ですか？

前もって感謝します ：）

私はAngularJSを初めて使用し、いくつかのドキュメントとチュートリアルを学んでいます。私の質問は、Egghead のビデオ シリーズ、特にこのビデオに関連しており、基本的な検索フィルターを組み立てる方法を示しています。小さなろうそくを作るビジネスをしている友人のために構築している実際のアプリでこれを使用したかったのですが、アベンジャーズのキャストではなく彼女のろうそくに変更すると（ビデオでデモされているように）、このエラーが発生しました:

キャッチされないエラー: [$injector:modulerr] 次の理由により、モジュール myApp のインスタンス化に失敗しました:

エラー: [$injector:nomod] モジュール 'myApp' は利用できません! モジュール名のつづりを間違えたか、モジュールをロードするのを忘れました。モジュールを登録する場合は、必ず指定してください...

ビデオデモにあるものの編集済み（配列内の3つのキャストメンバーのみ）バージョンをjsfiddleにコピーしましたが、それでも同じエラーが発生することがわかりました。(参考までに、Egghead のデモはこちら: http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter )。これまでにこのサイトで少なくとも半ダースの同様の質問を読み、提供されたすべての解決策を試しましたが、このエラーを解消したり、ビデオデモで正常に機能するアベンジャーズ検索を実際に機能させたりするものはありませんでしたちゃんと。

HTML:

Javascript:

簡単に言えば、誰かが機能してこのエラーを取り除くソリューションを提供し、簡単な英語（博士号レベルの「Angular Obscurese」ではない）で何が原因で（一言で言えば）、何が必要かを説明できますかそれを避けるために行われた？

編集: 申し訳ありませんが、上記のチュートリアルで参照されている jsfiddle リンクはアクティブではなくなりました。リンク切れを削除しました。上記のチュートリアルは引き続き表示できます。

AngularJS で大規模なプロジェクトに取り組んでいると、コードを機能別に整理するのが好きであることがわかりました。
つまり、認識可能な機能 X がある場合 (特に再利用可能な場合)、ディレクトリ X を作成し、その機能に属するすべてのコントローラー、サービス、およびその他の部分をそこに配置します。また、X という新しいモジュールを宣言し、ディレクトリ X 内のすべてをそのモジュールに割り当てます。

ディレクトリ構造は次のようになります。

app.jsには、メイン モジュールの宣言があります。

X/ のすべてのコントローラーなどはモジュール 'X' に属しています。つまり、これらのファイルで次のようにモジュール 'X' を取得します。

モジュール「X」を宣言する場所がわかりません。

私が持っていたいくつかのアイデア：

• コントローラー/サービス/...の1つで宣言し、他のコントローラーなどでフェッチすることもできますが、そのコントローラー/サービス/...を選択するロジックが見当たらないため、正しく聞こえません。また、他の前に index.html に含めるように注意する必要があります。私はこの考えが悪いと思います。
• app.js に宣言を入れることができるので、app.js は以前のアイデアよりも
  angular.module('myApp', ['X']); angular.module('X', [/*some dependencies could go here*/]);
  このアイデアの方が優れているように見えますが、モジュール宣言がディレクトリ X の外にあるのは好きではありません。
• ディレクトリ X/ にファイル main.js を作成し、その中にモジュール X の宣言を入れます。ディレクトリ X/ の他のファイルの前に、このファイルを index.html に含めるように注意する必要があります。
  私はこのソリューションが一番好きです。

これを行うより良い方法はありますか？

例...プランカー

addon.js:

app.js:

body タグの一番下に次のものがあります。

エラーが発生し続けます：

大規模なアプリケーションでは、index.html にロードせずに、モジュール、コントローラー、サービスを必要なときにいつでも遅延ロードするにはどうすればよいでしょうか。ここでは、index.html ではなく、関連するテンプレート html に js 全体をロードすることを参照しています。（モジュール、複数のコントローラー、サービス、特定の機能のディレクティブ、または複数のコントローラーまたはサービスを持つ個々のjsファイルを持つ異なるjsである可能性があります）

RequireJs を使用したくありません。ただし、角度自体の中で解決策を探しています。

Angular ディレクティブ/モジュールのグローバル オプションを含めようとしています。

モジュールファイルでa .constant()(または単に構成のオブジェクト) を使用できますが、モジュールは他の人がプロジェクトに含めるように設計されており、Bower を介してインストールできるため、グローバルオプションが吹き飛ばされるという考えは好きではありませんモジュールが更新されると離れます。.constant()別のファイルに含めることができることは承知していますが、ユーザーはそれを含める必要があります。むしろ、モジュールにすべてを含めて (デフォルト値)、必要に応じてユーザーが拡張/変更できるようにしたいと考えています。

次のような jQuery プラグイン パターンと同様のアプローチを想定しています。

プラグイン

次の基本構造を持つアプリがあります。

ユーザーが天気を表示するために色の設定を変更すると、それはに保存されます userColorPreferencesService.js.

ただし、すべての友達のダッシュボードを表示できる別のビューを追加したいと思います。これは、モジュールの新しいマイクロ インスタンスを作成することを意味します。ただし、そうすると、サービスの色設定が上書きされます。

1 つのページに同じモジュールの複数のインスタンスを表示するにはどうすればよいですか?

私は質問に従っていました ( ui bootstrap modal's controller 'is not defined' )。次に、ネストされたコントローラー、さまざまなスコープ呼び出し、およびコードの名前変更/リファクタリング (学習用) の変更を試みました。

My Plunkerで動作させることができなかったので、いくつか質問があります。

1. なぜ機能しないのですか？

2. 元の質問は、アプリケーション モジュールにコントローラーを追加するのではなく、新しいモジュールを作成することを示しています-なぜですか? これはお勧めですか？

3. 先祖コントローラの場合、そのメソッドは他のコントローラの定義PageControllerをどのように参照しますか?$scope.openopen

コード：

AngularJs アプリがあり、仮想キーボードを作成する必要があります。キーボードは別のモジュールにする必要があります。私の問題は、モジュールを適切に構成する方法がわからないことですか? ディレクティブ、またはサービスなどとして実装する必要がありますか? テキストエリアがクリックされるたびに仮想キーボードを表示し、それ以外の場合は非表示にします。したがって、このモジュールの構造化を開始する方法を教えてください。ロジックはどこに実装する必要がありますか? どこの景色？