web-dev-qa-db-fra.com

Angularjs: Erreur: [ng: areq] L'argument 'HomeController' n'est pas une fonction, obtenu indéfini

Ceci est ma démo utilisant angularjs pour créer un fichier de service et ajouter un service à un contrôleur.

J'ai deux problèmes avec ma démo:

  • On est quand je mets <script src="HomeController.js"> avant <script src="MyService.js"> je reçois cette erreur,

Erreur: [ng: areq] L'argument 'HomeController' n'est pas une fonction, eu undefined

  • L'autre est quand je mets <script src="MyService.js"> avant <script src="HomeController.js"> j'obtiens l'erreur suivante,

Erreur: [$ injector: unn] Fournisseur inconnu: MyServiceProvider <- MyService

Ma source:

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

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

Fichier 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);
javascriptangularjsangularjs-service
103
Cuong.Ho

Cela crée un nouveau module/application:

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

Alors que ceci accède à un module déjà créé ( notez l’omission du second argument ):

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

Puisque vous utilisez la première approche sur les deux scripts, vous remplacez fondamentalement le module que vous avez créé précédemment.

Sur le deuxième script en cours de chargement, utilisez var myApp = angular.module('myApp');.

207
bmleite

J'ai vécu cette erreur une fois. Mon problème était que je n'ajoutais pas le FILE_NAME_WHERE_IS_MY_FUNCTION.js  

donc mon fichier.html jamais trouvé où était ma fonction

Une fois que j'ai ajouté le "file.js" j'ai résolu le problème

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

Assurez-vous également que vos contrôleurs sont définis dans les balises de script vers le bas de votre index.html, juste avant la balise de fermeture du corps.

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

à condition que tout soit orthographié "correctement" (le même) sur vos pages specific.html, specific.js et app.js, cela devrait résoudre votre problème.

20
AA11oAKas

Il m'est arrivé plusieurs fois chaque fois que je manque "," entre liste d'injections et fonction

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

}]);
9
jprism

J'ai également rencontré cette erreur, mais dans mon cas, c'était à cause de la convention de nommage du contrôleur. J'ai déclaré controller: "QuestionController" dans .state mais dans la définition du contrôleur je l'ai déclaré comme 

yiiExamApp.controller('questionController' ...

mais ça devrait être

yiiExamApp.controller('QuestionController' ...

j'espère que cela aidera les personnes confrontées à cette erreur à cause de cette erreur stupide que j'ai perdue 4 heures à l'identifier.

5
Kuldeep Dangi

J'ai également rencontré cette même erreur et le correctif pour moi était d'inclure mon module enfant dans le tableau de modules principal.

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

Si ALL ELSE échoue et que vous courez localement sur la pile MEAN comme moi avec gulp ... arrêtez-vous et servez à nouveau! J'entendais mon audition vérifier méticuleusement tout ce qui se passait dans tous vos messages sans succès jusqu'à ce que je répète simplement mon service.

4
sigmapi13

J'ai eu la même erreur. J'ai défini le script Java comme ceci

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

alors j'ai changé pour le présent

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

Après cela, mon problème est résolu.

4
Damith Ganegoda

J'ai aussi rencontré ce problème dans mon projet. Cela a finalement fonctionné après avoir inséré le my-controller.js dans mon fichier karma.conf.js, avec la balise <script>.

J'espère que cela aidera. Il y a beaucoup de raisons qui peuvent mener à ce problème.

2
sosostris

Dans mon cas, il me manquait le nom de l'application Angular dans le fichier html. Par exemple, j'avais inclus ce fichier comme étant le début de mon code d'application. J'avais supposé que c'était en cours, mais ça ne l'était pas.

app.module.js 

(function () {
    'use strict';

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

})();

Cependant, lorsque j'ai déclaré l'application dans le code HTML, j'avais ceci:

index.html 

<html lang="en" ng-app>

Mais pour faire référence à l'application Angular par le nom que j'ai utilisé, je devais utiliser:

index.html (Fixé) 

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

J'obtenais l'erreur parce que j'avais ajouté le script du contrôleur avant le script où j'avais défini le module correspondant dans l'application . D'abord, ajoutez le script.

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

Ensuite, ajoutez seulement

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

Dans le fichier principal.

1
user2470087

J'ai aussi eu cette erreur. 

Je devais ajouter mon nouveau contrôleur aux informations de routage. \src\js\app.js

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

J'ai ajouté mon contrôleur pour le faire ressembler 

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

À votre santé!

1
zaini

Essaye ça

 

    <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
Nikhil Mahirrao

De toute évidence, les précédents messages sont utiles, mais aucun des éléments ci-dessus ne me sont utiles. La raison était dans mauvaise séquence de chargement des scripts . Par exemple, dans mon cas, le contrôleur editCtrl.js dépend de (utilise) ui-bootstrap-tpls.js, il devrait donc être chargé en premier . Cela a provoqué une erreur:

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

C'est vrai, ça marche:

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

Donc, pour corriger l'erreur, vous devez commencez par déclarer tous les scripts sans dépendances , puis les scripts dépendant de ceux précédemment déclarés. 

1
Sergey Kulgan

J'ai eu le même problème. Le correctif était de s’assurer que vos contrôleurs ne sont pas seulement définis dans les balises de script vers le bas de votre index.html juste avant la balise de fermeture du corps, mais qu’ils valident AUSSI qu’ils sont dans l’ordre dans lequel votre dossier est structuré.

<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>
1
Maurizio L

Erreur: ng: areq Mauvais argument m'a reçu une ou deux fois parce que je ferme le crochet trop tôt. Dans l'exemple BAD ci-dessous, il est fermé incorrectement après '$ state' alors qu'il devrait être placé avant la parenthèse finale. 

MAL:

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

});

BIEN:

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

}]);
1
foldinglettuce
sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){

Même chose pour moi, virgule ',' avant que la fonction m’ait aidé à résoudre le problème - Erreur: ng: areq argument incorrect

0
fixit

Vérifiez si votre page HTML comprend: 

  1. angular.min script
  2. app.js 
  3. page JavaScript du contrôleur 

L'ordre dans lequel les fichiers sont inclus est important. C'était ma solution à ce problème.

J'espère que cela t'aides.

0
Yehudit Grinwald

Vérifiez également pour les fautes d'orthographe .

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
Mahesh

J'ai accidentellement déplacé mon HomeController.js hors du directement, où il était prévu. Le remettre à son emplacement d’origine.

Après que mon site Web ait commencé à charger des pages automatiquement toutes les secondes, je ne pouvais même pas regarder l'erreur. Donc j'ai effacé le cache du navigateur. Ça a résolu le problème

0
Charlie

Oui. Comme beaucoup l'ont déjà fait remarquer, j'ai ajouté le chemin src à tous les fichiers de contrôleur dans le fichier 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>

Cela a corrigé cette erreur. 

0
obscure79

J'ai eu le même problème, mais j'ai oublié d'inclure le fichier dans le processus de minimisation Grunt/Gulp. 

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

J'espère que cela pourra aider.

0
Patrik Bego

Dans ma situation, cette erreur est apparue lorsque je n'ai pas déclaré de fonction dans un argument de tableau. 

Celui avec error :

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

Le fixe:

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

}]);
0
Kunok

Mon fichier de contrôleur a été mis en cache comme vide. Effacer le cache me l'a corrigé.

0
Priyank