Angularjs: Помилка: [ng: areq] Аргумент 'HomeController' не є функцією, не визначено


109

Це моя демонстрація використання angularjs для створення сервісного файлу та додавання служби до контролера.

У мене є дві проблеми з демо-версією:

  • Перший - коли я ставлю, <script src="HomeController.js">перш ніж <script src="MyService.js">я отримаю цю помилку,

Помилка: [ng: areq] Аргумент "HomeController" не є функцією, не визначено

  • Інше - коли я ставлю, <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);

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 та route.js). Після того, як я видалив масив з route.js, він виправив одиничні тести.
— Аллан Бог

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
Допоміг великий час. Yeoman прибиває теги сценарію внизу index.html кутового генератора ... дуже легко пропустити. Дякую за це!
— JaeGeeTee

пробіг ту саму пробу. Довелося додати відповідний файл controller.js на мою індексну сторінку разом з іншими контролерами
— ahmednawazbutt

21

Також переконайтесь, що ваші контролери визначені в тегах сценарію до нижньої частини вашого index.html безпосередньо перед закриваючим тегом для тіла.

 <!-- 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, це повинно вирішити вашу проблему.


10

Сталося зі мною кілька разів, коли я пропускаю "," між списком ін'єкцій та функцією

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

}]);

Те саме трапилося і зі мною, коли пропущено "" "між назвою контролера та списком ін'єкцій, тобтоapp.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
— Benji

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

Якщо ВСЕ ELSE не вдається, і ваш локальний біг на стовпці MEAN, як я з глотком ... просто зупиніться і подайте послугу ще раз! Я витягував ретельно перевіряючи все з усіх ваших посад безрезультатно, доки я просто не запустив послугу з глоткою.


Це трапляється і з
— бурхливою подачею

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

Ура!


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>

У головному файлі.


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>

Це виправило цю помилку.


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

Мій файл контролера був кешований як порожній. Очищення кеша виправило це для мене.


0

Я випадково перемістив свій HomeController.js з прямого місця, куди його очікували. Поставте його знову в оригінальне місце розташування.

Після цього мій веб-сайт щомісяця почав автоматично завантажувати сторінки, я навіть не зміг подивитися на помилку. Так я очистив кеш браузера. Це вирішило проблему

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.