app.jsの角の初期化エラー

Question

私はAngularバンドワゴンに飛び込もうとしており、私はASP.Net MVC Web APIを使ってAngularJSを選択したSPAを構築する任務を負いました（私は.Net開発者）。強く型付けされた言語のファンとして、私は自分のキャリアを通して可能な限りjavascriptを避けましたが、近年AngularJSや他のライブラリ&プラグインのようなフレームワークは無視することが不可能になっています。ここで私はいくつかのガイダンスを求めています。

私はチュートリアルを見て、サンプルコードプロジェクトを行い、PluralSightでいくつかの学習を行いました。少なくとも基礎的な観点からは、私はうまく機能しています。私はMVVMとMVCに豊かな背景を持っているので、SOCは私にとって大きなものです。私は、Angularが提供するMVCタイプの構造が好きです。これが主な理由です。

ここで問題を解決しましょう。私はマスターページ（_Layout.cshtml）で私のモジュール（現在）を初期化していますが、簡単にするために調整や実験をしていました。

しかし、私はより深い概念に移る準備が整ったので、スクリプトを適切なファイルに分割したいと思います。私はapp.jsにそのスクリプトを移動し、_Layout.cshtmlでそれを参照するときすなわち、などapp.jsとそれに関連するコントローラ/工場/サービスは、しかし、それはエラー：

<script src="~/app.js"></script> 

Error: [$injector:unpr] Unknown provider: a

今すぐにはポイントはありませんapp.jsを正しく動作させることができないときにコントローラファイルなどに侵入し続けているので、ここで私は立ち往生しています。私はここに素晴らしいAngularJS開発者がいることを知っています。これはおそらくこれまでに読んでいないものを知っていて、あなたの援助に感謝しています。

私の見落としを強調できる人は、今日私にとってスーパースターになるでしょう。前もって感謝します！

編集：ここでは

は私のスタックトレースです：

0x800a139e - JavaScript runtime error: [$injector:modulerr] Failed to instantiate module xcmApp due to: 
Error: [$injector:unpr] Unknown provider: a 
http://errors.angularjs.org/1.3.15/$injector/unpr?p0=a 
    at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4015:13) 
    at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4162:11) 
    at invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4191:9) 
    at runInvokeQueue (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4109:11) 
    at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4118:11) 
    at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:323:11) 
    at loadModules (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4099:5) 
    at createInjector (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4025:3) 
    at doBootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:1452:5) 
    at bootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:1473:5) 
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=xcmApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20a%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Funpr%3Fp0%3Da%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4015%3A13)%0A%20%20%20at%20getService%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4162%3A11)%0A%20%20%20at%20invoke%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4191%3A9)%0A%20%20%20at%20runInvokeQueue%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4109%3A11)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4118%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A323%3A11)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4099%3A5)%0A%20%20%20at%20createInjector%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4025%3A3)%0A%20%20%20at%20doBootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A1452%3A5)%0A%20%20%20at%20bootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A1473%3A5) 

REMINDER：

私の問題は、それが作業を行い、それが動作しないということではありません。 JavascriptをHTMLページから取り出して、参照されるapp.jsファイルに配置すると、動作が停止するだけです。

Answer 1

ドキュメントに戻ってください。あなたはアプリケーションを定義する悪い方法を使用しています。ところで、あなたが（SPAのため別々のファイルにJavaScriptを記述することをお勧めし

：

EDITなど、フィルタ、コントローラを追加するMyAppを使用し、その後

var MyApp = angular.module('MyApp', ['ngRoute' , 'ngSanitize']) ; 

と：試してみてください私は推測する小さなプロジェクトを書いていない）。

Answer 2

私はASP.netの背景を持っていませんが、Angular質問に答えることはできません。

まず、このようなあなたのモジュールを宣言：

//xcmApp.module.js 
angular.module('xcmApp', ['ngRoute', 'ngResource']); 

//xcmApp.config.js 
angular.module('xcmApp').config(function ($routeProvider) { 
    $routeProvider 
     .when('/', 
      { 
       controller: 'companiesController', 
       templateUrl: 'views/companylist.html' 
      }) 
     .when('/Reports', 
      { 
       controller: 'reportsController', 
       templateUrl: 'views/reportlist.html' 
      }) 
     .otherwise({redirectTo: '/'}) 
}); 

//xcmApp.factory.js 
angular.module('xcmApp').factory('companiesFactory', ['$resource', 
    function ($resource) { 
     return $resource('/api/companies', {}, { 
      query: {method: 'GET', params: {}, isArray: true} 
     }); 
    } 
]); 

//xcmApp.controller.js 
angular.module('xcmApp').controller('companiesController', function ($scope, companiesFactory) { 
    $scope.Companies = companiesFactory.query(); 
}); 

：だからあなたのコードは次のようになります

angular.module('myModule').controller/foactory/.... 

：

angular.module('myModule', []); 

と彼らにこのようなイムオーデルファイルを取得編集：

エラーに関しては、依存関係は厳密な順序でなければならないことに注意してください。 だからあなたのindex.html（仮定あなたはまだスクリプトローダを使用していない使用して）次のようになります。あなたは、コントローラの定義に依存性注入に関連したいくつかの宣言片が欠落しているよう

<script src="/*path to angular*/"></script> 
<script src="/*path to ngRoute*/"></script> 
<script src="/*path to ngResource*/"></script> 

<script src="/*path to xcmApp.module.js*/"></script> //setting your app module must come first 
<script src="/*path to xcmApp.config.js*/"></script> 
<script src="/*path to xcmApp.factory.js*/"></script> //must come before the controller in your case 
<script src="/*path to xcmApp.controller.js*/"></script> 

Answer 3

に見えます。

特定のコードと修正を公開する前に、依存性注入の問題に関する便利なトラブルシューティングツールについて説明したいと思います。 Angularには指示文ng-strict-diが組み込まれています。この指令はng-appのコンパニオンです。 ng-app documentationから：今

if this attribute is present on the app element, the injector will be created in "strict-di" mode. This means that the application will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minification), as described in the Dependency Injection guide , and useful debugging info will assist in tracking down the root of these bugs.

、あなたのポスト内のコードに：

あなたのコントローラは、明示的な機能アノテーションを使用していません。明示的な関数注釈では、依存関係の文字列配列を渡し、その後に関数を続けます。これにより、Minificationが関数パラメータの名前を変更したとしても、Angularは引き続き関数にどの依存関係を提供するかを識別できます。コードの一部で明示的なアノテーションを使用しましたが、コントローラの定義に欠けています。

これは、aという名前のプロバイダを決して定義していないにもかかわらず、古典的には、Error: [$injector:unpr] Unknown provider: aとなります。 ng-strict-diはこのコントローラコードにフラグを立てます。

ここに現在のコードと提案されている修正があります。

の代わりに：

.controller('companiesController', function ($scope, companiesFactory) { 

試してみてください。

.controller('companiesController', ['$scope', 'companiesFactory', function ($scope, companiesFactory) {