Erro AngularJS: 'argumento' FirstCtrl 'não é uma função, foi indefinido'

93

Notei que a mesma pergunta foi feita algumas vezes aqui, tentei resolver mas nada adiantou.

Estou seguindo este tutorial com os vídeos egghead.

Mas quando chego à seção de Controladores e Compartilhamento de dados entre controladores, não consigo fazer funcionar.

Quando o executo com o Chrome, recebo este erro no console:

'argumento' FirstCtrl 'não é uma função, foi indefinida'.

Eu realmente não sei o que há de errado. O código é o mesmo do tutorial.

HTML

<!DOCTYPE html>
<html ng-app>
 <head>
    <title>AngularJS Tutorials: Controllers</title>
    <link rel="stylesheet" href="mystyle.css">
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
 </head>
 <body>
    <div ng-app="">
       <div ng-controller="FirstCtrl">   
           <h1> {{data.message + " world"}}</h1>

           <div class="{{data.message}}">
               Wrap me in a foundation component
           </div>
       </div>
    </div>
    <script type="text/javascript" src="main.js"></script>
 </body>
</html>

main.js

function FirstCtrl($scope){
   $scope.data = { message: "Hello" };
}

javascript angularjs

— Pumba
fonte

Aqui está a solução nos segundos comentários - stackoverflow.com/questions/24894870/…

— Kanchan

108

Você tem 2 ng-appdiretivas sem nome em seu html.
Perca aquele em seu div.

Atualizar
Vamos tentar uma abordagem diferente.
Defina um módulo em seu arquivo js e atribua a ng-appdiretiva a ele. Depois disso, defina o controlador como um componente ng, não como uma função simples:

<div ng-app="myAppName">  
<!-- or what's the root node of your angular app -->

e a parte js:

angular.module('myAppName', [])
    .controller('FirstCtrl', function($scope) {
         $scope.data = {message: 'Hello'};
    });

Aqui está uma demonstração online que faz exatamente isso: http://jsfiddle.net/FssbL/1/

— gion_13
fonte

Muito obrigado pela resposta, infelizmente ainda recebo o mesmo erro .. Então, perdi o ng-app = "" do div, mas ainda não funciona.

— Pumba

1

Muito obrigado por sua ajuda! Eu não entendo mais, eu fiz exatamente a mesma coisa que você mostrou aqui e na demonstração online, mas ainda diz que 'FirstCtrl' está indefinido. Vou tentar de novo desde o início, espero que funcione, porque nos próximos tutoriais terei o mesmo problema.

— Pumba,

Ótimo!! Funciona. Esqueci de fechar o atributo type na tag de script do arquivo js. E isso, em combinação com sua segunda solução, fez funcionar! Muito obrigado :))

— Pumba

6

O vídeo de demonstração não envolve o controlador no módulo. Então, por que funciona para ele, mas não para mim? egghead.io/lessons/angularjs-controllers

— Demodave

2

@Demodave, tenho a mesma pergunta. Presumo que os vídeos foram gravados durante uma versão anterior do AngularJS e, portanto, definir os controladores era potencialmente menos estrito (mas, é apenas minha suposição, ficaria feliz se alguém confirmasse ou negasse)

— MandM

93

Recebi exatamente a mesma mensagem de erro e, no meu caso, descobri que não listei o arquivo JS do controlador (por exemplo, first-ctrl.js) no meu index.html

— Mariusz
fonte

1

O que você quer dizer com não listou o arquivo js do controlador? Você está dizendo que não o incluiu?

— Demodave

@DavidStone sim - esse era o meu caso, naquela época.

— Mariusz

Outro erro noob: parênteses de roteamento, etc. no controlador podem fazer com que o mesmo tipo de erro seja exibido no console.

— user2938649

9

Acabei de fazer este tutorial e segui a resposta de @ gion_13. Ainda não funcionou. Resolvi tornando o nome do meu ng-app no índice idêntico ao do meu arquivo js. Exatamente idêntico, até as aspas. Assim:

<div ng-app="myapp">
    <div ng-controller="FirstCtrl">

e o js:

 angular.module("myapp", [])
.controller('FirstCtrl',function($scope) {
    $scope.data= {message:"hello"};
  });

Estranho como o ng-app tem que ser idêntico, mas o ng-controller não.

— an1waukoni
fonte

Isso me custou quatro horas; (obrigado por finalmente me ajudar a descobrir.

— Dowlers

7

Você deve nomear seung-app , dando ao seu aplicativo um namespace; simplesmente usar ng-app não é suficiente .

Ao invés de:

<html ng-app>
...

Você precisará de algo assim:

<html ng-app="app">
...

Então, assim:

var app = angular.module("app", []).controller("ActionsController", function($scope){});

— user1429980
fonte

5

Outro bom: redefinir módulos acidentalmente. Eu copiei / colei coisas um pouco ansiosamente mais cedo e acabei tendo uma definição de módulo em algum lugar, que eu substituí com minhas definições de controlador:

// controllers.js - dependencies in one place, perfectly fine
angular.module('my.controllers', [/* dependencies */]);

Então, em minhas definições, eu deveria referenciá-lo assim:

// SomeCtrl.js - grab the module, add the controller
angular.module('my.controllers')
 .controller('SomeCtrl', function() { /* ... */ });

O que eu fiz em vez disso foi:

// Do not try this at home!

// SomeCtrl.js
angular.module('my.controllers', []) // <-- redefined module, no harm done yet
  .controller('SomeCtrl', function() { /* ... */ });

// SomeOtherCtrl.js
angular.module('my.controllers', []) // <-- redefined module - SomeCtrl no longer accessible
  .controller('SomeOtherCtrl', function() { /* ... */ });

Observe o colchete extra na chamada para angular.module.

— Michael Jess
fonte

3

remova ng-app = "" de

<div ng-app="">

e simplesmente faça

<div>

— john smith
fonte

3

Se você usar o roteamento na configuração do seu aplicativo, certifique-se de não usar o ng-controller no html. Em vez disso, você deve ter ng-view. O controlador será geralmente definido junto com as visualizações no roteamento.

— Marc

1

Eu também enfrentei o mesmo problema. Mas o problema é que esqueci de listar o módulo na lista de módulos dos quais o ng-app depende.

3

Isso deve ser um comentário, não uma resposta.

— Anthony Perot

1

Eu enfrentei esse problema e ele foi corrigido da seguinte maneira:

primeiro remova o ng-app de:
```
<html ng-app>
```
adicione o nome do ng-app ao myApp:
```
<div ng-app="myApp">
```

adicione esta linha de código antes da função:

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

aparência final do script:

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

function FirstCtrl($scope){
    $scope.data = {message: "Hello"};
}

— Azhar
fonte

1

No meu caso, esta mensagem vem de injeção de dependência esquecida no módulo principal

— Thomas Gobert
fonte

1

Isso pode acontecer se você tiver configurado incorretamente o gulp para adicionar o código do aplicativo angular mais de uma vez. No meu caso, isso estava em index.js e estava adicionando-o como parte do diretório de arquivos js (globbed em gulp) antes e depois de minhas declarações de controlador. Depois de adicionar uma exclusão para index.js para não ser minimizado e injetar pela segunda vez, meu aplicativo começou a funcionar. Outra dica se alguma das soluções acima não resolver o seu problema.

— rncrtr
fonte

1

Primeiramente - Se o nome do módulo não estiver definido, no JS você não conseguirá acessar o módulo e vincular o controlador a ele.

Você precisa fornecer o nome do módulo ao módulo angular. há uma diferença no uso de definir módulo também 1. angular.module ("firstModule", []) 2. angular.module ("firstModule")

1 - um é declarar o novo módulo "firstModule" sem nenhuma dependência adicionada nos segundos argumentos. 2 - Isso é para usar o "firstModule" que é inicializado em outro lugar e você está tentando pegar o módulo inicializado e fazer modificações nele.

— Eshaan Kumar
fonte

0

Enfrentei esse problema, mas consegui corrigi-lo renomeando o controlador, experimente.

ctrlSub.execSummaryDocuments = function(){};

— Amay Kulkarni
fonte

0

às vezes, algo errado na sintaxe do código dentro da função gera esse erro. Verifique sua função corretamente. No meu caso, aconteceu quando eu estava tentando atribuir valores a campos Json e estava usando dois pontos: para fazer a atribuição em vez do sinal de igual = ...

— Amitesh Ranjan
fonte

0

Eu tinha dois controladores com o mesmo nome definido em dois arquivos javascript diferentes. É irritante que o angular não possa fornecer uma mensagem de erro mais clara indicando um conflito de namespace.

— thebiggestlebowski
fonte

0

Não tenho certeza sobre este tutorial, mas tive o mesmo problema quando esqueci de incluir o arquivo no processo de minimização grunt / gulp.

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
      }
    }
  }
});

Espero que ajude.

— Patrik Bego
fonte

0

Cuidado com a caixa da carta também. Passei uma boa hora perseguindo esse bug.

<section id="forgotpwd" ng-controller="ForgotPwdController">

enquanto eu nomeio o controlador

angular
    .module('app')
    .controller('ForgotpwdController', ForgotpwdController);

Todos eles devem ser nomeados de forma consistente, neste caso Forgot p wdController com minúsculo p.

— Jeson Martajaya
fonte