javascript - ejemplos - Error AngularJS: ''argumento'' FirstCtrl ''no es una función, no está definido''
angularjs tutorial (15)
Me di cuenta de que se hizo la misma pregunta varias veces aquí, lo intenté para resolverlo, 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 los controladores, no puedo hacer que funcione.
Cuando lo ejecuto con Chrome, aparece este error en la consola:
''argumento'' FirstCtrl ''no es una función, no está definido''.
Realmente no sé lo que está mal. El código es el mismo en el tutorial.
Aquí está el código para el HTML que tengo:
<!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>
Y aquí está el código para main.js:
function FirstCtrl($scope){
$scope.data = {message: "Hello"};
}
Acabo de hacer este tutorial y seguí la respuesta @ gion_13. Aún no funcionó. Lo resolvió haciendo que mi nombre ng-app en el índice sea idéntico al de mi archivo js. Exactamente idéntico, incluso las comillas. Asi que:
<div ng-app="myapp">
<div ng-controller="FirstCtrl">
y el js:
angular.module("myapp", [])
.controller(''FirstCtrl'',function($scope) {
$scope.data= {message:"hello"};
});
Es extraño cómo la aplicación ng tiene que ser idéntica, pero el controlador ng no.
En mi caso, este mensaje proviene de la inyección de dependencia olvidada en el módulo principal
Esto puede suceder si tienes un trago mal configurado para agregar tu código de 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 mis declaraciones de controlador. Una vez que agregué una exclusión para que index.js no se minimizara y se inyectara por segunda vez, mi aplicación comenzó a funcionar. Otro consejo si alguna de las soluciones anteriores no aborda su problema.
Me enfrenté a este problema, pero pude corregir este problema cambiando el nombre del controlador, por favor, pruébelo.
ctrlSub.execSummaryDocuments = function(){};
Me he enfrentado a este problema y se solucionó de la siguiente manera:
primero quite ng-app de:
<html ng-app>agregar 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"};
}
Mire su caja de carta también. Pasé una hora persiguiendo este error.
<section id="forgotpwd" ng-controller="ForgotPwdController">
mientras yo nombro el controlador
angular
.module(''app'')
.controller(''ForgotpwdController'', ForgotpwdController);
Todos deberían ser nombrados de manera consistente, en este caso Forgot p wdController con minúscula p.
No estoy seguro acerca 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.
Obtuve 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
Otra buena: la redefinición accidental de los módulos. Copié / pegué cosas con demasiada anticipación el día de hoy y terminé teniendo una definición de módulo en alguna parte, que superé con mis definiciones de controlador:
// controllers.js - dependencies in one place, perfectly fine
angular.module(''my.controllers'', [/* dependencies */]);
Luego, en mis definiciones, se suponía que debía referirme a ella de la siguiente manera:
// SomeCtrl.js - grab the module, add the controller
angular.module(''my.controllers'')
.controller(''SomeCtrl'', function() { /* ... */ });
Lo que hice , en cambio, 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 paréntesis adicional en la llamada a angular.module .
Tenía dos controladores con el mismo nombre definido en dos archivos diferentes de JavaScript. Irritar ese angular no puede dar un mensaje de error más claro que indique un conflicto de espacio de nombres.
Tienes 2 directivas ng-app sin nombre en tu html.
Pierde el que está en tu div.
Actualizar
Probemos con un enfoque diferente.
Defina un módulo en su archivo js y asigne la directiva ng-app al mismo. 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 justamente eso: http://jsfiddle.net/FssbL/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 la que depende ng-app.
a veces, algo incorrecto en la sintaxis del código dentro de la función arroja este error. Verifica tu función correctamente. En mi caso sucedió cuando estaba tratando de asignar campos Json con valores y estaba usando dos puntos: para hacer la asignación en lugar de signo igual = ...
eliminar ng-app = "" de
<div ng-app="">
y simplemente hazlo
<div>
Debe nombrar su ng-app , dando a su aplicación un espacio de nombre; simplemente usar ng-app no es suficiente .
En lugar de:
<html ng-app>
...
Necesitarás algo como esto en su lugar:
<html ng-app="app">
...
Entonces, como así:
var app = angular.module("app", []).controller("ActionsController", function($scope){});