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

StackOverflow https://stackoverflow.com//questions/12655890

  •  11-12-2019
  •  | 
  •  

質問

コントローラを複数のファイルに分割しようとしていますが、My Moduleで登録しようとするとエラーが発生しました：

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');
.

役に立ちましたか？

解決

「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」ルート内の引用符を必要とします。

他のヒント

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

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/huuuuge-angular-apps.html
しかし、この記事ではHTMLファイルも言及していませんでした。

私のApp.jsファイルwitchが最初に参照され、その後firstctrl.jsのコントローラファイルが最初に参照されます。

soでjs ex 

var app = angular.module(...
. firstctrl.js の

app.controller('FirstCtrl',
.

この問題に簡単な解決策があります。 コンパイル前に* .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));
.

楽しい！

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top