Angularjs: Errore: [ng: areq] L'argomento "HomeController" non è una funzione, non è stato definito


109

Questa è la mia demo che utilizza angularjs, per creare un file di servizio e aggiungere servizio a un controller.

Ho due problemi con la mia demo:

  • Uno è quando metto <script src="HomeController.js">prima di <script src="MyService.js">ottenere questo errore,

Errore: [ng: areq] L'argomento "HomeController" non è una funzione, non è stato definito

  • L'altro è quando metto <script src="MyService.js">prima di <script src="HomeController.js">ottenere il seguente errore,

Errore: [$ injector: unpr] Provider sconosciuto: MyServiceProvider <- MyService

La mia fonte:

File Index.html:

<!DOCTYPE html>
<html >
    <head lang="en">…</head>
    <body ng-app="myApp">
        
        <div ng-controller="HomeController">
            <div ng-repeat="item in hello">{{item.id + item.name}}</div>
        </div>

        <script src="Scripts/angular.js"></script>
        <script src="Scripts/angular-route.js"></script>

        <!-- App libs -->
        <script src="app/app.js"></script>    
        <script src="app/services/MyService.js"></script>
        <script src="app/controllers/HomeController.js"></script>
    </body>
</html>

File HomeController.js:

(function(angular){
    'use strict';

    var myApp = angular.module('myApp',[]);

    myApp.controller('HomeController',function($scope,MyService){    
        $scope.hello=[];
        $scope.hello = MyService.getHello();
    });
})(window.angular);

File MyService.js:

(function(angular){
    'use strict';

    var myApp = angular.module('myApp',[]);

    myApp.service('MyService', function () {
        var hello =[  {id:1,name:'cuong'},
            {id:2,name:'nguyen'}];
        this.getHello = function(){
            return hello;
        };
    });

})(window.angular);

1
Conferma di aver aggiunto che il tuo * .controller.js è aggiunto al file BundleConfig.cs. Questo risolve il mio.
Syed Mohamed

Risposte:


210

Questo crea un nuovo modulo / app:

var myApp = angular.module('myApp',[]);

Mentre questo accede a un modulo già creato ( notare l'omissione del secondo argomento ):

var myApp = angular.module('myApp');

Dato che usi il primo approccio su entrambi gli script, stai sostanzialmente sovrascrivendo il modulo che hai creato in precedenza.

Sul secondo script che viene caricato, utilizzare var myApp = angular.module('myApp');.


Questo ha risolto anche il mio errore. Ho erroneamente lasciato angular.module ('myApp', ['ui.router']) in 2 file diversi (app.js e routes.js). Una volta rimosso l'array da routes.js, ha corretto gli unit test.
Allan Bogh

64

Ho riscontrato questo errore una volta. Il mio problema era che non stavo aggiungendo FILE_NAME_WHERE_IS_MY_FUNCTION.js

quindi il mio file.html non ha mai trovato dove fosse la mia funzione

Una volta aggiunto "file.js", ho risolto il problema

<html ng-app='myApp'>
    <body ng-controller='TextController'>
    ....
    ....
    ....
    <script src="../file.js"></script>
    </body>
</html>

1
Ha aiutato alla grande. Yeoman inserisce i tag dello script nella parte inferiore di index.html del generatore angolare ... molto facile da perdere. Grazie per questo!
JaeGeeTee

ha eseguito lo stesso problema. Ho dovuto aggiungere il file controller.js corrispondente nella mia pagina indice insieme ad altri controller
ahmednawazbutt

21

Assicurati inoltre che i tuoi controller siano definiti all'interno dei tag script verso la parte inferiore del tuo index.html appena prima del tag di chiusura per il corpo.

 <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/Administration.js"></script>
    <script src="scripts/controllers/Leaderboard.js"></script>
    <script src="scripts/controllers/Login.js"></script>
    <script src="scripts/controllers/registration.js"></script>

a condizione che tutto sia scritto "correttamente" (lo stesso) nelle pagine specific.html, specific.js e app.js, questo dovrebbe risolvere il problema.


10

Mi è successo poche volte ogni volta che mi manca "," tra l'elenco delle iniezioni e la funzione

app.controller('commonCtrl', ['$scope', '$filter',function($scope,$filter) {

}]);

La stessa cosa è successa a me quando mancava il "," tra il nome del controller e l'elenco delle iniezioni, ovveroapp.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
Benji

5

Ho anche riscontrato questo errore, ma nel mio caso è stato a causa della convenzione di denominazione del controller. Ho dichiarato controller: "QuestionController"in .statema nella definizione del controller l'ho dichiarato come

yiiExamApp.controller('questionController' ...

ma dovrebbe essere

yiiExamApp.controller('QuestionController' ...

spero che aiuti le persone ad affrontare questo errore a causa di questo stupido errore che ho sprecato 4 ore per identificarlo.


5

Ho ricevuto lo stesso errore. Ho definito java script in questo modo

<script src="controllers/home.js" />

poi sono passato a questo

<script src="controllers/home.js"></script>

Dopo questo il mio problema è stato risolto.


4

Ho anche riscontrato questo stesso errore e la soluzione per me è stata includere il mio modulo figlio nell'array del modulo principale.

var myApp = angular.module('myApp', ['ngRoute', 'childModuleName']);

4

Se TUTTO IL RESTO fallisce e stai correndo localmente sullo stack MEAN come me con gulp ... fermati e servi di nuovo! Stavo tirando fuori il mio udito controllando meticolosamente tutto da tutti i tuoi post senza alcun risultato finché non ho semplicemente ripetuto il servizio gulp.


Questo accade anche con il servizio grugnito
acromm

2

Ho avuto un problema simile. La correzione è stata quella di garantire che i tuoi ctroller non solo fossero definiti all'interno dei tag di script nella parte inferiore del tuo index.html appena prima del tag di chiusura per il corpo, ma anche di convalidare che siano in ordine di come è strutturata la tua cartella.

<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/Administration.js"></script>
<script src="scripts/controllers/Leaderboard.js"></script>
<script src="scripts/controllers/Login.js"></script>
<script src="scripts/controllers/registration.js"></script>

2

Ho riscontrato questo problema anche nel mio progetto. Alla fine ha funzionato dopo aver inserito il my-controller.jsnel mio karma.conf.jsfile, con il <script>tag.

Spero che questo ti aiuti. Ci sono molte ragioni che possono portare a questo problema.


1

Ho anche ricevuto questo errore.

Ho dovuto aggiungere il mio nuovo controller alle informazioni di routing. \ Src \ js \ app.js

angular.module('Lillan', [
  'ngRoute',
  'mobile-angular-ui',
  'Lillan.controllers.Main'
])

Ho aggiunto il mio controller per farlo sembrare

angular.module('Lillan', [
  'ngRoute',
  'mobile-angular-ui',
  'Lillan.controllers.Main',
  'Lillan.controllers.Growth'
])

Saluti!


1

Ovviamente i post precedenti sono utili, ma nessuno dei precedenti non è utile nel mio caso. Il motivo era nella sequenza sbagliata di caricamento degli script . Ad esempio, nel mio caso, il controller editCtrl.js dipende da (utilizza) ui-bootstrap-tpls.js, quindi dovrebbe essere caricato per primo. Ciò ha causato un errore:

<script src="scripts/app/station/editCtrl.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>

Questo è giusto, funziona:

<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="scripts/app/station/editCtrl.js"></script>

Quindi, per correggere l'errore è necessario prima dichiarare tutti gli script senza dipendenze , quindi gli script che dipendono da quelli precedentemente dichiarati.


1

Prova questo

    <title>My First Angular App</title>

</head>

<body>

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <h3>Adding Simple Controller<h3>        

    <div ng-controller="SimpleController">
        Name:

        <br/>

        <input type = "text" data-ng-model = "name"/> {{name}}

        <br/>

        <ul>    
            <li data-ng-repeat = "cust in customers | filter:name | orderBy:'city'">
                {{cust.name}} - {{cust.city}}
            </li>
        </ul>

    </div>


    <script>

        var angularApp = angular.module('angularApp',[]);

        angularApp.controller('SimpleController', [ '$scope', SimpleController]);

        function SimpleController($scope)
        {

            $scope.customers = [
                                    {name:'Nikhil Mahirrao', city:'Pune'},
                                    {name:'Kapil Mahire', city:'Pune'},
                                    {name:'Narendra Mahirrao', city:'Phophare'},
                                    {name:'Mithun More', city:'Shahada'}

                                ]; 
        }

    </script>

</body>


1

Nel mio caso, mi mancava il nome dell'applicazione Angular nel file html. Ad esempio, avevo incluso questo file come inizio del codice della mia applicazione. Avevo pensato che fosse in esecuzione, ma non lo era.

app.module.js

(function () {
    'use strict';

    angular
        .module('app', [
        // Other dependencies here...
        ])
    ;

})();

Tuttavia, quando ho dichiarato l'app in html avevo questo:

index.html

<html lang="en" ng-app>

Ma per fare riferimento all'applicazione Angular con il nome che ho usato, ho dovuto usare:

index.html (fisso)

<html lang="en" ng-app="app">

1

Ho ricevuto l'errore perché avevo aggiunto lo script del controller prima dello script in cui avevo definito il modulo corrispondente nell'app. Per prima cosa aggiungi lo script

<script src = "(path of module.js file)"></script>

Quindi aggiungi solo

<script src = "(path of controller.js file)"></script>

Nel file principale.


1

Errore: ng: areq Bad Argument mi ha ricevuto un paio di volte perché ho chiuso la parentesi quadra troppo presto. Nell'esempio BAD riportato di seguito viene chiuso in modo errato dopo "$ state" quando in realtà dovrebbe precedere le parentesi finali.

MALE:

sampleApp.controller('sampleApp', ['$scope', '$state'], function($scope, $state){

});

BENE:

sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){

}]);

0

Sì. Come molti hanno già fatto notare, ho aggiunto il percorso src a tutti i file del controller in index.html.

<script src="controllers/home.js"></script>
<script src="controllers/detail.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/navbar.js"></script>
<script src="controllers/signup.js"></script>

Questo ha risolto l'errore.


0

Ho avuto lo stesso problema, ma 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.


0

Nella mia situazione questo errore è apparso quando non ho dichiarato la funzione all'interno di un argomento di matrice.

Quello con errore :

taskAppControllers.controller('MainMenuCtrl', []);

Quello fisso:

taskAppControllers.controller('MainMenuCtrl', [function(){

}]);

0

Controlla anche gli errori di ortografia .

var MyApp = angular.module('AppName',[]);
MyApp.controller('WRONG_SPELLING_MyCtrl', ['$scope', MyControllerCtrl])
function MyControllerCtrl($scope) {
   var vm = $scope;
   vm.Apple = 'Android';
}

<div ng-controller="ACTUAL_SPELLING_MyCtrl">
    {{Apple}}
</div>

0

Controlla se la tua pagina HTML include:

  1. angular.min copione
  2. app.js
  3. pagina JavaScript del controller

L'ordine in cui i file sono inclusi è importante. Era la mia soluzione a questo problema.

Spero che questo ti aiuti.


0
sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){

Stessa cosa per me, virgola ',' prima che la funzione mi abbia aiutato a risolvere il problema - Errore: ng: areq Bad Argument


0

Il file del controller è stato memorizzato nella cache come vuoto. La cancellazione della cache l'ha risolto per me.


0

Ho spostato accidentalmente il mio HomeController.js direttamente da dove era previsto. Rimettendolo nella posizione originale.

Dopo che il mio sito Web ha iniziato a caricare le pagine automaticamente ogni secondo, non sono stato nemmeno in grado di guardare l'errore. Quindi ho cancellato la cache del browser. Ha risolto il problema

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.