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

Utilizzando AngularJS con Scala Play, ricevo questo errore.

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

Sto cercando di creare una tabella composta dai giorni della settimana.

Dai un'occhiata al mio codice. Avevo controllato il nome del controller, ma sembra corretto. Nota: codice utilizzato da questa risposta SO

index.scala.html

@(message: String)

@main("inTime") {

<!doctype html>
<html lang="en" ng-app>
    <head>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    </head>
<div ng-controller="MainCtrl">
    <table border="1">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td ngm-if="$first" rowspan="{{items.length}}">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>
</html> 
}

MainCtrl.js

(function() {
    angular.module('[myApp]', []).controller('MainCtrl', function($scope) {
        $scope.data = {
            Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
        }
    });
}());

Rimuovere il []dal nome ([myApp]) del modulo

angular.module('myApp', [])

E aggiungilo ng-app="myApp"all'html e dovrebbe funzionare.

PRIMO. controlla di aver corretto controllernelle definizioni del percorso, lo stesso dei nomi dei controller che stai definendo

communityMod.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/members', {
        templateUrl: 'modules/community/views/members.html',
        controller: 'CommunityMembersCtrl'
      }).
      otherwise({
        redirectTo: '/members'
      });
  }]);

communityMod.controller('CommunityMembersCtrl', ['$scope',
    function ($scope) {
        $scope.name = 'Hello community';
    }]);

nomi di controller diversi in questo esempio porteranno a errori, ma questo esempio è corretto

SECONDO controlla se hai importato il tuo file javascript:

<script src="modules/community/controllers/CommunityMembersCtrl.js"></script>

Ho ricevuto lo stesso messaggio di errore (nel mio caso: "L'argomento 'languageSelectorCtrl' non è una funzione, non è stato definito").

Dopo un noioso confronto con il codice di Angular seed, ho scoperto di aver precedentemente rimosso un riferimento al modulo controller in app.js. (individualo su https://github.com/angular/angular-seed/blob/master/app/js/app.js )

Quindi ho avuto questo:

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.directives'])

Questo non è riuscito.

E quando ho aggiunto il riferimento mancante:

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.controllers', 'MyApp.directives'])

Il messaggio di errore è scomparso e Angular ha potuto instanciare nuovamente i controller.

Alcune volte questo errore è il risultato di due ng-app direttive specificate nell'html. Nel mio caso per errore avevo specificato ng-appnel mio htmltag e ng-app="myApp"nel bodytag in questo modo:

<html ng-app>
  <body ng-app="myApp"></body>
</html>

Questo mi ha preso sul serio 4 ORE (comprese infinite ricerche su SO) ma finalmente l'ho trovato: per errore (involontariamente) ho aggiunto uno spazio da qualche parte.

Riesci a individuarlo?

angular.module('bwshopper.signup').controller('SignupCtrl ', SignupCtrl);

Quindi ... 4 ore dopo ho visto che dovrebbe essere:

angular.module('bwshopper.signup').controller('SignupCtrl', SignupCtrl);

Quasi impossibile da vedere solo ad occhio nudo.

Ciò sottolinea l'importanza vitale del controllo di revisione (git o altro) e dei test di unità / regressione.

Ho riscontrato lo stesso problema e nel mio caso stava accadendo a causa di questo problema:

Avevo i controller definiti in un modulo separato (chiamato 'myApp.controllers') e iniettati nel modulo principale dell'app (chiamato 'myApp') in questo modo:

angular.module('myApp', ['myApp.controllers'])

Un collega ha inserito un altro modulo controller in un file separato ma con lo stesso identico nome del mio (cioè "myApp.controllers") che ha causato questo errore. Penso perché Angular si è confuso tra quei moduli controller. Tuttavia il messaggio di errore non è stato molto utile per scoprire cosa sta andando storto.

Nel mio caso (con una pagina panoramica e una pagina "aggiungi") ho ottenuto questo con la mia configurazione di routing come di seguito. Stava dando il messaggio per AddCtrl che non poteva essere iniettato ...

$routeProvider.
  when('/', {
    redirectTo: '/overview'
  }).      
  when('/overview', {
    templateUrl: 'partials/overview.html',
    controller: 'OverviewCtrl'
  }).
  when('/add', {
    templateUrl: 'partials/add.html',
    controller: 'AddCtrl'
  }).
  otherwise({
    redirectTo: '/overview'
  });

A causa del when('/'percorso, tutti i miei percorsi sono passati alla panoramica e non è stato possibile far corrispondere il controller nel rendering della pagina / aggiungi percorso. Questo è stato fonte di confusione perché ho visto il modello add.html ma il suo controller non si trovava da nessuna parte.

La rimozione del percorso "/" quando il caso ha risolto il problema per me.

Se ti trovi in ​​un sottomodulo, non dimenticare di dichiarare il modulo nell'app principale. cioè:

<scrip>
angular.module('mainApp', ['subModule1', 'subModule2']);

angular.module('subModule1')
   .controller('MyController', ['$scope', function($scope) {
      $scope.moduleName = 'subModule1';
   }]);
</script>
...
<div ng-app="mainApp">
   <div ng-controller="MyController">
   <span ng-bind="moduleName"></span>
</div>

Se non dichiari subModule1 in mainApp, otterrai un "[ng: areq] Argomento" MyController "non è una funzione, non è stato definito.

Il secondo punto di Уmed era la mia trappola, ma solo per la cronaca, forse sta aiutando qualcuno da qualche parte:

Ho avuto lo stesso problema e appena prima di impazzire ho scoperto che avevo dimenticato di includere lo script del controller.

Poiché la mia app è basata su ASP.Net MVC, ho deciso di mantenermi sano inserendo il seguente frammento nel mio App_Start / BundleConfig.cs

bundles.Add(new ScriptBundle("~/app").Include(
                "~/app/app.js",
                "~/app/controllers/*.js",
                "~/app/services/*.js" ));

e in Layout.cshtml

<head>
...
   @Scripts.Render("~/app")
...
</head>

Ora non dovrò più pensare di includere i file manualmente. Col senno di poi avrei davvero dovuto farlo durante l'impostazione del progetto ...

Ho ricevuto un errore sano con LoginController, che ho usato in index.html principale. Ho trovato due modi per risolvere:

1. impostando $ controllerProvider.allowGlobals (), ho trovato quel commento in Angular change-list "questa opzione potrebbe essere utile per migrare vecchie app, ma per favore non usarla in quelle nuove!" commento originale su Angular

   app.config (['$ controllerProvider', function ($ controllerProvider) {$ controllerProvider.allowGlobals ();}]);

2. autore sbagliato della registrazione del controller

prima

LoginController.$inject = ['$rootScope', '$scope', '$location'];

adesso

app.controller('LoginController', ['$rootScope', '$scope', '$location', LoginController]);

"app" proviene da app.js

var MyApp = {};
var app = angular.module('MyApp ', ['app.services']);
var services = angular.module('app.services', ['ngResource', 'ngCookies', 'ngAnimate', 'ngRoute']);

Ho avuto lo stesso errore con un grosso errore:

appFormid.controller('TreeEditStepControlsCtrl', [$scope, function($scope){

}]);

Vedi ? ho dimenticato il "" intorno al primo $ scope, la sintassi giusta è ovviamente:

appFormid.controller('TreeEditStepControlsCtrl', ['$scope', function($scope){

}]);

Un primo errore che non ho visto immediatamente è stato: " $ scope non è definito ", seguito da " Errore: [ng: areq] L'argomento 'TreeEditStepControlsCtrl' non è una funzione, non è stato definito "

Potrebbe essere semplice come racchiudere la tua risorsa tra "" e tutto ciò che necessita di virgolette all'interno con ""?

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

diventa

<link rel="stylesheet" media="screen" href="@routes.Assets.at('stylesheets/main.css')">

Ciò potrebbe causare alcuni problemi con l'analisi

Per risolvere questo problema, ho dovuto scoprire di aver sbagliato a scrivere il nome del controller nella dichiarazione delle rotte angolari:

.when('/todo',{
            templateUrl: 'partials/todo.html',
            controller: 'TodoCtrl'
        })

Nel mio caso è stato un semplice errore di battitura in index.html:

<script src="assets/javascript/controllers/questionssIndexController.js"></script>

avrebbe dovuto essere

<script src="assets/javascript/controllers/questionsIndexController.js"></script>

senza l'extra snel nome del controller.

Si scopre che è la cache del browser, usando Chrome qui. Basta controllare "Disabilita cache" in Inspect (Element) ha risolto il mio problema.

Perché questo viene visualizzato in Google quando si cerca di trovare una risposta a: "Errore: l'argomento" non è una funzione, non è stato definito ".

È possibile che tu stia cercando di creare lo stesso modulo due volte.

Angular.module è un luogo globale per la creazione, la registrazione e il recupero dei moduli AngularJS.

Il passaggio di un argomento recupera un angular.Module esistente, mentre il passaggio di più di un argomento crea un nuovo angular.Module

Fonte: https://docs.angularjs.org/api/ng/function/angular.module#overview

Esempio:

angular.module('myApp', []) Viene utilizzato per creare un modulo senza iniettare alcuna dipendenza.

angular.module('myApp') (Senza argomento) viene utilizzato per ottenere un modulo esistente.

Sembra che ci siano molte soluzioni funzionanti che suggeriscono che l'errore abbia molte cause reali .

Nel mio caso non avevo dichiarato il titolare del trattamento in app/index.html:

<scipt src="src/controllers/controller-name.controller.js"></script>

Errore andato.