Erreur AngularJS: 'l'argument' FirstCtrl 'n'est pas une fonction, n'est pas défini'

93

J'ai remarqué que la même question avait été posée plusieurs fois ici, j'ai essayé de la résoudre mais rien n'y fait.

Je suis ce tutoriel avec les vidéos d'egghead.

Mais quand 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, il n'est pas défini'.

Je ne sais vraiment pas ce qui ne va pas. Le code est le même que celui du didacticiel.

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" };
}

javascript angularjs

— Pumba
source

Voici la solution dans les deuxièmes commentaires - stackoverflow.com/questions/24894870/…

— Kanchan

108

Vous avez 2 ng-appdirectives sans nom dans votre html.
Perdez celui de votre div.

Mise à jour
Essayons une approche différente.
Définissez un module dans votre fichier js et affectez-lui la ng-appdirective. Après cela, définissez le contrôleur comme un composant ng, pas 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/

— gion_13
source

Merci beaucoup pour la réponse, malheureusement j'obtiens toujours la même erreur .. J'ai donc perdu le ng-app = "" de la div, mais cela ne fonctionne toujours pas.

— Pumba

1

Je vous remercie beaucoup pour votre aide! Je ne le comprends plus, j'ai fait exactement la même chose que vous avez montré ici et dans la démo en ligne, mais il est toujours indiqué que «FirstCtrl» n'est pas défini. Je vais essayer à nouveau depuis le début, j'espère que cela fonctionne, car dans les prochains tutoriels, j'obtiens le même problème.

— Pumba

Génial!! Ça marche. J'ai oublié de fermer l'attribut type sur la balise de script pour le fichier js. Et cela, en combinaison avec votre deuxième solution, cela a fonctionné! Merci beaucoup :))

— Pumba

6

La vidéo de démonstration n'enveloppe pas le contrôleur dans le module. Alors pourquoi ça marche pour lui, mais pas pour moi? egghead.io/lessons/angularjs-controllers

— Demodave

2

@Demodave, j'ai la même question. Je suppose que les vidéos ont été enregistrées pendant une version antérieure d'AngularJS, et que la définition des contrôleurs était donc potentiellement moins stricte (mais, ce n'est que mon hypothèse, je serais heureux que quelqu'un confirme ou nie)

— MandM

93

J'ai eu 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

— Mariusz
source

1

Que voulez-vous dire que vous n'avez pas répertorié le fichier js du contrôleur? Êtes-vous en train de dire que vous ne l'avez pas inclus?

— Demodave

@DavidStone oui - c'était mon cas, à l'époque.

— Mariusz

Autre erreur noob: les parenthèses rouges, etc. dans le contrôleur peuvent provoquer l'affichage du même type d'erreur dans la console.

— user2938649

9

Je viens de faire ce tutoriel et j'ai suivi la réponse @ gion_13. N'a toujours pas fonctionné. Résolu le problème 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 les js:

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

Bizarre comment le ng-app doit être identique mais pas le ng-controller .

— an1waukoni
source

Cela m'a coûté quatre heures; (, merci de m'avoir enfin aidé à le comprendre.

— Dowlers

7

Vous devez nommer votreng-app , en donnant à votre application un espace de noms; il ng-app ne suffit pas d' utiliser simplement .

Au lieu de:

<html ng-app>
...

Vous aurez besoin de quelque chose comme ça à la place:

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

Alors, comme ça:

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

— user1429980
source

5

Une autre belle: redéfinir accidentellement les modules. J'ai copié / collé des trucs un peu trop avec empressement plus tôt dans la journée et j'ai fini par avoir une définition de module quelque part, que j'ai écrasée avec mes définitions de contrôleur:

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

Ensuite, dans mes définitions, j'étais censé le référencer comme ceci:

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

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

// 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 la parenthèse supplémentaire dans l'appel à angular.module.

— Michael Jess
source

3

supprimer ng-app = "" de

<div ng-app="">

et faites-le simplement

<div>

— John Smith
source

3

Si vous utilisez le routage dans la configuration de votre application, assurez-vous de ne pas utiliser ng-controller dans le html. Vous devriez plutôt avoir ng-view. Le contrôleur sera généralement défini avec les vues dans le routage.

— Marc

1

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

3

Cela devrait être un commentaire, pas une réponse.

— Anthony Perot

1

J'ai rencontré ce problème et il a été résolu de la manière suivante:

supprimez d'abord ng-app de:
```
<html ng-app>
```
ajoutez le nom de ng-app à myApp:
```
<div ng-app="myApp">
```

ajoutez cette ligne de code avant la fonction:

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

aspect final du script:

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

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

— Azhar
source

1

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

— Thomas Gobert
source

1

Cela peut se produire si vous avez mal configuré gulp pour ajouter le code de votre application angulaire plus d'une fois. Dans mon cas, c'était dans index.js, et il l'ajoutait dans le répertoire des fichiers js (globbed dans gulp) avant et après mes déclarations de contrôleur. Une fois que j'ai ajouté une exclusion pour que index.js ne soit pas minifié et injecté la deuxième fois, mon application a commencé à fonctionner. Une autre astuce si l'une des solutions ci-dessus ne résout pas votre problème.

— rncrtr
source

1

Premièrement - Si le nom du module n'est pas défini, dans le JS, vous ne pourrez pas accéder au module et y lier le contrôleur.

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

1 - l'un consiste à déclarer le nouveau module "firstModule" sans aucune dépendance ajoutée dans les seconds arguments. 2 - Il s'agit d'utiliser le "firstModule" qui est initialisé ailleurs et que vous utilisez en essayant d'obtenir le module initialisé et d'y apporter des modifications.

— Eshaan Kumar
source

0

J'ai rencontré ce problème mais j'ai pu corriger ce problème en renommant le contrôleur, veuillez essayer.

ctrlSub.execSummaryDocuments = function(){};

— Amay Kulkarni
source

0

parfois, quelque chose de mal dans la syntaxe du code à l'intérieur de la fonction génère cette erreur. Vérifiez correctement votre fonction. Dans mon cas, cela s'est produit lorsque j'essayais d'attribuer des champs Json avec des valeurs et que j'utilisais deux points: pour faire l'affectation au lieu du signe égal = ...

— Amitesh Ranjan
source

0

J'avais deux contrôleurs avec le même nom définis dans deux fichiers javascript différents. Irritant que angular ne puisse pas donner un message d'erreur plus clair indiquant un conflit d'espace de noms.

— thebiggestlebowski
source

0

Je ne suis pas sûr de ce tutoriel mais j'ai eu le même problè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 cela pourra aider.

— Patrik Bego
source

0

Surveillez également votre enveloppe de lettre. J'ai passé une bonne heure à chasser ce bogue.

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

pendant 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 p minuscule.

— Jeson Martajaya
source