web-dev-qa-db-ja.com

AngularJS：複数のファイルでコントローラーを作成する方法

コントローラを複数のファイルに分割しようとしていますが、モジュールでそれらを登録しようとすると、エラーが発生します。

groupcontroller.coffee

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

sercontroller.coffee

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

エラー

エラー：引数「GroupController」は関数ではないため、定義されていません

ドキュメンテーションから、とにかくモジュールメソッドが何をするのか本当にわかりません。コントローラーに「Webchat」キーを保存しますか？

編集： []を渡すと新しいモジュールが作成され、以前のモジュールが上書きされるようにも見えます

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

これを防ぐには、[]を省略してください。

app = angular.module('WebChat');
coffeescriptangularjs
24
user1703761

「GroupController」を参照しているコード内の他の場所をチェックします（おそらくルート内）。変数として存在する可能性がありますが、モジュール内でコントローラーを宣言するときは、引用符で囲む必要があります。例えば：

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」はルートに引用符が必要です。

6
Roy Truelove

これが私がしたことです：

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ファイルについても触れられていません。

13
zx1986

App.jsファイルで定義されたアプリ変数を持っています。魔女が最初に参照され、その後FirstController.jsなどのコントローラーファイルが参照されます。

そうapp.js ex

var app = angular.module(...

firstCtrl.js

app.controller('FirstCtrl',
3
ta4ka

この問題には簡単な解決策があります。コンパイルする前に* .coffeeファイルを連結します。 「gulp」を使用すると、次のようなタスクを作成できます。

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

例えば：

chat.coffee

myChat = angular.module 'myChat', []

msg.coffee

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

連結してコンパイルすると、次のようになります。

(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));

楽しい！

0
LampCat