Angularjs: Ошибка: [ng: areq] Аргумент HomeController не является функцией, получено значение undefined

109

Это моя демонстрация с использованием angularjs для создания служебного файла и добавления службы в контроллер.

У меня две проблемы с моей демонстрацией:

  • Первый - когда я ставлю <script src="HomeController.js">перед тем, <script src="MyService.js">как получить эту ошибку,

Ошибка: [ng: areq] Аргумент HomeController не является функцией, получено значение undefined

  • Другой - когда я ставлю <script src="MyService.js">до того, <script src="HomeController.js">как получаю следующую ошибку:

Ошибка: [$ injector: unpr] Неизвестный поставщик: MyServiceProvider <- MyService

Мой источник:

Файл 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>

Файл 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);

Файл 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
источник
1
Убедитесь, что ваш * .controller.js добавлен в файл BundleConfig.cs. Это исправляет мою.
Сайед Мохамед

Ответы:

210

Это создает новый модуль / приложение:

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

Пока это обращается к уже созданному модулю ( обратите внимание на пропуск второго аргумента ):

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

Поскольку вы используете первый подход в обоих сценариях, вы в основном переопределяете ранее созданный модуль.

При загрузке второго скрипта используйте var myApp = angular.module('myApp');.

бмлеит
источник
Это тоже исправило мою ошибку. Я по ошибке оставил angular.module ('myApp', ['ui.router']) в двух разных файлах (app.js и routes.js). Как только я удалил массив из routes.js, он исправил модульные тесты.
Allan Bogh
64

Однажды я столкнулся с этой ошибкой. Моя проблема заключалась в том, что я не добавлял FILE_NAME_WHERE_IS_MY_FUNCTION.js

поэтому мой file.html никогда не находил, где была моя функция

Как только я добавил "file.js", проблема была решена.

<html ng-app='myApp'>
    <body ng-controller='TextController'>
    ....
    ....
    ....
    <script src="../file.js"></script>
    </body>
</html>
Хорхе Касариего
источник
1
Очень помогли. Йомен убирает теги скрипта в конец index.html генератора angular ... очень легко пропустить. Спасибо за это!
JaeGeeTee
прогнал ту же проблему. Пришлось добавить соответствующий файл controller.js на мою страницу индекса вместе с другими контроллерами
ahmednawazbutt
21

Также убедитесь, что ваши контроллеры определены в тегах сценария в нижней части вашего index.html непосредственно перед закрывающим тегом для 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>

при условии, что все написано «правильно» (то же самое) на страницах specific.html, specific.js и app.js, это должно решить вашу проблему.

AA11oAKas
источник
10

Со мной случалось несколько раз, когда я пропускал "," между списком инъекций и функцией

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

}]);
jprism
источник
То же самое случилось со мной, когда я пропустил «,» между именем контроллера и списком инъекций, то естьapp.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
Бенджи
5

Я также столкнулся с этой ошибкой, но в моем случае это было из-за соглашения об именах контроллеров. Я заявил controller: "QuestionController"в .stateно в определении контроллера я заявил , что хотел

yiiExamApp.controller('questionController' ...

но это должно быть

yiiExamApp.controller('QuestionController' ...

Надеюсь, это поможет людям, столкнувшимся с этой ошибкой из-за этой глупой ошибки, которую я потратил 4 часа на ее выявление.

Кулдип Данги
источник
5

У меня такая же ошибка. Я определил java-скрипт следующим образом

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

затем я перешел на это

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

После этого моя проблема решена.

Дамит Ганегода
источник
4

Я также столкнулся с той же ошибкой, и исправление для меня заключалось в том, чтобы включить мой дочерний модуль в основной массив модулей.

var myApp = angular.module('myApp', ['ngRoute', 'childModuleName']);
Джеймс
источник
4

Если ALL ELSE терпит неудачу и вы работаете локально в стеке MEAN, как я, с глотком ... просто остановитесь и снова подайте! Я вытащил свой слух, тщательно проверяя все из всех ваших сообщений, но безрезультатно, пока я просто не перезапустил gulp serve.

sigmapi13
источник
То же самое
2

У меня была аналогичная проблема. Исправление было гарантировать, что ваши ctrollers не только определены в тегах сценария в нижней части вашего index.html непосредственно перед закрывающим тегом для body, но ТАКЖЕ подтверждают, что они находятся в порядке структуры вашей папки.

<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

Я тоже столкнулся с этой проблемой в своем проекте. В конечном итоге это сработало после того, как я вставил my-controller.jsв свой karma.conf.jsфайл с <script>тегом.

Надеюсь, это поможет. Причин, которые могут привести к этой проблеме, довольно много.

сосострис
источник
1

Я тоже получил эту ошибку.

Мне пришлось добавить мой новый контроллер в информацию о маршрутизации. \ src \ js \ app.js

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

Я добавил свой контроллер, чтобы он выглядел как 

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

Ура!

Zaini
источник
1

Очевидно, что предыдущие сообщения полезны, но в моем случае все вышеперечисленное не помогает. Причина в неправильной последовательности загрузки скриптов . Например, в моем случае контроллер editCtrl.js зависит от (использует) ui-bootstrap-tpls.js, поэтому он должен быть загружен первым. Это вызвало ошибку:

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

Это правильно, работает:

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

Итак, чтобы исправить ошибку, вам нужно сначала объявить все скрипты без зависимостей , а затем скрипты, которые зависят от ранее объявленных.

Сергей Калган
источник
1

Попробуй это

    <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

В моем случае мне не хватало имени приложения Angular в html файле. Например, я включил этот файл в начало кода моего приложения. Я предполагал, что это запущено, но это не так.

app.module.js

(function () {
    'use strict';

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

})();

Однако, когда я объявил приложение в html, у меня было следующее:

index.html

<html lang="en" ng-app>

Но для ссылки на приложение Angular по имени, которое я использовал, мне пришлось использовать:

index.html (исправлено)

<html lang="en" ng-app="app">
Кейси Пламмер
источник
1

Я получал сообщение об ошибке, потому что я добавил сценарий контроллера перед сценарием, в котором я определил соответствующий модуль в приложении. Сначала добавьте скрипт

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

Тогда только добавьте

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

В основном файле.

user2470087
источник
1

Ошибка: ng: areq Плохой аргумент получал меня пару раз, потому что я слишком рано закрываю квадратную скобку. В приведенном ниже примере BAD он неправильно закрывается после '$ state', хотя на самом деле он должен стоять перед последней круглой скобкой.

ПЛОХОЙ:

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

});

ХОРОШО:

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

}]);
складной
источник
0

Да. Как многие ранее отмечали, я добавил путь src ко всем файлам контроллера в 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>
Развернуть фрагмент

Это исправило эту ошибку.

неясный79
источник
0

У меня была такая же проблема, но я забыл включить файл в процесс минимизации grunt / gulp. 

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

Надеюсь, это поможет.

Патрик Бего
источник
0

В моей ситуации эта ошибка появилась, когда я не объявил функцию в аргументе массива.

Тот с ошибкой :

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

Фиксированный:

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

}]);
Кунок
источник
0

Также проверьте орфографические ошибки .

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

Убедитесь, что ваша HTML-страница включает:

  1. angular.min сценарий
  2. app.js
  3. страница контроллера JavaScript

Порядок включения файлов важен. Это было моим решением этой проблемы.

Надеюсь это поможет.

Иегудит Гринвальд
источник
0 
sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){

То же самое для меня, запятая ',' перед функцией помогла мне решить проблему - Ошибка: ng: areq Bad Argument

почини это
источник
0

Мой файл контроллера был кэширован как пустой. Очистка кеша исправила это для меня.

Priyank
источник
0

Я случайно переместил свой HomeController.js из папки , где это ожидалось. Ставим его снова на исходное место.

После этого мой сайт начал автоматически загружать страницы каждую секунду, я даже не мог увидеть ошибку. Итак, я очистил кеш браузера. Это решило проблему

Чарли
источник