Angular JS:Como faço para criar controladores em vários arquivos
-
11-12-2019 - |
Pergunta
Estou tentando dividir meus controladores em vários arquivos, mas quando tento registrá-los em meu módulo, recebo um erro:
controlador de grupo.café
app = angular.module('WebChat', []);
app.controller 'GroupController', ($scope) ->
usercontroller.café
app = angular.module('WebChat', []);
app.controller 'UserController', ($scope) ->
Erro
Erro:O argumento 'GroupController' não é uma função, ficou indefinido
Na documentação, eu realmente não entendo o que o método do módulo faz.Ele armazena meu controlador com a chave 'Webchat'?
Editar:Parece também que passar [] cria um novo módulo e substitui o anterior
app = angular.module('WebChat', []);
Para evitar isso, você deve deixar de fora o [] like
app = angular.module('WebChat');
Solução
Verifique outros locais em seu código onde você está fazendo referência a 'GroupController' (provavelmente em sua rota).Provavelmente, você o tem como uma variável, mas quando você declara um controlador dentro de um módulo, você terá que colocá-lo entre aspas.POR EXEMPLO:
MyCtrl1() = -> ()
...
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1})
funciona bem porque MyCtrl1 é uma variável.Mas ao declarar controladores em um módulo como você está:
app = angular.module('WebChat', []);
app.controller 'GroupController', ($scope) ->
# ...
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'GroupController'})
'GroupController' precisa de cotações na rota.
Outras dicas
aqui está o que eu fiz:
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>
aplicativo.js
myApp = angular.module('myApp', [])
myApp.config ($routeProvider) ->
$routeProvider.when('/a', {controller: 'myCtrlA', templateUrl: 'a.html'})
$routeProvider.when('/b', {controller: 'myCtrlB', templateUrl: 'b.html'})
meuCtrlA.js
angular.module('myApp').controller 'myCtrlA', ($scope) ->
console.log 'this is myCtrlA'
meuCtrlB.js
angular.module('myApp').controller 'myCtrlB', ($scope) ->
console.log 'this is myCtrlB'
Como você pode ver, se eu tiver muitos arquivos JS controladores, isso também será muitos elementos de script no index.html.
Não sei como lidar com isso ainda.
PARA SUA INFORMAÇÃO: http://briantford.com/blog/huuuuuge-angular-apps.html
mas este artigo também não mencionou o arquivo html.
Eu tenho meu aplicativo var definido em meu arquivo app.js que é referenciado primeiro e depois disso os arquivos do controlador, por exemplo, FirstCtrl.js.
então em app.js ex
var app = angular.module(...
em FirstCtrl.js
app.controller('FirstCtrl',
Existe uma solução simples para este problema.Concatene seus arquivos *.coffee antes de compilar.Se você usar 'gulp' você pode criar tarefas como esta:
gulp.src(['./assets/js/ng/**/*.coffee'])
.pipe(concat('main.coffee'))
.pipe(coffee())
.pipe(ngmin())
.pipe(gulp.dest('./public/static/js/app'))
.pipe(livereload(server));
Por exemplo:
chat.café
myChat = angular.module 'myChat', []
msg.café
myChat
.directive 'message', () ->
return {
restrict: 'E'
replace : true
transclude: true
scope: true
template: '<div></div>'
}
Depois de concatenar e compilar temos:
(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));
Aproveitar!