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);
javascript angularjs angularjs-service Cuong.Ho
fonte
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');.

bmleite
fonte
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>
Jorge Casariego
fonte
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.

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

}]);
jprisma
fonte
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.

Kuldeep Dangi
fonte
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.

Damith Ganegoda
fonte
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']);
James
fonte
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.

sigmapi13
fonte
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>
Maurizio L
fonte
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.

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

Zaini
fonte
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.

Sergey Kulgan
fonte
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>

Nikhil Mahirrao
fonte
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">
Casey Plummer
fonte
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.

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

}]);
dobradinha
fonte
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>
Expandir trecho

Isso corrigiu esse erro.

obscuro 79
fonte
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.

Patrik Bego
fonte
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(){

}]);
Kunok
fonte
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>
Mahesh
fonte
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.

Yehudit Grinwald
fonte
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

consertá-lo
fonte
0

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

Priyank
fonte
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

Charlie
fonte