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

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');.


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>

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.


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

}]);

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.


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.


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']);

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.


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>

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.


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!


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.


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>


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

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.


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

}]);

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>

Dies hat diesen Fehler behoben.


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.


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(){

}]);

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>

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.


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


0

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


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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.