Angularjs: Fehler: [ng: areq] Argument 'HomeController' ist keine Funktion, wurde undefiniert

109

Dies ist meine Demo mit anglejs, um eine Servicedatei zu erstellen und einem Controller einen Service hinzuzufügen.

Ich habe zwei Probleme mit meiner Demo:

  • Eine ist, wenn ich setze, <script src="HomeController.js">bevor <script src="MyService.js">ich diesen Fehler erhalte,

Fehler: [ng: areq] Argument 'HomeController' ist keine Funktion, wurde undefiniert

  • Das andere ist, wenn ich setze, <script src="MyService.js">bevor <script src="HomeController.js">ich den folgenden Fehler erhalte:

Fehler: [$ injor: unpr] Unbekannter Anbieter: MyServiceProvider <- MyService

Meine Quelle:

Datei 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>

Datei 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);

Datei 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);
javascript angularjs angularjs-service Cuong.Ho
quelle
1
Bestätigen Sie, ob Sie Ihre * .controller.js hinzugefügt haben, die in der Datei BundleConfig.cs hinzugefügt wurde. Dies behebt meine.
Syed Mohamed

Antworten:

210

Dadurch wird ein neues Modul / eine neue App erstellt:

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

Während dies auf ein bereits erstelltes Modul zugreift ( beachten Sie das Weglassen des zweiten Arguments ):

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

Da Sie für beide Skripte den ersten Ansatz verwenden, überschreiben Sie grundsätzlich das zuvor erstellte Modul.

Verwenden Sie beim zweiten geladenen Skript var myApp = angular.module('myApp');.

bmleite
quelle
Dies hat auch meinen Fehler behoben. Ich habe versehentlich angle.module ('myApp', ['ui.router']) in 2 verschiedenen Dateien (app.js und route.js) belassen. Nachdem ich das Array aus route.js entfernt hatte, wurden die Komponententests behoben.
Allan Bogh
64

Ich habe diesen Fehler einmal erlebt. Mein Problem war, dass ich die Datei FILE_NAME_WHERE_IS_MY_FUNCTION.js nicht hinzugefügt habe

Meine Datei.html hat also nie gefunden, wo meine Funktion war

Nachdem ich die Datei "file.js" hinzugefügt habe, habe ich das Problem behoben

<html ng-app='myApp'>
    <body ng-controller='TextController'>
    ....
    ....
    ....
    <script src="../file.js"></script>
    </body>
</html>
Jorge Casariego
quelle
1
Hat sehr geholfen. Yeoman steckt die Skript-Tags unten in der index.html des Winkelgenerators ab ... sehr leicht zu übersehen. Danke dafür!
JaeGeeTee
lief das gleiche prob. Musste die entsprechende controller.js Datei in meiner Indexseite zusammen mit anderen Controllern
hinzufügen
21

Stellen Sie außerdem sicher, dass Ihre Controller in Skript-Tags am Ende Ihrer index.html unmittelbar vor dem schließenden Tag für body definiert sind.

 <!-- 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>

vorausgesetzt, auf Ihren Seiten "large.html", "actual.js" und "app.js" ist alles "richtig" (gleich) geschrieben, sollte dies Ihr Problem beheben.

AA11oAKas
quelle
10

Ist mir ein paar Mal passiert, wenn ich "" zwischen der Liste der Injektionen und der Funktion vermisse

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

}]);
jprism
quelle
Das gleiche passierte mir, als das "," zwischen dem Controller-Namen und der Liste der Injektionen fehlte, dhapp.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
Benji
5

Ich habe diesen Fehler auch festgestellt, aber in meinem Fall lag dies an der Namenskonvention des Controllers. Ich erklärte controller: "QuestionController"in .stateaber in Controller - Definition erklärte ich mag es

yiiExamApp.controller('questionController' ...

aber es sollte sein

yiiExamApp.controller('QuestionController' ...

Ich hoffe, das hilft Menschen, die wegen dieses dummen Fehlers mit diesem Fehler konfrontiert sind. Ich habe 4 Stunden damit verbracht, ihn zu identifizieren.

Kuldeep Dangi
quelle
5

Ich habe den gleichen Fehler bekommen. Ich habe Java-Skript so definiert

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

dann habe ich das geändert

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

Danach ist mein Problem gelöst.

Damith Ganegoda
quelle
4

Ich bin auch auf denselben Fehler gestoßen, und die Korrektur für mich bestand darin, mein untergeordnetes Modul in das Hauptmodul-Array aufzunehmen.

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

Wenn ALL ELSE fehlschlägt und Sie lokal auf dem MEAN-Stack laufen wie ich mit Schluck ... hören Sie einfach auf und servieren Sie erneut! Ich habe mein Gehör herausgezogen und alles von all deinen Posts akribisch überprüft, ohne Erfolg, bis ich einfach den Schluckaufschlag erneut ausgeführt habe.

sigmapi13
quelle
Dies passiert auch mit Grunzen Aufschlag
Acromm
2

Ich hatte ein ähnliches Problem. Das Update bestand darin, sicherzustellen, dass Ihre Controller nicht nur in Skript-Tags am unteren Rand Ihrer index.html unmittelbar vor dem schließenden Tag für body definiert sind, sondern AUCH zu überprüfen, ob sie in der Reihenfolge der Struktur Ihres Ordners angeordnet sind.

<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>
Maurizio L.
quelle
2

Dieses Problem ist auch in meinem Projekt aufgetreten. Es funktionierte schließlich, nachdem ich das mit dem Tag my-controller.jsin meine karma.conf.jsDatei eingefügt hatte <script>.

Hoffe das wird helfen. Es gibt viele Gründe, die zu diesem Problem führen können.

Sosostris
quelle
1

Ich habe auch diesen Fehler bekommen.

Ich musste meinen neuen Controller zu den Routing-Informationen hinzufügen. \ src \ js \ app.js.

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

Ich habe meinen Controller hinzugefügt, damit er so aussieht 

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

Prost!

Zaini
quelle
1

Natürlich sind frühere Beiträge nützlich, aber in meinem Fall sind die oben genannten nicht hilfreich. Der Grund war die falsche Reihenfolge beim Laden von Skripten . In meinem Fall hängt der Controller editCtrl.js beispielsweise von ui-bootstrap-tpls.js ab (verwendet ihn), daher sollte er zuerst geladen werden. Dies verursachte einen Fehler:

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

Das ist richtig, funktioniert:

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

Um den Fehler zu beheben, müssen Sie zuerst alle Skripte ohne Abhängigkeiten deklarieren und dann Skripte, die von zuvor deklarierten Skripten abhängen.

Sergey Kulgan
quelle
1

Versuche dies

    <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>

Nikhil Mahirrao
quelle
1

In meinem Fall fehlte mir der Name der Angular-Anwendung in der HTML-Datei. Zum Beispiel hatte ich diese Datei als Start meines Anwendungscodes eingefügt. Ich hatte angenommen, dass es ausgeführt wurde, aber es war nicht so.

app.module.js

(function () {
    'use strict';

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

})();

Als ich die App jedoch im HTML-Code deklarierte, hatte ich Folgendes:

index.html

<html lang="en" ng-app>

Um die Angular-Anwendung mit dem von mir verwendeten Namen zu referenzieren, musste ich Folgendes verwenden:

index.html (behoben)

<html lang="en" ng-app="app">
Casey Plummer
quelle
1

Ich habe den Fehler erhalten, weil ich das Controller-Skript vor dem Skript hinzugefügt hatte, in dem ich das entsprechende Modul in der App definiert hatte. Fügen Sie zuerst das Skript hinzu

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

Dann nur noch hinzufügen

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

In der Hauptdatei.

user2470087
quelle
1

Fehler: ng: areq Bad Argument hat mich ein paar Mal erwischt, weil ich die eckige Klammer zu früh schließe. Im folgenden BAD-Beispiel wird es nach '$ state' falsch geschlossen, wenn es tatsächlich vor der endgültigen Parenthese stehen soll.

SCHLECHT:

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

});

GUT:

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

}]);
Klappsalat
quelle
0

Ja. Wie viele bereits erwähnt haben, habe ich allen Controller-Dateien in der index.html den Pfad src hinzugefügt.

<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>
Erweitern Sie das Snippet

Dies hat diesen Fehler behoben.

obskur79
quelle
0

Ich hatte das gleiche Problem, aber ich habe vergessen, die Datei in den Grunz- / Schluck-Minimierungsprozess einzubeziehen. 

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

Hoffentlich hilft das.

Patrik Bego
quelle
0

In meiner Situation trat dieser Fehler auf, als ich keine Funktion innerhalb eines Array-Arguments deklarierte.

Der mit dem Fehler :

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

Der feste:

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

}]);
Kunok
quelle
0

Überprüfen Sie auch auf Rechtschreibfehler .

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>
Mahesh
quelle
0

Überprüfen Sie, ob Ihre HTML-Seite Folgendes enthält:

  1. angular.min Skript
  2. app.js
  3. Controller JavaScript-Seite

Die Reihenfolge, in der die Dateien enthalten sind, ist wichtig. Es war meine Lösung für dieses Problem.

Hoffe das hilft.

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

Dasselbe für mich, Komma ',' vor der Funktion, half mir bei der Behebung des Problems - Fehler: ng: areq Schlechtes Argument

repariere es
quelle
0

Meine Controller-Datei wurde als leer zwischengespeichert. Durch das Löschen des Caches wurde das Problem für mich behoben.

Priyank
quelle
0

Ich habe versehentlich meine HomeController.js direkt aus dem Bereich verschoben , in dem dies erwartet wurde. Setzen Sie es wieder an den ursprünglichen Ort.

Nachdem meine Website begann, Seiten jede Sekunde automatisch zu laden, konnte ich den Fehler nicht einmal mehr sehen. Also habe ich den Browser-Cache geleert. Es hat das Problem gelöst

Charlie
quelle