Angularjs: Error: [ng: areq] Argumento 'HomeController' não é uma função, foi indefinido


109

Esta é minha demonstração usando angularjs, para criar um arquivo de serviço e adicionar serviço a um controlador.

Tenho dois problemas com minha demonstração:

  • Um é quando coloco <script src="HomeController.js">antes de <script src="MyService.js">obter este erro,

Erro: [ng: areq] O argumento 'HomeController' não é uma função, ficou indefinido

  • A outra é quando coloco <script src="MyService.js">antes de <script src="HomeController.js">obter o seguinte erro,

Erro: [$ injector: despr] Provedor desconhecido: MyServiceProvider <- MyService

Minha fonte:

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

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

Arquivo 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 se você adicionou seu * .controller.js está adicionado no arquivo BundleConfig.cs. Isso corrige o meu.
Syed Mohamed

Respostas:


210

Isso cria um novo módulo / aplicativo:

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

Enquanto isso acessa um módulo já criado ( observe a omissão do segundo argumento ):

var myApp = angular.module('myApp');

Como você usa a primeira abordagem em ambos os scripts, basicamente substitui o módulo criado anteriormente.

No segundo script sendo carregado, use var myApp = angular.module('myApp');.


Isso também corrigiu meu erro. Por engano, deixei angular.module ('myApp', ['ui.router']) em 2 arquivos diferentes (app.js e routes.js). Depois de remover o array de routes.js, ele corrigiu os testes de unidade.
Allan Bogh de

64

Eu experimentei esse erro uma vez. Meu problema é que eu não estava adicionando FILE_NAME_WHERE_IS_MY_FUNCTION.js

então meu arquivo.html nunca encontrou onde minha função estava

Depois de adicionar o "file.js" resolvi o problema

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

1
Ajudou muito. Yeoman enfia as tags de script na parte inferior do index.html do gerador angular ... muito fácil de perder. Obrigado por isso!
JaeGeeTee

correu o mesmo prob. Tive que adicionar o arquivo controller.js correspondente na minha página de índice junto com outros controladores
ahmednawazbutt

21

Certifique-se também de que seus controladores estão definidos nas tags de script na parte inferior de seu index.html, antes da tag de fechamento do corpo.

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

desde que tudo esteja escrito "corretamente" (o mesmo) em suas páginas specific.html, specific.js e app.js, isso deve resolver seu problema.


10

Aconteceu comigo poucas vezes sempre que sinto falta "," entre lista de injeções e função

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

}]);

A mesma coisa aconteceu comigo quando faltou o "," entre o nome do controlador e a lista de injeções, ou sejaapp.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
Benji

5

Eu também encontrei esse erro, mas no meu caso foi por causa da convenção de nomenclatura do controlador. Eu declarei controller: "QuestionController"em, .statemas na definição do controlador eu declarei como

yiiExamApp.controller('questionController' ...

mas deveria ser

yiiExamApp.controller('QuestionController' ...

Espero que ajude as pessoas que enfrentam esse erro por causa desse erro estúpido que perdi 4 horas para identificá-lo.


5

Eu tenho o mesmo erro. Eu defini java script assim

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

então mudei para este

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

Depois disso, meu problema está resolvido.


4

Eu também encontrei esse mesmo erro e a correção para mim foi incluir meu módulo filho na matriz do módulo principal.

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

4

Se TODOS OS OUTROS falharem e você estiver executando localmente na pilha MÉDIA como eu com gole ... pare e sirva novamente! Eu estava puxando meu ouvido, verificando meticulosamente tudo, de todas as suas postagens, sem sucesso, até que eu simplesmente refiz o serviço de gole.


Isso também acontece com o saque grunhido
acromm

2

Eu tive um problema semelhante. A correção foi garantir que seus controladores não sejam apenas definidos nas tags de script na parte inferior de seu index.html, logo antes da tag de fechamento do corpo, mas TAMBÉM validar se eles estão na ordem em que sua pasta está estruturada.

<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

Eu também encontrei esse problema no meu projeto. Eventualmente funcionou depois que inseri o my-controller.jsno meu karma.conf.jsarquivo, com a <script>tag.

Espero que isso ajude. Existem muitas razões que podem levar a este problema.


1

Eu também recebi esse erro.

Tive que adicionar meu novo controlador às informações de roteamento. \ src \ js \ app.js

angular.module('Lillan', [
  'ngRoute',
  'mobile-angular-ui',
  'Lillan.controllers.Main'
])

Eu adicionei meu controlador para fazer parecer

angular.module('Lillan', [
  'ngRoute',
  'mobile-angular-ui',
  'Lillan.controllers.Main',
  'Lillan.controllers.Growth'
])

Felicidades!


1

Obviamente que os posts anteriores são úteis, mas qualquer um dos itens acima não é útil no meu caso. O motivo estava na sequência errada de carregamento de scripts . Por exemplo, no meu caso, o controlador editCtrl.js depende de (usa) ui-bootstrap-tpls.js, portanto, deve ser carregado primeiro. Isso causou um erro:

<script src="scripts/app/station/editCtrl.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>

Isso é certo, funciona:

<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="scripts/app/station/editCtrl.js"></script>

Portanto, para corrigir o erro, você precisa primeiro declarar todos os scripts sem dependências e, em seguida, os scripts que dependem do declarado anteriormente.


1

Tente isto

    <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

No meu caso, estava faltando o nome do aplicativo Angular no arquivo html. Por exemplo, incluí este arquivo para iniciar o código do meu aplicativo. Achei que estava sendo executado, mas não foi.

app.module.js

(function () {
    'use strict';

    angular
        .module('app', [
        // Other dependencies here...
        ])
    ;

})();

No entanto, quando declarei o aplicativo em html, eu tinha o seguinte:

index.html

<html lang="en" ng-app>

Mas para fazer referência ao aplicativo Angular pelo nome que usei, tive que usar:

index.html (fixo)

<html lang="en" ng-app="app">

1

Eu estava recebendo o erro porque adicionei o script do controlador antes do script em que defini o módulo correspondente no aplicativo. Primeiro adicione o script

<script src = "(path of module.js file)"></script>

Então apenas adicione

<script src = "(path of controller.js file)"></script>

No arquivo principal.


1

Erro: ng: areq Argumento incorreto me ocorreu algumas vezes porque fechei o colchete muito cedo. No exemplo RUIM abaixo, ele é fechado incorretamente após '$ state' quando deveria ir antes do parêntese final.

RUIM:

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

});

BOA:

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

}]);

0

Sim. Como muitos apontaram anteriormente, adicionei o caminho src a todos os arquivos do controlador no 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>

Isso corrigiu esse erro.


0

Eu tive o mesmo problema, mas esqueci de incluir o arquivo no processo de minimização grunt / gulp.

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

Espero que ajude.


0

Na minha situação, esse erro apareceu quando eu não declarei a função em um argumento de array.

Aquele com erro :

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

O fixo:

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

}]);

0

Verifique também se há erros de ortografia .

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

Verifique se sua página HTML inclui:

  1. angular.min roteiro
  2. app.js
  3. página de JavaScript do controlador

A ordem em que os arquivos são incluídos é importante. Foi a minha solução para este problema.

Espero que isto ajude.


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

A mesma coisa para mim, vírgula ',' antes da função me ajudou a corrigir o problema - Erro: ng: areq Argumento incorreto


0

Meu arquivo de controlador foi armazenado em cache como vazio. Limpar o cache corrigiu isso para mim.


0

Eu acidentalmente movi meu HomeController.js para fora do diretamente, onde era esperado. Colocando-o novamente no local original.

Depois disso, meu site começou a carregar páginas automaticamente a cada segundo, nem consegui ver o erro. Então, limpei o cache do navegador. Resolveu o problema

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.