javascript - services - Angularjs: Error:[ng: areq] El argumento ''HomeController'' no es una función, no se definió
diferencia entre factory y service angularjs (24)
Esta es mi demostración usando angularjs, para crear un archivo de servicio y agregar servicio a un controlador.
Tengo dos problemas con mi demo:
-
Una es cuando pongo
<script src="HomeController.js">antes de<script src="MyService.js">obtengo este error,
Error: [ng: areq] El argumento ''HomeController'' no es una función, no se definió
-
La otra es cuando pongo
<script src="MyService.js">antes de<script src="HomeController.js">obtengo el siguiente error,
Error: [$ inyector: unpr] Proveedor desconocido: MyServiceProvider <- MyService
Mi fuente:
Archivo
Index.html
:
<!DOCTYPE html>
<html >
<head lang="en">…</head>
<body ng-app="myApp">
…
<div ng-controller="HomeController">
<div ng-repeat="item in hello">{{item.id + item.name}}</div>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<!-- App libs -->
<script src="app/app.js"></script>
<script src="app/services/MyService.js"></script>
<script src="app/controllers/HomeController.js"></script>
</body>
</html>
Archivo
HomeController.js
:
(function(angular){
''use strict'';
var myApp = angular.module(''myApp'',[]);
myApp.controller(''HomeController'',function($scope,MyService){
$scope.hello=[];
$scope.hello = MyService.getHello();
});
})(window.angular);
Archivo
MyService.js
:
(function(angular){
''use strict'';
var myApp = angular.module(''myApp'',[]);
myApp.service(''MyService'', function () {
var hello =[ {id:1,name:''cuong''},
{id:2,name:''nguyen''}];
this.getHello = function(){
return hello;
};
});
})(window.angular);
Accidentalmente saqué mi HomeController.js directamente del lugar donde se esperaba. Poniéndolo nuevamente en la ubicación original.
Después de que mi sitio web comenzó a cargar páginas automáticamente cada segundo, incluso no pude ver el error. Así que borré el caché del navegador. Resolvió el problema
Compruebe si su página HTML incluye:
-
script
angular.min -
app.js - página de JavaScript del controlador
El orden en que se incluyen los archivos es importante. Fue mi solución a este problema.
Espero que esto ayude.
En mi caso, me faltaba el nombre de la aplicación Angular en el archivo html. Por ejemplo, había incluido este archivo para iniciar mi código de aplicación. Asumí que se estaba ejecutando, pero no fue así.
app.module.js
(function () {
''use strict'';
angular
.module(''app'', [
// Other dependencies here...
])
;
})();
Sin embargo, cuando declaró la aplicación en el html tuve esto:
index.html
<html lang="en" ng-app>
Pero para hacer referencia a la aplicación Angular por el nombre que usé, tuve que usar:
index.html (fijo)
<html lang="en" ng-app="app">
En mi situación, este error apareció cuando no declaró la función dentro de un argumento de matriz.
El que tiene error :
taskAppControllers.controller(''MainMenuCtrl'', []);
El fijo:
taskAppControllers.controller(''MainMenuCtrl'', [function(){
}]);
Esto crea un nuevo módulo / aplicación:
var myApp = angular.module(''myApp'',[]);
Mientras esto accede a un módulo ya creado ( observe la omisión del segundo argumento ):
var myApp = angular.module(''myApp'');
Dado que usa el primer enfoque en ambos scripts, básicamente está anulando el módulo que creó anteriormente.
En el segundo script que se carga, use
var myApp = angular.module(''myApp'');
.
Experimenté este error una vez. Mi problema fue que no estaba agregando FILE_NAME_WHERE_IS_MY_FUNCTION.js
entonces mi file.html nunca encontró dónde estaba mi función
Una vez que agregué "file.js" resolví el problema
<html ng-app=''myApp''>
<body ng-controller=''TextController''>
....
....
....
<script src="../file.js"></script>
</body>
</html>
Me pasó algunas veces cada vez que extraño "," entre la lista de inyecciones y la función
app.controller(''commonCtrl'', [''$scope'', ''$filter'',function($scope,$filter) {
}]);
Mi archivo de controlador se almacenó en caché como vacío. Limpiar el caché lo arregló para mí.
Obviamente, las publicaciones anteriores son útiles, pero ninguna de las anteriores es útil en mi caso. La razón estaba en una secuencia incorrecta de scripts de carga . Por ejemplo, en mi caso, el controlador editCtrl.js depende de (usa) ui-bootstrap-tpls.js, por lo que debe cargarse primero. Esto causó un error:
<script src="scripts/app/station/editCtrl.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>
Esto es correcto, funciona:
<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="scripts/app/station/editCtrl.js"></script>
Entonces, para corregir el error, primero debe declarar todos los scripts sin dependencias , y luego los scripts que dependen de los declarados previamente.
Prueba esto
<title>My First Angular App</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<h3>Adding Simple Controller<h3>
<div ng-controller="SimpleController">
Name:
<br/>
<input type = "text" data-ng-model = "name"/> {{name}}
<br/>
<ul>
<li data-ng-repeat = "cust in customers | filter:name | orderBy:''city''">
{{cust.name}} - {{cust.city}}
</li>
</ul>
</div>
<script>
var angularApp = angular.module(''angularApp'',[]);
angularApp.controller(''SimpleController'', [ ''$scope'', SimpleController]);
function SimpleController($scope)
{
$scope.customers = [
{name:''Nikhil Mahirrao'', city:''Pune''},
{name:''Kapil Mahire'', city:''Pune''},
{name:''Narendra Mahirrao'', city:''Phophare''},
{name:''Mithun More'', city:''Shahada''}
];
}
</script>
</body>
Recibí el error porque había agregado el script del controlador antes del script donde había definido el módulo correspondiente en la aplicación. Primero agregue el script
<script src = "(path of module.js file)"></script>
Entonces solo agrega
<script src = "(path of controller.js file)"></script>
En el archivo principal
Si TODO lo demás falla y estás corriendo localmente en la pila MEAN como yo con un trago ... ¡solo detente y sirve de nuevo! Estuve escuchando meticulosamente revisando todo, desde todas sus publicaciones, hasta que simplemente volví a ejecutar el servicio de trago.
Si. Como muchos han señalado anteriormente, he agregado la ruta src a todos los archivos del controlador en el index.html.
<script src="controllers/home.js"></script>
<script src="controllers/detail.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/navbar.js"></script>
<script src="controllers/signup.js"></script>
Esto solucionó ese error.
También asegúrese de que sus controladores estén definidos dentro de las etiquetas de script hacia la parte inferior de su index.html justo antes de la etiqueta de cierre del cuerpo.
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/Administration.js"></script>
<script src="scripts/controllers/Leaderboard.js"></script>
<script src="scripts/controllers/Login.js"></script>
<script src="scripts/controllers/registration.js"></script>
siempre que todo esté escrito "correctamente" (lo mismo) en sus páginas específicas.html, específicas.js y app.js, esto debería resolver su problema.
También encontré este mismo error y la solución para mí fue incluir mi módulo secundario en la matriz del módulo principal.
var myApp = angular.module(''myApp'', [''ngRoute'', ''childModuleName'']);
También encontré este problema en mi proyecto.
Eventualmente funcionó después de que
karma.conf.js
my-controller.js
en mi archivo
karma.conf.js
, con la etiqueta
<script>
.
Espero que esto ayude. Hay muchas razones que pueden conducir a este problema.
También experimenté este error, pero en mi caso fue debido a la convención de nomenclatura del controlador.
.state
controller: "QuestionController"
en
.state
pero en la definición del controlador lo declare como
yiiExamApp.controller(''questionController'' ...
pero debería ser
yiiExamApp.controller(''QuestionController'' ...
Espero que ayude a las personas que enfrentan este error debido a este estúpido error. Perdí 4 horas en identificarlo.
También recibí este error.
Tuve que agregar mi nuevo controlador a la información de enrutamiento. / src / js / app.js
angular.module(''Lillan'', [
''ngRoute'',
''mobile-angular-ui'',
''Lillan.controllers.Main''
])
Agregué mi controlador para que parezca
angular.module(''Lillan'', [
''ngRoute'',
''mobile-angular-ui'',
''Lillan.controllers.Main'',
''Lillan.controllers.Growth''
])
¡Salud!
También verifique si hay errores ortográficos .
var MyApp = angular.module(''AppName'',[]);
MyApp.controller(''WRONG_SPELLING_MyCtrl'', [''$scope'', MyControllerCtrl])
function MyControllerCtrl($scope) {
var vm = $scope;
vm.Apple = ''Android'';
}
<div ng-controller="ACTUAL_SPELLING_MyCtrl">
{{Apple}}
</div>
Tengo el mismo error. Definí un script java como este
<script src="controllers/home.js" />
entonces cambié a esto
<script src="controllers/home.js"></script>
Después de esto, mi problema está resuelto.
Tuve el mismo problema, pero olvidé incluir el archivo en el proceso de minimización de gruñidos / tragos.
grunt.initConfig({
uglify: {
my_target: {
files: {
''dest/output.min.js'': [''src/input1.js'', ''src/missing_controller.js'']
}
}
}
});
Espero que ayude.
Tuve un problema similar. La solución fue garantizar que sus controladores no solo se definan dentro de las etiquetas de script hacia la parte inferior de su index.html justo antes de la etiqueta de cierre para el cuerpo, sino que TAMBIÉN validen que estén en orden de cómo está estructurada su carpeta.
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/Administration.js"></script>
<script src="scripts/controllers/Leaderboard.js"></script>
<script src="scripts/controllers/Login.js"></script>
<script src="scripts/controllers/registration.js"></script>
Error: ng: areq Bad Argument me ha atrapado un par de veces porque cierro el corchete demasiado pronto. En el ejemplo BAD a continuación, se cierra incorrectamente después de ''$ state'' cuando en realidad debería ir antes del paréntesis final.
MALO:
sampleApp.controller(''sampleApp'', [''$scope'', ''$state''], function($scope, $state){
});
BUENO:
sampleApp.controller(''sampleApp'', [''$scope'', ''$state'', function($scope, $state){
}]);
sampleApp.controller(''sampleApp'', [''$scope'', ''$state'', function($scope, $state){
Lo mismo para mí, la coma '','' antes de la función me ayudó a solucionar el problema - Error: ng: areq Bad Argument