Angularjs: Error: [ng: areq] El argumento 'HomeController' no es una función, no está definido


109

Esta es mi demostración usando angularjs, para crear un archivo de servicio y agregar un servicio a un controlador.

Tengo dos problemas con mi demo:

  • Uno es cuando pongo <script src="HomeController.js">antes de <script src="MyService.js">obtener este error,

Error: [ng: areq] El argumento 'HomeController' no es una función, no está definido

  • La otra es cuando pongo <script src="MyService.js">antes que <script src="HomeController.js">me sale el siguiente error,

Error: [$ injector: unpr] Proveedor desconocido: MyServiceProvider <- MyService

Mi fuente:

Expediente 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>

Expediente 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);

1
Confirme si ha agregado su * .controller.js en el archivo BundleConfig.cs. Esto arregla el mío.
Syed Mohamed

Respuestas:


210

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 utiliza 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');.


Esto también solucionó mi error. Dejé angular.module ('myApp', ['ui.router']) por error en 2 archivos diferentes (app.js y routes.js). Una vez que eliminé la matriz de route.js, corrigió las pruebas unitarias.
Allan Bogh

64

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ó donde estaba mi función

Una vez que agregué el "file.js" resolví el problema

<html ng-app='myApp'>
    <body ng-controller='TextController'>
    ....
    ....
    ....
    <script src="../file.js"></script>
    </body>
</html>

1
Ayudó a lo grande. Yeoman coloca las etiquetas de script en la parte inferior del index.html del generador angular ... muy fácil de pasar por alto. ¡Gracias por esto!
JaeGeeTee

corrió el mismo problema. Tuve que agregar el archivo controller.js correspondiente en mi página de índice junto con otros controladores
ahmednawazbutt

21

También asegúrese de que sus controladores estén definidos dentro de las etiquetas de secuencia de comandos 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" (el mismo) en sus páginas specific.html, specific.js y app.js, esto debería resolver su problema.


10

Me pasaba pocas veces cuando fallaba "," entre la lista de inyecciones y la función

app.controller('commonCtrl', ['$scope', '$filter',function($scope,$filter) {

}]);

Lo mismo me sucedió cuando faltaba el "," entre el nombre del controlador y la lista de inyecciones, es decirapp.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
Benji

5

También experimenté este error, pero en mi caso fue debido a la convención de nomenclatura del controlador. Declaré controller: "QuestionController"en .statepero en la definición de controlador como lo declaré

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 que perdí 4 horas en identificarlo.


5

Tengo el mismo error. Definí el script java como este

<script src="controllers/home.js" />

luego cambié a esto

<script src="controllers/home.js"></script>

Después de esto, mi problema está resuelto.


4

También encontré este mismo error y la solución para mí fue incluir mi módulo hijo en la matriz del módulo principal.

var myApp = angular.module('myApp', ['ngRoute', 'childModuleName']);

4

Si TODO LO DEMÁS falla y su ejecución local en la pila MEAN como yo con trago ... ¡simplemente deténgase y sirva nuevamente! Estaba sacando mi audífono revisando meticulosamente todo, desde todas sus publicaciones en vano hasta que simplemente volví a ejecutar gulp serve.


Esto también sucede con el servicio gruñido
acromm

2

Tuve un problema similar. La solución fue asegurarse de que sus controladores no solo estén definidos dentro de las etiquetas de secuencia de comandos 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 el 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>

2

También encontré este problema en mi proyecto. Finalmente funcionó después de que inserté el my-controller.jsen mi karma.conf.jsarchivo, con el<script> etiqueta.

Espero que esto ayude. Hay muchas razones que pueden conducir a este problema.


1

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!


1

Obviamente, las publicaciones anteriores son útiles, pero ninguna de las anteriores es útil en mi caso. El motivo fue una secuencia incorrecta de carga de scripts . Por ejemplo, en mi caso, el controlador editCtrl.js depende de (usa) ui-bootstrap-tpls.js, por lo que debe cargarse primero. Esto provocó 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.


1

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>


1

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 el código de mi aplicación. Había asumido 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 tenía 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">

1

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.


1

Error: ng: areq Argumento incorrecto me ha 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){

}]);

0

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.


0

Tuve el mismo problema, pero 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.


0

En mi situación, este error apareció cuando no declaré la función dentro de un argumento de matriz.

El del error :

taskAppControllers.controller('MainMenuCtrl', []);

El fijo:

taskAppControllers.controller('MainMenuCtrl', [function(){

}]);

0

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>

0

Compruebe si su página HTML incluye:

  1. angular.min guión
  2. app.js
  3. 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.


0
sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){

Lo mismo para mí, coma ',' antes de la función me ayudó a solucionar el problema - Error: ng: areq Bad Argument


0

Mi archivo de controlador se almacenó en caché como vacío. Limpiar la caché me lo arregló.


0

Accidentalmente moví mi HomeController.js directamente, donde se esperaba. Poniéndolo de nuevo en su ubicación original.

Después de eso, mi sitio web comenzó a cargar páginas automáticamente cada segundo, ni siquiera pude ver el error. Así que borré la caché del navegador. Resolvió el problema

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.