Angularjs: Error: [ng:areq] аргумент 'HomeController' не является функцией, получил неопределенный
это моя демонстрация с использованием angularjs, для создания файла службы и добавления службы к контроллеру.
у меня есть две проблемы с моим демо:
- когда я ставлю
<script src="HomeController.js">до<script src="MyService.js">Я получаю эту ошибку,
ошибка: [ng:areq] аргумент 'HomeController' не является функцией, получил неопределенный
- другой, когда я ставлю
<script src="MyService.js">до<script src="HomeController.js">Я получаю следующее ошибка,
ошибка: [$injector:unpr] неизвестный поставщик: MyServiceProvider
источник:
File 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>
File 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);
File 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);
24 ответа:
Это создает новый модуль/приложение:
var myApp = angular.module('myApp',[]);В то время как это обращается к уже созданному модулю (обратите внимание на пропуск второго аргумента):
var myApp = angular.module('myApp');поскольку вы используете первый подход в обоих сценариях, вы в основном переопределяете ранее созданный модуль.
при загрузке второго скрипта используйте
var myApp = angular.module('myApp');.
Я испытал эту ошибку один раз. Моя проблема была в том, что я не добавить FILE_NAME_WHERE_IS_MY_FUNCTION.js
мой .HTML-код никогда не находил, где моя функция была
Как только я добавлю "файл.js " я решил проблему
<html ng-app='myApp'> <body ng-controller='TextController'> .... .... .... <script src="../file.js"></script> </body> </html>
также убедитесь, что ваши контроллеры определены в тегах скрипта в нижней части индекса.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>при условии, что все пишется "правильно" (то же самое) на вашем конкретном.html, конкретно.js и приложение.страницы js это должно решить вашу проблему.
случалось со мной несколько раз, когда я пропускал", " между списком инъекций и функцией
app.controller('commonCtrl', ['$scope', '$filter',function($scope,$filter) { }]);
Я также испытал эту ошибку, но в моем случае это было из-за именования контроллера. Я заявил
controller: "QuestionController"на.stateно в определении контроллера я объявил его какyiiExamApp.controller('questionController' ...но он должен быть!--5-->
yiiExamApp.controller('QuestionController' ...надеюсь, что это поможет людям, столкнувшимся с этой ошибкой из-за этой глупой ошибки я потратил 4 часа на ее идентификацию.
Я также столкнулся с этой же ошибкой, и исправление для меня состояло в том, чтобы включить мой дочерний модуль в основной массив модулей.
var myApp = angular.module('myApp', ['ngRoute', 'childModuleName']);
Если все остальное терпит неудачу, и вы работаете локально на среднем стеке, как я с gulp...просто остановитесь и подавайте снова! Я вытаскивал свой слух, тщательно проверяя все от всех ваших сообщений безрезультатно, пока я просто не побежал глоток служить.
Я получил ту же ошибку. Я определил Java-скрипт следующим образом
<script src="controllers/home.js" />затем я перешел на это
<script src="controllers/home.js"></script>после этого проблема будет решена.
Я тоже столкнулся с этой проблемой в моем проекте. Это в конечном итоге сработало после того, как я вставил
my-controller.jsв свою С<script>тег.надеюсь, что это поможет. Существует достаточно много причин, которые могут привести к этой проблеме.
Я также получил эту ошибку.
мне пришлось добавить мой новый контроллер к информации о маршрутизации. \НИЦ\Яш\приложение.js
angular.module('Lillan', [ 'ngRoute', 'mobile-angular-ui', 'Lillan.controllers.Main' ])я добавил свой контроллер, чтобы сделать его похожим
angular.module('Lillan', [ 'ngRoute', 'mobile-angular-ui', 'Lillan.controllers.Main', 'Lillan.controllers.Growth' ])Ура!
очевидно, что предыдущие сообщения полезны, но ни один из них не полезен в моем случае. Причина была в неправильная последовательность загрузки скриптов. Например, в моем случае, контроллер 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>Итак, чтобы исправить ошибку вам понадобится сначала объявите все скрипты без зависимостей, а затем скрипты зависит от ранее заявленного.
попробуй такое
<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>
в моем случае мне не хватало имени углового приложения в html-файле. Например, я включил этот файл, чтобы быть началом моего кода приложения. Я предполагал, что им управляют, но это было не так.
приложение.модуль.js
(function () { 'use strict'; angular .module('app', [ // Other dependencies here... ]) ; })();однако, когда я объявил приложение в html у меня было это:
.HTML-код
<html lang="en" ng-app>но чтобы ссылаться на угловое приложение по имени, которое я использовал, мне пришлось использование:
.html (исправлено)
<html lang="en" ng-app="app">
Я получал ошибку, потому что я добавил сценарий контроллера перед сценарием, где я определил соответствующий модуль в приложении. Сначала добавьте скрипт
<script src = "(path of module.js file)"></script>затем только добавить
<script src = "(path of controller.js file)"></script>в главном файле.
ошибка: ng: areq плохой аргумент меня пару раз, потому что я тоже скоро закроем квадратную скобку. В плохом примере ниже он закрывается неправильно после "$state", когда он должен фактически идти до последней скобки.
плохое:
sampleApp.controller('sampleApp', ['$scope', '$state'], function($scope, $state){ });хорошо:
sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){ }]);
У меня была аналогичная проблема. Исправление было убедиться, что ваши контроллеры не только определены в тегах скрипта в нижней части индекса.html непосредственно перед закрывающим тегом для тела, но также проверяет, что они находятся в порядке, как структурирована ваша папка.
<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>
да. Как многие ранее указывали, Я добавил путь src ко всем файлам контроллера в индексе.формат 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>это исправило эту ошибку.
У меня была та же проблема, но я забыл включить файл в процесс минимизации grunt/gulp.
grunt.initConfig({ uglify: { my_target: { files: { 'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js'] } } } });надеюсь, что это поможет.
в моей ситуации эта ошибка появилась, когда я не объявлял функцию в аргументе массива.
С :
taskAppControllers.controller('MainMenuCtrl', []);фиксированный:
taskAppControllers.controller('MainMenuCtrl', [function(){ }]);
проверить орфографические ошибки.
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>
Проверьте, включает ли Ваша HTML-страница:
angular.minскриптapp.js- контроллер JavaScript page
порядок файлов включены имеет важное значение. Это было мое решение этой проблемы.
надеюсь, что это помогает.