web-dev-qa-db-fra.com

Erreur AngularJS: 'argument' FirstCtrl 'n'est pas une fonction, obtenu indéfini'

J'ai remarqué que la même question a été posée à quelques reprises ici, j'ai essayé de la résoudre mais rien n'y fait.

Je suis ce tutoriel avec les vidéos egghead.

Mais lorsque j'arrive à la section Contrôleurs et partage de données entre contrôleurs, je ne peux pas le faire fonctionner.

Lorsque je l'exécute avec Chrome, j'obtiens cette erreur dans la console:

'argument' FirstCtrl 'n'est pas une fonction, indéfinie'.

Je ne sais vraiment pas ce qui ne va pas. Le code est le même que dans le tutoriel.

HTML

<!DOCTYPE html>
<html ng-app>
 <head>
    <title>AngularJS Tutorials: Controllers</title>
    <link rel="stylesheet" href="mystyle.css">
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
 </head>
 <body>
    <div ng-app="">
       <div ng-controller="FirstCtrl">   
           <h1> {{data.message + " world"}}</h1>

           <div class="{{data.message}}">
               Wrap me in a foundation component
           </div>
       </div>
    </div>
    <script type="text/javascript" src="main.js"></script>
 </body>
</html> 

main.js

function FirstCtrl($scope){
   $scope.data = { message: "Hello" };
} 
92
Pumba

Vous avez 2 directives ng-app non nommées dans votre code HTML.
Perdre celui de votre div.

Mettre à jour
Essayons une approche différente.
Définissez un module dans votre fichier js et affectez-lui la directive ng-app. Après cela, définissez le contrôleur comme un composant ng et non comme une simple fonction:

<div ng-app="myAppName">  
<!-- or what's the root node of your angular app -->

et la partie js:

angular.module('myAppName', [])
    .controller('FirstCtrl', function($scope) {
         $scope.data = {message: 'Hello'};
    });

Voici une démo en ligne qui fait exactement cela: http://jsfiddle.net/FssbL/1/

107
gion_13

J'ai reçu exactement le même message d'erreur et dans mon cas, il s'est avéré que je n'ai pas répertorié le fichier JS du contrôleur (par exemple, first-ctrl.js) dans mon index.html

92
Mariusz

Je viens de faire ce tutoriel et j'ai suivi la réponse de @ gion_13. Je n'ai toujours pas travaillé. Résolu en rendant mon nom ng-app dans l'index identique à celui de mon fichier js. Exactement identique, même les citations. Alors:

<div ng-app="myapp">
    <div ng-controller="FirstCtrl">

et le js:

 angular.module("myapp", [])
.controller('FirstCtrl',function($scope) {
    $scope.data= {message:"hello"};
  });

Bizarre que le ng-app soit identique mais que le ng-controller ne le soit pas.

9
an1waukoni

Vous devez nommer votre ng-app, en donnant à votre application un espace de noms; en utilisant simplement ng-appne suffit pas.

Au lieu de:

<html ng-app>
...

Vous aurez besoin de quelque chose comme ceci à la place:

<html ng-app="app">
...

Alors, comme ça:

var app = angular.module("app", []).controller("ActionsController", function($scope){});
7
user1429980

Un autre exemple sympa: redéfinir des modules par accident. J'ai copié/collé des choses un peu trop tôt aujourd'hui et j'ai fini par avoir une définition de module quelque part, que j'ai remplacée par la définition de mon contrôleur:

// controllers.js - dependencies in one place, perfectly fine
angular.module('my.controllers', [/* dependencies */]);

Ensuite, dans mes définitions, je devais le référencer comme suit:

// SomeCtrl.js - grab the module, add the controller
angular.module('my.controllers')
 .controller('SomeCtrl', function() { /* ... */ });

Ce que j'ai fait à la place, c'était:

// Do not try this at home!

// SomeCtrl.js
angular.module('my.controllers', []) // <-- redefined module, no harm done yet
  .controller('SomeCtrl', function() { /* ... */ });

// SomeOtherCtrl.js
angular.module('my.controllers', []) // <-- redefined module - SomeCtrl no longer accessible
  .controller('SomeOtherCtrl', function() { /* ... */ });

Notez le crochet supplémentaire dans l'appel à angular.module.

5
Michael Jess

retirer ng-app = "" de

<div ng-app="">

et simplement le faire

<div>
3
john smith

Moi aussi j'ai fait face au même problème. Mais le problème était que j'ai oublié de lister le module dans la liste des modules dont dépend ng-app.

1
user2718640

Cela peut arriver si vous avez mal configuré pour ajouter votre code d'application angular plus d'une fois. Dans mon cas, il s'agissait de index.js, et l'ajoutait dans le répertoire des fichiers js (globbed in gulp) avant et après mes déclarations de contrôleur. Une fois que j'ai ajouté une exclusion pour index.js à ne pas minifier et à injecter une deuxième fois, mon application a commencé à fonctionner. Autre astuce si l’une des solutions ci-dessus ne résout pas votre problème.

1
rncrtr

J'ai fait face à ce problème et il a résolu de la manière suivante:

  1. supprimez d'abord ng-app de:

    <html ng-app>
    
  2. ajoutez le nom de ng-app à monApp:

    <div ng-app="myApp">
    
  3. ajoute cette ligne de code avant fonction:

    angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);
    

aspect final du script:

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

function FirstCtrl($scope){
    $scope.data = {message: "Hello"};
} 
1
Azhar

Dans mon cas, ce message provient d'une injection de dépendance oubliée dans le module principal.

1
Thomas Gobert

Premièrement - Si le nom du module n'est pas défini, vous ne pourrez pas accéder au module dans le JS ni y connecter l'automate.

Vous devez fournir le nom du module à angular module. il y a une différence dans l'utilisation du module de définition également 1. angular.module ("firstModule", []) 2. angular.module ("firstModule")

1 - on doit déclarer le nouveau module "firstModule" sans aucune dépendance ajoutée dans les seconds arguments. 2 - Ceci consiste à utiliser le "premier module" qui est initialisé ailleurs et que vous utilisez pour obtenir le module initialisé et le modifier.

1
Eshaan Kumar

j'ai fait face à ce problème, mais j'ai pu le corriger en renommant le contrôleur. Essayez-le.

ctrlSub.execSummaryDocuments = function(){};
0
Amay Kulkarni

parfois, quelque chose de mal dans la syntaxe du code à l'intérieur de la fonction lève cette erreur. Vérifiez votre fonction correctement. Dans mon cas, c’est arrivé lorsque j’essayais d’attribuer des valeurs à des champs Json et que je me servais de deux points: pour effectuer l’affectation au lieu du signe égal = ...

0
Amitesh Ranjan

Regardez votre enveloppe de lettre aussi. J'ai passé une bonne heure à chasser ce bug.

<section id="forgotpwd" ng-controller="ForgotPwdController">

alors que je nomme le contrôleur

angular
    .module('app')
    .controller('ForgotpwdController', ForgotpwdController);

Ils doivent tous être nommés de manière cohérente, dans ce cas, oublié p wdController avec minuscule p.

0
Jeson Martajaya

J'ai eu deux contrôleurs avec le même nom défini dans deux fichiers javascript différents. Irritant, angular ne peut pas donner un message d'erreur plus clair indiquant un conflit d'espace de nom.

0
thebiggestlebowski

Je ne suis pas sûr de ce didacticiel, mais le problème était le même lorsque 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 ça t'as aidé.

0
Patrik Bego