2017-06-15 13 views
0

私はノードアプリケーションの依存関係を管理することに問題があります。構造は角モジュール依存性注入が期待どおりに機能しない

var app = angular.module('myApp', ['myController', 'myFactory', 'rzModule', 'chart.js', 'myService', 'selector']); 

myController.js

var app = angular.module('myApp', ['chart.js', 'rzModule', 'selector']); 
app.controller('myController', function($scope, $http, $rootScope, myFactory, mySecondService){ ... }]); 

myFactory.js

angular.module('myApp').factory('myFactory', function($http, $rootScope){ ... }); 

myService.js

angular.module('myApp').service('myService', function($http){...}); 
以下

app.jsあります10

上記の構造が動作すると、アプリケーションは期待通りに動作します。しかし、私は今、別の依存関係を追加したいので、私はmyController.jsでやっていることは正しいとは思っていません。アプリをクラッシュさせることなくこれを行う方法を理解できません。

質問1:上記のmyController.jsでは、私はapp.jsのものを再利用するのではなく、新しいモジュールを作成していると思いますが、それは正しいのですか?その場合は、次のような3つの依存関係を「myController is not available」のように移動します。

var app = angular.module('myApp'); 
app.controller('myController',['chart.js', 'rzModule', 'selector', function(...) 

なぜこれは機能しませんか? documentationによればそれはすべきです。

質問2:私はangular-momentをmyControllerに追加したいと思います。命令では、'angularMoment'をapp.jsに依存して追加し、コントローラの依存関係に'moment'を追加する必要があります。私がそうし、質問1のようにインラインで'moment'を追加すると、 "myController is not available"というエラーが再び出ます。

+0

'app.controller( 'myController'、['chart.js'、 'rzMo ....'は進行する方法です。ファイルのシーケンスは何ですか? – Satpal

+0

@Satpalは私の推測でしたが、 – ffritz

+0

なぜあなたは 'myController'を' var 'から削除する必要があるので、あなたの 'angularController'をあなたの' angular.module(' myApp'' decleration? – ymz

答えて

2

だから あなたがangularjsを進めるよう迅速な事を、あなたの質問に答える前に、モジュールがないコントローラにアプリに注入されるので、任意のモジュールは、アプリ内に注入することの必要性を含める必要があります。

var app = angular.module('myApp', [<all modules comma separated>]); 

同様コントローラのいずれか(サービス、工場などのような)myAppに連結されているすべてのそれらの依存関係を有することができ、myApp

に注入されたモジュールで定義されているこれらのサービスを使用して、コントローラを注入することができません、て、myAppモジュールのみでのサービスがあり

Question1注入することができます

このSHOLDの仕事と、それはあなたがどんな新しいアプリあなたは瞬間のオブジェクトを使用することができ、このような

Question2

var app = angular.module('myApp', ['angularMoment']); 
app.controller('myController', ['moment', function(...) 

を作成していることを意味するものではない、これを使用しました。

+0

ありがとうございました。ですから 'angularMoment'に関しては、app.jsとそれを使用するそれぞれのコントローラの両方に注入する必要がありますか?コントローラー/サービスで使用される他のモジュールでも同じですか?これにしたがってコードを修正し、 'myService'が' myController'で定義されていないという問題がありました。それを 'moment'のすぐ隣に挿入しても問題は解決しません。 – ffritz

+0

- 更新:インラインでサービスを注入する場合のように、 '$ scope'や' $ http'のような他のものも注入する必要があります。今すぐご利用ください! – ffritz

+0

すごい、聞いてよかった!! –

1

Satpalは

app.controller('myController',['chart.js', 'rzMo 

が移動するための方法、またはこれは、このような何かをすることです書くためのクリーンな方法であると述べているとおり。

angular.module('myApp').controller('myController'); 

myController.$inject = ['$scope', '$http', '$rootScope', 'myFactory', 'mySecondService'] 

function myController($scope, $http, $rootScope, myFactory, mySecondService){} 

myControllerは修正を利用できない理由は、それが今、あなたがメインのアプリケーションモジュールを上書きしていないということであり、それはコントローラだといないとして、それは(見つからないmyControllerと呼ばれるモジュールを探していますモジュール)。だからをvar app = angular.module('myApp', ['myController'

から削除してください。John Papa's Style Guide for AngularJSをご覧ください。きれいなコードを書くのに役立ちます。

+1

'myController。$ inject = ['$ scope' ...]'次に、 'myController 'という名前のコントローラはregではありません私のために。 – ffritz

+0

@ffritzあなたが正しいです、あなたのコードからコピーしていたときにそれを変更するのを忘れました。私はLalit Sachdevaの答えがより良い説明であると思う。 – George

0

Ans 1: はい、後者の場合、再度定義しようとしています。 は、アプリの使用を定義するには:あなたが前のモジュールの使用上のコントローラを定義したい場合は今

angular.module('myApp', [..list of dependancies...]); 

angular.module('myApp').controller(); 

今、あなたの3依存関係を注入し、あなたが定義した最上位に移動していますあなたのアプリ。

Ans 2:あなたにはあなたのアプリにangularMomentを注入して、コントローラに瞬時に注入する必要があります。

角度依存注入を処理する最良の方法は、$ injectを使用することです。たとえば、あなたのコントローラは

angular.module('myApp').controller('myController', myController); 

myController.$inject = ['moment','$scope', '$http', '$rootScope', 'myFactory', 'mySecondService'] 
function myController(moment, $scope, $http, $rootScope, myFactory, mySecondService){ 
    //your controller code. 
} 

ようになりますか、他あなたは

angular.module('myApp').controller('myController',['moment','$scope', '$http', '$rootScope', 'myFactory', 'mySecondService', function myController(moment, $scope, $http, $rootScope, myFactory, mySecondService){ 
    //your controller code. 
}]); 

だけでなく、次の試みることができ、以下も動作しますが、お勧めしません。

angular.module('myApp').controller('myController',function myController(moment, $scope, $http, $rootScope, myFactory, mySecondService){ 
     //your controller code. 
    }); 
関連する問題