Angularjs: Błąd: [ng: areq] Argument „HomeController” nie jest funkcją, został niezdefiniowany


109

To jest moje demo używające angularjs do tworzenia pliku usługi i dodawania usługi do kontrolera.

Mam dwa problemy z moim demo:

  • Po pierwsze, wstawiam, <script src="HomeController.js">zanim <script src="MyService.js">pojawi się ten błąd,

Błąd: [ng: areq] Argument „HomeController” nie jest funkcją, został niezdefiniowany

  • Drugi jest, gdy wstawiam, <script src="MyService.js">zanim <script src="HomeController.js">otrzymam następujący błąd,

Błąd: [$ injector: unpr] Nieznany dostawca: MyServiceProvider <- MyService

Moje źródło:

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

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

Plik 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
Sprawdź, czy dodano plik * .controller.js w pliku BundleConfig.cs. To naprawia moje.
Syed Mohamed

Odpowiedzi:


210

Spowoduje to utworzenie nowego modułu / aplikacji:

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

Podczas gdy to uzyskuje dostęp do już utworzonego modułu ( zwróć uwagę na pominięcie drugiego argumentu ):

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

Ponieważ używasz pierwszego podejścia w obu skryptach, w zasadzie nadpisujesz moduł, który wcześniej utworzyłeś.

Przy drugim ładowanym skrypcie użyj var myApp = angular.module('myApp');.


To też naprawiło mój błąd. Przez pomyłkę zostawiłem angular.module ('myApp', ['ui.router']) w 2 różnych plikach (app.js i tours.js). Po usunięciu tablicy z route.js naprawiono testy jednostkowe.
Allan Bogh

64

Raz doświadczyłem tego błędu. Mój problem polegał na tym, że nie dodawałem FILE_NAME_WHERE_IS_MY_FUNCTION.js

więc mój plik.html nigdy nie znalazł miejsca, w którym była moja funkcja

Po dodaniu pliku „file.js” rozwiązałem problem

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

1
Pomógł przez długi czas. Yeoman umieszcza tagi skryptu na dole index.html generatora kątów ... bardzo łatwo je przeoczyć. Dzięki za to!
JaeGeeTee

miał ten sam problem. Musiałem dodać odpowiedni plik controller.js na mojej stronie indeksowej wraz z innymi kontrolerami
ahmednawazbutt

21

Upewnij się również, że kontrolery są zdefiniowane w znacznikach script w dolnej części pliku index.html, tuż przed zamykającym tagiem body.

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

pod warunkiem, że wszystko jest napisane „poprawnie” (to samo) na stronach specific.html, specific.js i app.js, powinno to rozwiązać problem.


10

Zdarzyło mi się kilka razy za każdym razem, gdy tęsknię za „” między listą zastrzyków i funkcją

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

}]);

To samo stało się do mnie, gdy brakuje „” między nazwą kontrolera oraz wykazu zastrzyków, czyliapp.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
Benji

5

Również doświadczyłem tego błędu, ale w moim przypadku był to skutek konwencji nazewnictwa kontrolerów. Oświadczyłem controller: "QuestionController"się .statejednak w definicji kontrolera oświadczyłem to podoba

yiiExamApp.controller('questionController' ...

ale tak powinno być

yiiExamApp.controller('QuestionController' ...

Mam nadzieję, że pomoże to ludziom borykającym się z tym błędem z powodu tego głupiego błędu, który zmarnowałem 4 godziny na jego identyfikację.


5

Mam ten sam błąd. Zdefiniowałem skrypt java w ten sposób

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

potem zmieniłem na to

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

Po tym mój problem został rozwiązany.


4

Napotkałem również ten sam błąd i rozwiązaniem dla mnie było włączenie mojego modułu podrzędnego do głównej tablicy modułów.

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

4

Jeśli ALL ELSE zawiedzie i biegasz lokalnie na stosie MEAN jak ja z łykiem ... po prostu zatrzymaj się i serwuj ponownie! Skrupulatnie sprawdzałem wszystko, od wszystkich twoich postów, bezskutecznie, dopóki po prostu nie powtórzyłem podania łyka.


Dzieje się tak również przy chrząknięciu
acromm

2

Miałem podobny problem. Poprawka polegała na zapewnieniu, że kontrolery kontrolne są nie tylko zdefiniowane w znacznikach skryptów u dołu pliku index.html tuż przed tagiem zamykającym dla body, ale także sprawdzenie, czy są one w kolejności zgodnej ze strukturą folderu.

<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

Z tym problemem spotkałem się również w swoim projekcie. W końcu zadziałało po tym, jak wstawiłem tag my-controller.jsdo mojego karma.conf.jspliku <script>.

Mam nadzieję, że to pomoże. Istnieje wiele przyczyn, które mogą prowadzić do tego problemu.


1

Mam też ten błąd.

Musiałem dodać mój nowy kontroler do informacji o routingu. \ src \ js \ app.js

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

Dodałem kontroler, żeby wyglądał

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

Twoje zdrowie!


1

Oczywiście poprzednie posty są przydatne, ale żadne z powyższych nie są pomocne w moim przypadku. Przyczyną była zła kolejność ładowania skryptów . Na przykład w moim przypadku kontroler editCtrl.js zależy od (używa) ui-bootstrap-tpls.js, więc powinien zostać załadowany jako pierwszy. To spowodowało błąd:

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

To prawda, działa:

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

Aby więc naprawić błąd, musisz najpierw zadeklarować wszystkie skrypty bez zależności , a następnie skrypty zależne od wcześniej zadeklarowanych.


1

Spróbuj tego

    <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

W moim przypadku brakowało mi nazwy aplikacji Angular w pliku html. Na przykład, dołączyłem ten plik jako początek kodu mojej aplikacji. Założyłem, że jest uruchomiony, ale tak nie było.

app.module.js

(function () {
    'use strict';

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

})();

Jednak kiedy zadeklarowałem aplikację w html, miałem to:

index.html

<html lang="en" ng-app>

Aby jednak odwołać się do aplikacji Angular za pomocą nazwy, której użyłem, musiałem użyć:

index.html (naprawiony)

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

1

Otrzymałem błąd, ponieważ dodałem skrypt kontrolera przed skryptem, w którym zdefiniowałem odpowiedni moduł w aplikacji. Najpierw dodaj skrypt

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

Następnie tylko dodaj

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

W głównym pliku.


1

Błąd: ng: areq Zły argument dotarł do mnie kilka razy, ponieważ zbyt wcześnie zamykam nawias kwadratowy. W poniższym złym przykładzie jest ona zamykana niepoprawnie po '$ state', podczas gdy w rzeczywistości powinna znajdować się przed ostatnim nawiasem.

ZŁY:

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

});

DOBRY:

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

}]);

0

Tak. Jak wielu już wcześniej zauważyło, dodałem ścieżkę src do wszystkich plików kontrolera w pliku 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>

To naprawiło ten błąd.


0

Miałem ten sam problem, ale zapomniałem włączyć plik do procesu minimalizacji grunt / gulp.

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

Mam nadzieję, że to pomoże.


0

W mojej sytuacji ten błąd pojawił się, gdy nie zadeklarowałem funkcji w argumencie tablicy.

Ten z błędem :

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

Naprawiono:

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

}]);

0

Sprawdź także błędy w pisowni .

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

Sprawdź, czy Twoja strona HTML zawiera:

  1. angular.min scenariusz
  2. app.js
  3. strona JavaScript kontrolera

Kolejność dołączania plików jest ważna. To było moje rozwiązanie tego problemu.

Mam nadzieję że to pomoże.


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

Dla mnie to samo, przecinek ',', zanim funkcja pomogła mi w naprawieniu problemu - Error: ng: areq Bad Argument


0

Mój plik kontrolera został zapisany w pamięci podręcznej jako pusty. Wyczyszczenie pamięci podręcznej naprawiło to za mnie.


0

Przypadkowo przeniosłem HomeController.js bezpośrednio z miejsca, w którym był oczekiwany. Umieszczenie go ponownie w pierwotnym miejscu.

Po tym czasie moja witryna zaczęła automatycznie ładować strony co sekundę, nie byłem nawet w stanie spojrzeć na błąd. Więc wyczyściłem pamięć podręczną przeglądarki. To rozwiązało problem

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.