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

javascript angularjs angularjs-service Cuong.Ho
fuente

1

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

Syed Mohamed

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

bmleite
fuente

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>

Jorge Casariego
fuente

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.

AA11oAKas
fuente

10

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

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

}]);

jprisma
fuente

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.

Kuldeep Dangi
fuente

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.

Damith Ganegoda
fuente

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']);

James
fuente

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.

sigmapi13
fuente

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>

Maurizio L
fuente

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.

sosostris
fuente

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!

zaini
fuente

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.

Sergey Kulgan
fuente

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>

Nikhil Mahirrao
fuente

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

Casey Plummer
fuente

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.

usuario2470087
fuente

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){

}]);

lechuga plegable
fuente

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>

Expandir fragmento

Esto solucionó ese error.

obscure79
fuente

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.

Patrik Bego
fuente

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(){

}]);

Kunok
fuente

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>

Mahesh
fuente

0

Compruebe si su página HTML incluye:

angular.min guión
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.

Yehudit Grinwald
fuente

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

arreglalo
fuente

0

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

Priyank
fuente

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

Charlie
fuente

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

Respuestas: