program story

Angularjs : 오류 : [ng : areq] 인수 'HomeController'는 (는) 함수가 아니며 정의되지 않았습니다.

inputbox 2020. 8. 6. 08:18
반응형

Angularjs : 오류 : [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 <-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);

새로운 모듈 / 앱이 생성됩니다 :

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

이미 작성된 모듈에 액세스하는 동안 ( 두 번째 인수 생략 ) :

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

두 스크립트 모두에서 첫 번째 방법을 사용하므로 기본적으로 이전에 만든 모듈을 재정의합니다.

두 번째 스크립트가로드되면을 사용하십시오 var myApp = angular.module('myApp');.

이 오류가 한 번 발생했습니다. 내 문제는 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>

또한 컨트롤러가 body의 닫는 태그 바로 앞에 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 페이지에 모든 내용이 "올바르게"(동일하게) 입력되어 있으면 문제가 해결됩니다.

주사 목록과 기능 사이에 ""가 누락 될 때마다 몇 번이나 발생했습니다.

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

}]);

또한이 오류가 발생했지만 제 경우에는 컨트롤러 이름 지정 규칙 때문이었습니다. 나는 선언 controller: "QuestionController"에 .state있지만 컨트롤러 정의에 나는 그것을 좋아 선언

yiiExamApp.controller('questionController' ...

그러나 그것은해야한다

yiiExamApp.controller('QuestionController' ...

이 바보 같은 실수 때문에이 오류에 직면하는 사람들에게 도움이되기를 바랍니다.

또한이 같은 오류가 발생하여 수정 사항은 기본 모듈 배열에 자식 모듈을 포함시키는 것이 었습니다.

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

ALL ELSE가 실패하고 gulp를 사용하여 나와 같은 MEAN 스택에서 로컬로 실행하는 경우 ... 정지하고 다시 제공하십시오! 나는 단순히 펄프 서빙을 다시 할 때까지 모든 게시물에서 아무 소용이 없는지 세 심하게 확인하는 소리를 들었습니다.

같은 오류가 발생했습니다. 나는 이와 같은 자바 스크립트를 정의했다.

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

그때 나는 이것으로 바꿨다.

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

이 후 내 문제가 해결되었습니다.

비슷한 문제가있었습니다. 수정 사항은 ctroller가 body의 닫는 태그 바로 앞에 index.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>

내 프로젝트 에서도이 문제가 발생했습니다. 나는 삽입 한 후 결국 일 my-controller.js내로 karma.conf.js파일과, <script>태그입니다.

이것이 도움이되기를 바랍니다. 이 문제를 일으킬 수있는 많은 이유가 있습니다.

또한이 오류가 발생했습니다.

라우팅 정보에 새 컨트롤러를 추가해야했습니다. \ 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'
])

건배!

Obviously that previous posts are useful, but any of above are not helpful in my case. The reason was in wrong sequence of loading scripts. For example, in my case, controller editCtrl.js depends on (uses) ui-bootstrap-tpls.js, so it should be loaded first. This caused an error:

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

This is right, works:

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

So, to fix the error you need first declare all scripts without dependencies, and then scripts that depends on previously declared.

Try this

    <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>

In my case, I was missing the name of the Angular application in the html file. For example, I had included this file to be start of my application code. I had assumed it was being ran, but it wasn't.

app.module.js

(function () {
    'use strict';

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

})();

However, when I declared the app in the html I had this:

index.html

<html lang="en" ng-app>

But to reference the Angular application by the name I used, I had to use:

index.html (Fixed)

<html lang="en" ng-app="app">

I was getting the error because i had added the controller script before the script where i had defined the corresponding module in the app. First add the script

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

Then only add

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

In the main file.

Error: ng:areq Bad Argument has gotten me a couple times because I close the square bracket too soon. In the BAD example below it is closed incorrectly after '$state' when it should actually go before the final parenthese.

BAD:

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

});

GOOD:

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

}]);

Yes. As many have previously pointed out, I have added the src path to all the controller files in the 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>

This fixed that error.

I had the same problem, but I forgot to include the file into grunt/gulp minimization process. 

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

Hope that helps.

In my situation this error appeared when I didn't declare function within an array argument.

The one with error:

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

The fixed one:

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

}]);

Also check for spelling mistakes.

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>

Check if your HTML page includes:

  1. angular.min script
  2. app.js
  3. controller JavaScript page

The order the files are included is important. It was my solution to this problem.

Hope this helps.

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

Same thing for me, comma ',' before function helped me in fixing the issue -- Error: ng:areq Bad Argument

My controller file was cached as empty. Clearing the cache fixed it for me.

I accidentally moved my HomeController.js out of the directly, where it was expected. Putting it again on original location.

After that my website started to load pages automatically every second, I was even unable to look at the error. So i cleared the browser cache. It solved the problem

참고URL : https://stackoverflow.com/questions/25895235/angularjs-error-ngareq-argument-homecontroller-is-not-a-function-got-und

반응형

'program story' 카테고리의 다른 글

MKMapView의 확대 / 축소 수준 설정  (0) 2020.08.06
NA의 특정 열을 포함하는 행 생략  (0) 2020.08.06
pydot 및 graphviz 오류 : dot_parser를 가져올 수 없습니다. 도트 파일을로드 할 수 없습니다  (0) 2020.08.06
패브릭 파일에서 대상 호스트를 설정하는 방법  (0) 2020.08.06
R 산점도에서 점의 크기를 제어 하시겠습니까?  (0) 2020.08.05

'program story'의 다른글

  • 현재글Angularjs : 오류 : [ng : areq] 인수 'HomeController'는 (는) 함수가 아니며 정의되지 않았습니다.

관련글

댓글

티스토리툴바