Error de AngularJS: 'el argumento' FirstCtrl 'no es una función, no está definido'

93

Me di cuenta de que la misma pregunta se hizo varias veces aquí, intenté resolverla pero nada ayuda.

Estoy siguiendo este tutorial con los videos de egghead.

Pero cuando llego a la sección de Controladores y Compartir datos entre controladores, no puedo hacer que funcione.

Cuando lo ejecuto con Chrome, aparece este error en la consola:

'El argumento' FirstCtrl 'no es una función, no está definido'.

Realmente no sé qué pasa. El código es el mismo del 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
fuente

Aquí está la solución en los segundos comentarios - stackoverflow.com/questions/24894870/…

— Kanchan

108

Tiene 2 ng-appdirectivas sin nombre en su html.
Pierde el de tu div.

Actualización
Intentemos un enfoque diferente.
Defina un módulo en su archivo js y asígnele la ng-appdirectiva. Después de eso, defina el controlador como un componente ng, no como una función simple:

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

y la parte js:

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

Aquí hay una demostración en línea que está haciendo precisamente eso: http://jsfiddle.net/FssbL/1/

— gion_13
fuente

Muchas gracias por la respuesta, lamentablemente sigo recibiendo el mismo error .. Así que perdí el ng-app = "" del div, pero todavía no funciona.

— Pumba

1

¡Muchas gracias por tu ayuda! Ya no lo entiendo, hice exactamente lo mismo que mostró aquí y en la demostración en línea, pero todavía dice que 'FirstCtrl' no está definido. Voy a intentarlo de nuevo desde el principio, ojalá lo consiga funcionar, porque en los próximos tutoriales me sale el mismo problema.

— Pumba

¡¡Excelente!! Funciona. Olvidé cerrar el atributo de tipo en la etiqueta de script para el archivo js. ¡Y eso en combinación con su segunda solución lo hizo funcionar! Muchas gracias :))

— Pumba

6

El video de demostración no envuelve el controlador dentro del módulo. Entonces, ¿por qué funciona para él, pero no para mí? egghead.io/lessons/angularjs-controllers

— Demodave

2

@Demodave, tengo la misma pregunta. Supongo que los videos se grabaron durante una versión anterior de AngularJS y, por lo tanto, definir los controladores era potencialmente menos estricto (pero, esa es solo mi suposición, estaría feliz de que alguien lo confirme o lo niegue)

— MandM

93

Recibí exactamente el mismo mensaje de error y, en mi caso, resultó que no enumeré el archivo JS del controlador (por ejemplo, first-ctrl.js) en mi index.html

— Mariusz
fuente

1

¿Qué quiere decir con que no enumeró el archivo js del controlador? ¿Estás diciendo que no lo incluiste?

— Demodave el

@DavidStone sí, ese era mi caso, en ese entonces.

— Mariusz

Otro error de novato: paréntesis de color, etc. en el controlador pueden hacer que se muestre el mismo tipo de error en la consola.

— user2938649

9

Acabo de hacer este tutorial y seguí la respuesta de @ gion_13. Todavía no funcionó. Lo resolvió haciendo que el nombre de mi ng-app en el índice sea idéntico al de mi archivo js. Exactamente idéntico, incluso las comillas. Entonces:

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

y los js:

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

Es extraño cómo la ng-app tiene que ser idéntica pero el ng-controller no.

— an1waukoni
fuente

Cuatro horas esto me costó; (, gracias por ayudarme finalmente a resolverlo.

— Dowlers

7

Debes nombrar tung-app , dando a tu aplicación un espacio de nombres; simplemente usar ng-app no es suficiente .

En vez de:

<html ng-app>
...

En su lugar, necesitará algo como esto:

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

Entonces, así:

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

— usuario1429980
fuente

5

Otro bonito: redefinir módulos accidentalmente. Copié / pegué cosas un poco más temprano hoy y terminé teniendo una definición de módulo en alguna parte, que anulé con las definiciones de mi controlador:

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

Luego, en mis definiciones, se suponía que debía hacer referencia a él así:

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

Lo que hice en su lugar fue:

// 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() { /* ... */ });

Tenga en cuenta el corchete adicional en la llamada a angular.module.

— Michael Jess
fuente

3

eliminar ng-app = "" de

<div ng-app="">

y simplemente hazlo

<div>

— John Smith
fuente

3

Si usa enrutamiento en la configuración de su aplicación, asegúrese de que no use ng-controller en el html. En su lugar, debería tener ng-view. El controlador generalmente se definirá junto con las vistas en el enrutamiento.

— Marc

1

Yo también enfrenté el mismo problema. Pero el problema fue que olvidé incluir el módulo en la lista de módulos de los que depende la aplicación ng.

3

Esto debería ser un comentario, no una respuesta.

— Anthony Perot

1

Me he enfrentado a este problema y lo solucioné de la siguiente manera:

primero elimine ng-app de:
```
<html ng-app>
```
agregue el nombre de ng-app a myApp:
```
<div ng-app="myApp">
```

agregue esta línea de código antes de la función:

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

aspecto final del guión:

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

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

— Azhar
fuente

1

En mi caso, este mensaje proviene de la inyección de dependencia olvidada en el módulo principal

— Thomas Gobert
fuente

1

Esto puede suceder si ha configurado mal Gulp para agregar el código de su aplicación angular más de una vez. En mi caso, esto estaba en index.js, y lo estaba agregando como parte del directorio de archivos js (globbed in gulp) antes y después de las declaraciones de mi controlador. Una vez que agregué una exclusión para que index.js no se minificara e inyectara la segunda vez, mi aplicación comenzó a funcionar. Otro consejo si alguna de las soluciones anteriores no resuelve su problema.

— rncrtr
fuente

1

En primer lugar, si el nombre del módulo no está definido, en JS no podrá acceder al módulo y vincular el controlador a él.

Debe proporcionar el nombre del módulo al módulo angular. también hay una diferencia en el uso de definir módulo 1. angular.module ("firstModule", []) 2. angular.module ("firstModule")

1 - uno es declarar el nuevo módulo "firstModule" sin dependencia agregada en los segundos argumentos. 2 - Esto es para usar el "firstModule" que se inicializa en otro lugar y está usando tratando de obtener el módulo inicializado y hacerle modificaciones.

— Eshaan Kumar
fuente

0

Me enfrenté a este problema, pero pude corregirlo cambiando el nombre del controlador, por favor pruébelo.

ctrlSub.execSummaryDocuments = function(){};

— Amay Kulkarni
fuente

0

a veces, algo incorrecto en la sintaxis del código dentro de la función arroja este error. Verifique su función correctamente. En mi caso, sucedió cuando intentaba asignar campos Json con valores y estaba usando dos puntos: para hacer la asignación en lugar del signo igual = ...

— Amitesh Ranjan
fuente

0

Tenía dos controladores con el mismo nombre definidos en dos archivos javascript diferentes. Irritante que angular no puede dar un mensaje de error más claro que indique un conflicto de espacio de nombres.

— thebiggestlebowski
fuente

0

No estoy seguro de este tutorial, pero tuve el mismo problema cuando olvidé incluir el archivo en el proceso de minimización de grunt / gulp.

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

Espero que ayude.

— Patrik Bego
fuente

0

Mire también la carcasa de su carta. Pasé una buena hora persiguiendo este error.

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

mientras nombro el controlador

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

Todos deben tener un nombre coherente, en este caso Forgot p wdController con p minúscula.

— Jeson Martajaya
fuente