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
la source
la source
Réponses:
Vous avez 2
ng-app
directives 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-app
directive. Après cela, définissez le contrôleur comme un composant ng, pas comme une simple fonction:et la partie js:
Voici une démo en ligne qui fait exactement cela: http://jsfiddle.net/FssbL/1/
la source
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
la source
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:
et les js:
Bizarre comment le ng-app doit être identique mais pas le ng-controller .
la source
Vous devez nommer votre
ng-app
, en donnant à votre application un espace de noms; ilng-app
ne suffit pas d' utiliser simplement .Au lieu de:
Vous aurez besoin de quelque chose comme ça à la place:
Alors, comme ça:
la source
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:
Ensuite, dans mes définitions, j'étais censé le référencer comme ceci:
Ce que j'ai fait à la place, c'est:
Notez la parenthèse supplémentaire dans l'appel à
angular.module
.la source
supprimer ng-app = "" de
et faites-le simplement
la source
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.
la source
J'ai rencontré ce problème et il a été résolu de la manière suivante:
supprimez d'abord ng-app de:
ajoutez le nom de ng-app à myApp:
ajoutez cette ligne de code avant la fonction:
aspect final du script:
la source
Dans mon cas, ce message provient d'une injection de dépendance oubliée dans le module principal
la source
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.
la source
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.
la source
J'ai rencontré ce problème mais j'ai pu corriger ce problème en renommant le contrôleur, veuillez essayer.
la source
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 = ...
la source
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.
la source
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.
J'espère que cela pourra aider.
la source
Surveillez également votre enveloppe de lettre. J'ai passé une bonne heure à chasser ce bogue.
pendant que je nomme le contrôleur
Ils doivent tous être nommés de manière cohérente, dans ce cas Oublié p wdController avec p minuscule.
la source