O controlador não é uma function, ficou indefinido, ao definir controladores globalmente

Eu estou escrevendo um aplicativo de exemplo usando angularjs. Eu recebi um erro mencionado abaixo no navegador Chrome.

Erro é

Erro: [ng: areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined

Qual é o mais

Argumento ‘ContactController’ não é uma function, ficou indefinido

Código

     function ContactController($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; }    

modules sample

Email:

Contacts

  • {{contact}}

Com o Angular 1.3+, você não pode mais usar declaração de controlador global no escopo global (sem registro explícito). Você precisaria registrar o controlador usando a syntax module.controller .

Exemplo:-

 angular.module('app', []) .controller('ContactController', ['$scope', function ContactController($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; }]); 

ou

 function ContactController($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; } ContactController.$inject = ['$scope']; angular.module('app', []).controller('ContactController', ContactController); 

É uma mudança allowGlobals mas pode ser desativada para usar globals usando allowGlobals .

Exemplo:-

 angular.module('app') .config(['$controllerProvider', function($controllerProvider) { $controllerProvider.allowGlobals(); }]); 

Aqui está o comentário da fonte Angular: –

  • verifique se um controlador com nome próprio está registrado via $controllerProvider
  • verifique se a avaliação da string no escopo atual retorna um construtor
  • se $ controllerProvider # allowGlobals, verifique a window[constructor] no object da window global (não recomendado)
  ..... expression = controllers.hasOwnProperty(constructor) ? controllers[constructor] : getter(locals.$scope, constructor, true) || (globals ? getter($window, constructor, true) : undefined); 

Algumas verificações adicionais:

  • Certifique-se de colocar o nome ng-app na diretiva ng-app em seu elemento raiz angular (por exemplo: – html ) também. Exemplo: – ng-app = “myApp”

  • Se tudo estiver bem e você ainda estiver recebendo o problema, lembre-se de ter o arquivo correto incluído nos scripts.

  • Você não definiu o mesmo módulo duas vezes em locais diferentes, o que resulta em quaisquer entidades definidas anteriormente no mesmo módulo a serem limpas. Exemplo: angular.module('app',[]).controller(.. e novamente em outro local angular.module('app',[]).service(.. (com ambos os scripts incluídos, é claro) pode fazer com que o controlador registrado anteriormente no app do módulo seja limpo com a segunda recriação do módulo.

Eu tenho esse problema porque eu tinha embrulhado um arquivo de definição de controlador em um fechamento:

 (function() { ...stuff... }); 

Mas eu tinha esquecido de invocar esse fechamento para executar esse código de definição e realmente dizer ao Javascript que meu controlador existia. Ou seja, o acima deve ser:

 (function() { ...stuff... })(); 

Observe o () no final.

Sou iniciante no Angular e cometi o erro básico de não include o nome do aplicativo no elemento raiz angular. Então, mudando o código de

  

para

  

trabalhou para mim. @PSL, já cobriu isso em sua resposta acima.

Eu tive esse erro porque eu não entendi a diferença entre angular.module('myApp', []) e angular.module('myApp') .

Isso cria o módulo ‘myApp’ e sobrescreve qualquer módulo existente chamado ‘myApp’:

angular.module('myApp', [])

Isso recupera um módulo existente ‘myApp’:

angular.module('myApp')

Eu estava sobrescrevendo meu módulo em outro arquivo, usando a primeira chamada acima que criou outro módulo em vez de recuperar como eu esperava.

Mais detalhes aqui: https://docs.angularjs.org/guide/module

Acabei de migrar para o 1.3.3 angular e descobri que se eu tivesse vários controladores em arquivos diferentes quando o aplicativo é replace e eu perdi os primeiros contêineres declarados.

Não sei se é uma boa prática, mas talvez possa ser útil para outra.

 var app = app; if(!app) { app = angular.module('web', ['ui.bootstrap']); } app.controller('SearchCtrl', SearchCtrl); 

Eu tive esse problema quando acidentalmente redeclarou myApp :

 var myApp = angular.module('myApp',[...]); myApp.controller('Controller1', ...); var myApp = angular.module('myApp',[...]); myApp.controller('Controller2', ...); 

Após o redeclare, o Controller1 pára de funcionar e gera o erro OP.

Muito bom conselho, exceto que o mesmo erro pode ocorrer simplesmente por falta do script crítico include na sua página raiz

exemplo:

página: index.html

  np-app="saleApp" 

Ausência de

  

Quando uma rota é informada sobre o controlador e a exibição a ser exibida:

  .when('/orders/:customerId', { controller: 'OrdersController', templateUrl: 'views/orders.html' }) 

Tão essencial que o problema do controlador indefinido PODE ocorrer neste erro acidental de não referenciar o controlador!

Esse erro também pode ocorrer quando você tem um projeto grande com vários módulos. Certifique-se de que o aplicativo (módulo) usado em você arquivo angular é o mesmo que você usa no seu modelo, neste exemplo ” thisApp “.

app.js

 angular .module('thisApp', []) .controller('ContactController', ['$scope', function ContactController($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; }]); 

index.html

    

Tenha cuidado no bloco que declara as rotas,

 .when('/resourcePath', { templateUrl: 'resource.html', controller: 'secondModuleController' //lives in secondModule }); 

Declare secondModule como uma dependência depois de ‘ngRoute’ resolver o problema. Eu sei que tive esse problema.

Eu estava recebendo este erro porque eu estava usando uma versão antiga do angular que não era compatível com o meu código.

Esses erros ocorreram, no meu caso, precedidos por erros de syntax em list.find () fuction; ‘find’ método de uma lista não reconhecida pelo IE11, por isso tem que replace pelo método Filter, que funciona tanto para o IE11 e cromo. consulte https://github.com/flrs/visavail/issues/19

Este erro, no meu caso, foi precedido por erro de syntax no método find de uma lista no IE11. então substituiu o método find pelo método filter como sugerido https://github.com/flrs/visavail/issues/19

então acima do controlador não definido erro resolvido.

Se tudo mais falhar e você estiver usando Gulp ou algo similar … apenas execute novamente!

Eu perdi 30mins quádruplo verificando tudo quando tudo o que precisava era de um chute rápido nas calças.

Eu recebi o mesmo erro ao seguir um tutorial antigo com (não o suficiente) AngularJS 1.4.3. De longe, a solução mais simples é editar a fonte angular.js

 function $ControllerProvider() { var controllers = {}, globals = false; 

para

 function $ControllerProvider() { var controllers = {}, globals = true; 

e apenas siga o tutorial como está, e as funções globais obsoletas funcionam apenas como controladores.