別のファイルでコントローラを定義する方法

Question

AngularJS 1.x経由で書かれたSPAがあるとします。

var app = angular.module('app', ['ngAlertify', 'ngRoute', 'ui.bootstrap']) 

私はまた別の*Ctrl.js -filesで定義されている複数のコントローラを持っている：

は、それはこのように定義された単一appモジュールを持っています。それらを定義する適切な方法は何ですか？

ここに2つのオプションがあります。一つ目は

app.controller('LoginCtrl', function($scope) { /* ... */ }); 

で2つ目は1つが優れている、最も一般的に使用される実際

angular.module('app').controller('LoginCtrl', function($scope) { /* ... */ }); 

のですか？どちらかを使用することには欠点がありますか？

Answer 1

私が正しくあなたの質問を理解していれば、あなたは最初の方法アプリで異なる

上記2で

angular.module('app').controller('LoginCtrl', function($scope) { /* ... */ }); 

対

app.controller('LoginCtrl', function($scope) { /* ... */ }); 

間を知っているワンは、あなたが app.jsのどこかに、すなわち宣言されたグローバルオブジェクトでありますlike

var app = angular.module('app',[]); 

この場合appはアプリケーション全体を通してアクセス可能なグローバル変数です。グローバル変数 をアプリケーションで使用するのは良いことではないと私は信じています。

2番目の方法では、グローバル変数angularを使用してコントローラを作成していますので、グローバル変数は使用しません。この場合、app.jsはapp変数はどこにでも離れて、このファイルから使用できなくなります。この場合、

(function(){ 
    'use strict'; 
    var app = angular.module('app', []); 
    .... 
    .... 
    .... 
    .... 
}) 

のようになります。

だから私は信じていますので、2番目の方法は最初の方法よりも優れています。

Answer 2

ファイル

Answer 3

を再利用するときに、モジュールの名前を変更するのを忘れたので、私の個人的な好みは、私は、これはそれが簡単に変更なしに少しで別のプロジェクトでコントローラを再利用することができますようそれらの迷惑module not foundエラーなし、app.controller('LoginCtrl', function($scope) { /* ... */ });を使用することですそれは個人的な文章スタイルに少し依存すると思う。あなたが簡単にあなたのコントローラをプレビューしthgeからそれを区別することができますので、私は主にapp.controller('LoginCtrl', function($scope) { /* ... */ });を好む、など個人的に

ことの一つは、AngularJS 1.xxのでの作業中にあなたが書くコードの異なるスタイルを持つことができるということです方法はを積み重ねますモジュール。私は明確に定義された別のモジュールを持っていることを見るもう一つのボーナスは、あなたが持っているものを簡単に確認することができることです('ngAlertify', 'ngRoute', 'ui.bootstrap')。

これまでのところ私が見たことのあるところで最も一般的に使われているのは、私が以前に言及した方法です。それでも、これはコードを書くことの前提条件ではなく、個人的なスタイルをより反映したものです。私はそれがいくつかの拡張に役立つことを願っている

Answer 4

上記以外。モジュールの目的は、アプリケーションをモジュール化し、グローバルスコープを汚染しないようにすることです。

あなたはvar app = ...にすることができますが、これはファイルごとに1回IIFEで行う必要があります。

モジュールの別の問題が優先されます。アプリケーションがangular.module('app')モジュールゲッターを使用する場合、モジュールは他のファイルで取得されるときに定義されるために、特定の順序でロードされる必要があります。これは、アルファベット順に連結されている場合など、問題が発生しない場合に発生します。

解決方法は、ファイルごとに1つのモジュールを使用することです。これにより、ファイルロードの順序に関係なく、アプリケーションを真にモジュール化し、テスト容易性にもつながります。このパターンがどのように機能するかについては、this answerも参照してください。

Answer 5

異なるファイルにコントローラを実装するために、モジュールセッタメソッドとゲッターメソッドを使用できます。それは、すでに作成されたモジュールを使用していますので、あなたが優れている約取っているこのhttps://toddmotto.com/angular-modules-setters-getters/

第二の方法をチェックして、doesnの詳細情報についてはmyApp.homeCtrl.js

var myApp = angular.module('myApp'); // getter method, getting the module already registered. 
myApp.controller('homeCtrl', [function()]{ }) 

で

と仮定myApp.module.js

angular.module('myApp', []); //Setter method, registring module 

新しいモジュールを作成しませんが、最初のアプローチでは、推奨されていないグローバル変数を使用していますed