AngularJS:複数のファイルにコントローラを作成する方法
-
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));
.
楽しい!