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.