Errore AngularJS: "l'argomento" FirstCtrl "non è una funzione, non è stato definito"

93

Ho notato che la stessa domanda è stata posta alcune volte qui, ho provato a risolverla ma niente aiuta.

Sto seguendo questo tutorial con i video della testa d'uovo.

Ma quando arrivo alla sezione Controller e Condivisione dei dati tra controller, non riesco a farlo funzionare.

Quando lo eseguo con Chrome, ottengo questo errore nella console:

"L'argomento" FirstCtrl "non è una funzione, non è stato definito".

Non so davvero cosa c'è che non va. Il codice è lo stesso del tutorial.

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
fonte

Ecco la soluzione nei secondi commenti :

— stackoverflow.com/questions/24894870/…

108

Hai 2 ng-appdirettive senza nome nel tuo html.
Perdi quello nel tuo div.

Aggiorna
Proviamo un approccio diverso.
Definisci un modulo nel tuo file js e assegnagli la ng-appdirettiva. Successivamente, definisci il controller come un componente ng, non come una semplice funzione:

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

e la parte js:

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

Ecco una demo online che sta facendo proprio questo: http://jsfiddle.net/FssbL/1/

— gion_13
fonte

Grazie mille per la risposta, purtroppo ricevo ancora lo stesso errore .. Quindi ho perso ng-app = "" dal div, ma ancora non funziona.

— Pumba

1

Grazie mille per il vostro aiuto! Non lo capisco più, ho fatto esattamente la stessa cosa che hai mostrato qui e nella demo online ma dice ancora che "FirstCtrl" non è definito. Lo riproverò dall'inizio, spero di farlo funzionare, perché nei prossimi tutorial ottengo lo stesso problema.

— Pumba

Grande!! Funziona. Ho dimenticato di chiudere l'attributo type sul tag script per il file js. E questo in combinazione con la tua seconda soluzione lo ha fatto funzionare! Grazie mille :))

— Pumba

6

Il video dimostrativo non avvolge il controller all'interno del modulo. Allora perché funziona per lui, ma non per me? egghead.io/lessons/angularjs-controllers

— Demodave

2

@Demodave, ho la stessa domanda. Presumo che i video siano stati registrati durante una versione precedente di AngularJS, e quindi la definizione dei controller era potenzialmente meno rigorosa (ma, questa è solo una mia ipotesi, sarei felice che qualcuno confermasse o negasse)

— MandM

93

Ho ricevuto esattamente lo stesso messaggio di errore e nel mio caso si è scoperto che non ho elencato il file JS del controller (ad esempio first-ctrl.js) nel mio index.html

— Mariusz
fonte

1

Cosa vuoi dire che non hai elencato il file js del controller? Stai dicendo che non l'hai incluso?

— Demodave

@DavidStone sì, quello era il mio caso, allora.

— Mariusz

Un altro errore noob: le parentesi rosse, ecc. Nel controller possono causare la visualizzazione dello stesso tipo di errore nella console.

— user2938649

9

Ho appena fatto questo tutorial e ho seguito la risposta di @ gion_13. Ancora non ha funzionato. L'ho risolto rendendo il mio nome ng-app nell'indice identico a quello nel mio file js. Esattamente identiche, anche le virgolette. Così:

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

e il js:

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

Strano come ng-app debba essere identica ma ng-controller no.

— an1waukoni
fonte

Quattro ore mi sono costate; (, grazie per avermi finalmente aiutato a capirlo.

— Dowlers

7

Devi nominare il tuong-app , dando alla tua app uno spazio dei nomi; semplicemente usandong-app non è sufficiente .

Invece di:

<html ng-app>
...

Avrai bisogno di qualcosa di simile invece:

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

Quindi, in questo modo:

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

— user1429980
fonte

5

Un'altra bella: ridefinire accidentalmente i moduli. Oggi ho copiato / incollato cose un po 'troppo avidamente e ho finito per avere una definizione del modulo da qualche parte, che ho sovrascritto con le mie definizioni del controller:

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

Quindi nelle mie definizioni, avrei dovuto fare riferimento in questo modo:

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

Quello che ho fatto invece è stato:

// 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() { /* ... */ });

Notare la parentesi aggiuntiva nella chiamata a angular.module.

— Michael Jess
fonte

3

rimuovere ng-app = "" da

<div ng-app="">

e semplicemente fallo

<div>

— John Smith
fonte

3

Se utilizzi il routing nella configurazione della tua app, assicurati di non utilizzare ng-controller nell'html. Dovresti invece avere ng-view. Il controller verrà solitamente definito insieme alle viste nel routing.

— Marc

1

Anch'io ho affrontato lo stesso problema. Ma il problema era che mi ero dimenticato di elencare il modulo nell'elenco dei moduli da cui dipende ng-app.

3

Questo dovrebbe essere un commento, non una risposta.

— Anthony Perot

1

Ho affrontato questo problema e l'ho risolto nel modo seguente:

prima rimuovi ng-app da:
```
<html ng-app>
```
aggiungi il nome di ng-app a myApp:
```
<div ng-app="myApp">
```

aggiungi questa riga di codice prima della funzione:

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

aspetto finale della sceneggiatura:

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

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

— Azhar
fonte

1

Nel mio caso, questo messaggio proviene dall'inserimento di dipendenze dimenticate nel modulo principale

— Thomas Gobert
fonte

1

Questo può accadere se gulp è stato configurato in modo errato per aggiungere il codice dell'app angolare più di una volta. Nel mio caso, questo era in index.js e lo stava aggiungendo come parte della directory dei file js (globbed in gulp) prima e dopo le dichiarazioni del mio controller. Dopo aver aggiunto un'esclusione per index.js da non minimizzare e iniettare la seconda volta, la mia app ha iniziato a funzionare. Un altro suggerimento se una qualsiasi delle soluzioni sopra non risolve il tuo problema.

— rncrtr
fonte

1

Primo: se il nome del modulo non è definito, nel JS non sarà possibile accedere al modulo e collegarvi il controller.

È necessario fornire il nome del modulo al modulo angolare. c'è una differenza nell'usare anche il modulo di definizione 1. angular.module ("firstModule", []) 2. angular.module ("firstModule")

1 - uno è dichiarare il nuovo modulo "firstModule" senza aggiunta di dipendenze nei secondi argomenti. 2 - Questo serve per usare il "firstModule" che è inizializzato da qualche altra parte e stai usando cercando di ottenere il modulo inizializzato e modificarlo.

— Eshaan Kumar
fonte

0

Ho affrontato questo problema ma sono stato in grado di risolverlo rinominando il controller, per favore provalo.

ctrlSub.execSummaryDocuments = function(){};

— Amay Kulkarni
fonte

0

a volte qualcosa di sbagliato nella sintassi del codice all'interno della funzione genera questo errore. Controlla correttamente la tua funzione. Nel mio caso è successo quando stavo cercando di assegnare i campi Json con valori e stavo usando i due punti: per eseguire l'assegnazione invece del segno di uguale = ...

— Amitesh Ranjan
fonte

0

Avevo due controller con lo stesso nome definiti in due diversi file javascript. Irritante che angular non può fornire un messaggio di errore più chiaro che indica un conflitto di spazio dei nomi.

— thebiggestlebowski
fonte

0

Non sono sicuro di questo tutorial ma ho avuto lo stesso problema quando ho dimenticato di includere il file nel processo di minimizzazione di grunt / gulp.

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
      }
    }
  }
});

Spero che aiuti.

— Patrik Bego
fonte

0

Guarda anche l'involucro della tua lettera. Ho passato una buona ora a inseguire questo insetto.

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

mentre io nomino il controller

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

Dovrebbero essere tutti denominati in modo coerente, in questo caso Forgot p wdController con p minuscola.

— Jeson Martajaya
fonte