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

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

AA11oAKas
la source
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) {

}]);
jprism
la source
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.

Kuldeep Dangi
la source
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.

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

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

sosostris
la source
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é!

zaini
la source
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.

Sergey Kulgan
la source
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>

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

user2470087
la source
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){

}]);
pliage
la source
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>
Développer l'extrait

Cela a corrigé cette erreur.

obscur79
la source
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.

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

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

Yehudit Grinwald
la source
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

répare le
la source
0

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

Priyank
la source
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

Charlie
la source