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.