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


109

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:

  • La première est quand je mets <script src="HomeController.js">avant <script src="MyService.js">que j'obtienne cette erreur,

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

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

Erreur: [$ injector: un] 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);

1
Confirmez si vous avez ajouté votre * .controller.js est ajouté dans le fichier BundleConfig.cs. Cela corrige le mien.
Syed Mohamed

Réponses:


210

Cela crée un nouveau module / application:

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

Pendant que cela accède à un module déjà créé ( notez l'omission du deuxième 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');.


Cela a également corrigé mon erreur. J'ai laissé par erreur angular.module ('myApp', ['ui.router']) dans 2 fichiers différents (app.js et routes.js). Une fois que j'ai supprimé le tableau de routes.js, les tests unitaires ont été corrigés.
Allan Bogh

64

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

donc mon fichier.html n'a 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>

1
A beaucoup aidé. Yeoman range les balises de script en bas de l'index.html du générateur angulaire ... très facile à manquer. Merci pour cela!
JaeGeeTee

a couru le même problème. J'ai dû ajouter le fichier controller.js correspondant dans ma page d'index avec d'autres contrôleurs
ahmednawazbutt

21

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 pour body.

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


10

M'arrive quelques fois à chaque fois que je rate "," entre la liste des injections et la fonction

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

}]);

La même chose m'est arrivée en manquant le "," entre le nom du contrôleur et la liste des injections, c'estapp.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
Benji

5

J'ai également rencontré cette erreur, mais dans mon cas, c'était à cause de la convention de dénomination du contrôleur. J'ai déclaré controller: "QuestionController"dans .statemais 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 aide les personnes confrontées à cette erreur à cause de cette erreur stupide que j'ai perdue 4 heures à l'identifier.


5

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

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

puis j'ai changé pour ça

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

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


4

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

Si ALL ELSE échoue et que vous exécutez localement sur la pile MOYENNE comme moi avec gulp ... arrêtez-vous et servez à nouveau! J'étais en train de sortir mon écoute en vérifiant méticuleusement tout de tous vos messages en vain jusqu'à ce que j'ai simplement relancé le service gulp.


Cela se produit également avec le service grunt
acromm

2

J'ai eu un problème similaire. Le correctif était de s'assurer que vos ctrollers ne sont pas seulement définis dans les balises de script vers le bas de votre index.html juste avant la balise de fermeture pour body, mais également de valider qu'ils sont dans l'ordre de la structure de votre dossier.

<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

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

J'espère que cela aidera. De nombreuses raisons peuvent conduire à ce problème.


1

J'ai aussi eu cette erreur.

J'ai dû 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é ma manette pour qu'elle ressemble à

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

À votre santé!


1

Évidemment, les messages précédents sont utiles, mais aucun des éléments ci-dessus ne sont utiles dans mon cas. La raison était une 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 doit 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>

Ainsi, pour corriger l'erreur, vous devez d' abord déclarer tous les scripts sans dépendances , puis les scripts qui dépendent de ceux précédemment déclarés.


1

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

Dans mon cas, il me manquait le nom de l'application Angular dans le fichier html. Par exemple, j'avais inclus ce fichier pour démarrer le code de mon application. J'avais supposé qu'il était diffusé, mais ce n'était pas le cas.

app.module.js

(function () {
    'use strict';

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

})();

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

index.html

<html lang="en" ng-app>

Mais pour référencer l'application Angular par le nom que j'ai utilisé, j'ai dû utiliser:

index.html (fixe)

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

1

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. Ajoutez d'abord 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

Erreur: ng: areq Bad Argument m'a obtenu plusieurs fois parce que je ferme le crochet trop tôt. Dans l'exemple BAD ci-dessous, il est fermé de manière incorrecte après '$ state' alors qu'il devrait en fait aller avant la parenthèse finale.

MAUVAIS:

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

});

BIEN:

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

}]);

0

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

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

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

Celui avec l' erreur :

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

Le fixe:

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

}]);

0

Vérifiez également 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

Vérifiez si votre page HTML comprend:

  1. angular.min scénario
  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
sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){

Même chose pour moi, virgule ',' avant que la fonction ne m'a aidé à résoudre le problème - Erreur: ng: areq Bad Argument


0

Mon fichier de contrôleur a été mis en cache comme vide. Effacer le cache a résolu le problème pour moi.


0

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

Après cela, mon site Web a commencé à charger des pages automatiquement toutes les secondes, je n'ai même pas pu regarder l'erreur. J'ai donc effacé le cache du navigateur. Cela a résolu le problème

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.