AngularJS：どのように私は複数のファイルでコントローラを作成するのです

Question

私は複数のファイルに私のコントローラを分割しようとしているが、私はエラーを取得し、私のモジュールIMでそれらを登録しようとすると：

groupcontroller.coffee

app = angular.module('WebChat', []); 
app.controller 'GroupController', ($scope) -> 

usercontroller.coffee

app = angular.module('WebChat', []); 
app.controller 'UserController', ($scope) -> 

エラー

エラー：引数「GroupController」の関数ではありませんが、私は本当にモジュールの方法は、とにかく何を得るいけない文書からは未定義

を得ました。それは私のコントローラをキー 'Webchat'で保存していますか？

編集： また、[]渡すと、新しいモジュールを作成し、これを防ぐために、以前の1

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

を上書きし、あなたは[]

よう

app = angular.module('WebChat'); 

を残しているようです

Answer 1

（おそらくあなたのルートにある） 'GroupController'を参照しているコード内の他の場所を確認してください。モジュールの中にコントローラを宣言するときには、変数を引用符で囲む必要があります。 EG：

MyCtrl1() = ->() 
... 
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1}) 

はMyCtrl1が変数なのでうまくいきます。しかし、モジュール内でコントローラを宣言するときは、次のようになります。

app = angular.module('WebChat', []); 
app.controller 'GroupController', ($scope) -> 
    # ... 

$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'GroupController'}) 

'GroupController'にはルート内で引用符が必要です。ここ

Answer 2

私がやったことです：

index.htmlを

<script src="js/angular.js" type="text/javascript" charset="utf-8"></script> 
<script src="js/myApp.js" type="text/javascript" charset="utf-8"></script> 
<script src="js/myCtrlA.js" type="text/javascript" charset="utf-8"></script> 
<script src="js/myCtrlB.js" type="text/javascript" charset="utf-8"></script> 

app.js

myApp = angular.module('myApp', []) 
myApp.config ($routeProvider) -> 
    $routeProvider.when('/a', {controller: 'myCtrlA', templateUrl: 'a.html'}) 
    $routeProvider.when('/b', {controller: 'myCtrlB', templateUrl: 'b.html'}) 

myCtrlA.js

angular.module('myApp').controller 'myCtrlA', ($scope) -> 
    console.log 'this is myCtrlA' 

myCtrlB.js

angular.module('myApp').controller 'myCtrlB', ($scope) -> 
    console.log 'this is myCtrlB' 

私がコントローラのjsファイルをたくさん持っている場合は、 もindex.htmlのスクリプト要素の多くになります。
私はまだそれに対処する方法がわかりません。

FYI：http://briantford.com/blog/huuuuuge-angular-apps.html
でも、この記事ではhtmlファイルについては言及していません。

Answer 3

私のアプリは、アプリでvarを定義しています。jsファイルの魔女が最初に参照され、その後、コントローラはFirstCtrl.jsのようにファイルします。 FirstCtrl.js

app.controller('FirstCtrl', 

Answer 4

で

のでapp.js元で

var app = angular.module(... 

この問題に対する簡単な解決策があります。 * .coffeeファイルを連結してからコンパイルしてください。あなたは '一口' を使用している場合 あなたはこのようにタスクを作成することがあります。

chat.coffee

myChat = angular.module 'myChat', [] 

msg.coffee

myChat 
.directive 'message',() -> 
    return { 
     restrict: 'E' 
     replace : true 
     transclude: true 
     scope: true 
     template: '<div></div>' 
    } 

CONCATENATE後：例えば

gulp.src(['./assets/js/ng/**/*.coffee']) 
    .pipe(concat('main.coffee')) 
    .pipe(coffee()) 
    .pipe(ngmin()) 
    .pipe(gulp.dest('./public/static/js/app')) 
    .pipe(livereload(server)); 

コンパイルする：

(function() { 
    var myChat; 
    myChat = angular.module('myChat', []); 
    myChat.directive('message', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     scope: true, 
     template: '<div></div>' 
    }; 
    }); 

}.call(this)); 

お楽しみください！