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);
javascript angularjs angularjs-service Cuong.Ho
źródło
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');.

bmleite
źródło
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>
Jorge Casariego
źródło
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.

AA11oAKas
źródło
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) {

}]);
jprism
źródło
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ę.

Kuldeep Dangi
źródło
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.

Damith Ganegoda
źródło
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']);
James
źródło
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.

sigmapi13
źródło
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>
Maurizio L.
źródło
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.

sosostris
źródło
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!

zaini
źródło
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.

Sergey Kulgan
źródło
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>

Nikhil Mahirrao
źródło
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">
Casey Plummer
źródło
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.

user2470087
źródło
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){

}]);
składana lettuce
źródło
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>
Rozwiń fragment

To naprawiło ten błąd.

niejasne79
źródło
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.

Patrik Bego
źródło
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(){

}]);
Kunok
źródło
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>
Mahesh
źródło
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.

Yehudit Grinwald
źródło
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

napraw to
źródło
0

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

Priyank
źródło
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

Charlie
źródło