AngularJS 오류 : '인수'FirstCtrl '은 함수가 아니므로 정의되지 않았습니다.'

93

여기에서 몇 번 같은 질문을 받았는데, 그래서 해결하려고했지만 도움이되지 않았습니다.

저는이 튜토리얼을 지식인 비디오와 함께 따르고 있습니다.

그러나 컨트롤러 및 컨트롤러 간 데이터 공유 섹션에 도달하면 작동하지 않습니다.

Chrome으로 실행할 때 콘솔에 다음 오류가 표시됩니다.

'인수'FirstCtrl '은 함수가 아니므로 정의되지 않았습니다.'

나는 정말로 무엇이 잘못되었는지 모른다. 코드는 튜토리얼과 동일합니다.

HTML

<!DOCTYPE html>
<html ng-app>
 <head>
    <title>AngularJS Tutorials: Controllers</title>
    <link rel="stylesheet" href="mystyle.css">
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
 </head>
 <body>
    <div ng-app="">
       <div ng-controller="FirstCtrl">   
           <h1> {{data.message + " world"}}</h1>

           <div class="{{data.message}}">
               Wrap me in a foundation component
           </div>
       </div>
    </div>
    <script type="text/javascript" src="main.js"></script>
 </body>
</html>

main.js

function FirstCtrl($scope){
   $scope.data = { message: "Hello" };
}

javascript angularjs

— 품바
소스

여기에 두 번째 의견의 솔루션입니다 - stackoverflow.com/questions/24894870/...

— 칸찬

108

ng-apphtml에 2 개의 이름없는 지시문이 있습니다.
당신의 사업부에서 하나를 잃으십시오.

업데이트
다른 접근 방식을 시도해 보겠습니다.
js 파일에 모듈을 정의하고 ng-app지시문을 할당하십시오 . 그런 다음 컨트롤러를 간단한 함수가 아닌 ng 구성 요소처럼 정의하십시오.

<div ng-app="myAppName">  
<!-- or what's the root node of your angular app -->

그리고 js 부분 :

angular.module('myAppName', [])
    .controller('FirstCtrl', function($scope) {
         $scope.data = {message: 'Hello'};
    });

다음은이를 수행하는 온라인 데모입니다. http://jsfiddle.net/FssbL/1/

— gion_13
소스

답변 주셔서 감사합니다. 슬프게도 여전히 동일한 오류가 발생합니다. div에서 ng-app = ""를 잃어 버렸지 만 여전히 작동하지 않습니다.

— Pumba

1

도와 주셔서 정말 감사합니다! 더 이상 이해가되지 않습니다. 여기와 온라인 데모에서 보여준 것과 똑같은 작업을 수행했지만 여전히 'FirstCtrl'이 정의되지 않았다고 표시됩니다. 처음부터 다시 시도해 보겠습니다. 다음 튜토리얼에서 동일한 문제가 발생하기 때문에 제대로 작동하기를 바랍니다.

— Pumba

큰!! 효과가있다. js 파일의 스크립트 태그에서 유형 속성을 닫는 것을 잊었습니다. 두 번째 솔루션과 결합하여 작동했습니다! :)) 정말 감사합니다

— 품바

6

데모 비디오는 모듈 내에서 컨트롤러를 감싸지 않습니다. 그렇다면 왜 그에게 효과가 있지만 나는 그렇지 않습니까? egghead.io/lessons/angularjs-controllers

— Demodave dec. 2014

2

@Demodave, 같은 질문이 있습니다. 비디오가 AngularJS의 이전 버전에서 녹화 되었기 때문에 컨트롤러를 정의하는 것이 잠재적으로 덜 엄격하다고 가정합니다 (하지만 내 가정에 불과합니다. 누군가 확인하거나 거부하면 기뻐할 것입니다)

— MandM

93

정확히 똑같은 오류 메시지가 나타 났고 제 경우에는 index.html에 컨트롤러 JS 파일 (예 : first-ctrl.js)을 나열하지 않은 것으로 나타났습니다.

— 마리우스
소스

1

컨트롤러 js 파일을 나열하지 않았다는 것은 무엇을 의미합니까? 당신이 그것을 포함하지 않았다는 말입니까?

— Demodave

@DavidStone 예-그 당시 제 경우였습니다.

— Mariusz

또 다른 멍청한 오류 : 컨트롤러의 루즈 괄호 등으로 인해 동일한 유형의 오류가 콘솔에 표시 될 수 있습니다.

— user2938649

9

방금이 튜토리얼을 수행하고 @ gion_13 답변을 따랐습니다. 여전히 작동하지 않았습니다. 색인의 내 ng-app 이름을 내 js 파일의 이름과 동일하게 만들어 해결했습니다 . 따옴표조차 정확히 동일합니다. 그래서:

<div ng-app="myapp">
    <div ng-controller="FirstCtrl">

그리고 js :

 angular.module("myapp", [])
.controller('FirstCtrl',function($scope) {
    $scope.data= {message:"hello"};
  });

이상한은 어떻게 겨 - 응용 프로그램은 동일해야하지만 겨 컨트롤러는 하지 않습니다.

— an1waukoni
소스

발로 시간이 비용 나에게 (감사 마지막으로 도와 저를 알아낼.

— Dowlers

7

당신은 당신의 이름을 지정해야합니다ng-app 앱을 제공하는 네임 스페이스를; 단순히 사용하는 것만으로 ng-app 는 충분하지 않습니다 .

대신에:

<html ng-app>
...

대신 다음과 같은 것이 필요합니다.

<html ng-app="app">
...

그런 다음 이렇게 :

var app = angular.module("app", []).controller("ActionsController", function($scope){});

— user1429980
소스

5

또 다른 좋은 점은 실수로 모듈을 재정의하는 것입니다. 오늘 초 너무 열심히 복사 / 붙여 넣기를했는데 어딘가에 모듈 정의가 생겼고, 컨트롤러 정의를 덮어 썼습니다.

// controllers.js - dependencies in one place, perfectly fine
angular.module('my.controllers', [/* dependencies */]);

그런 다음 내 정의에서 다음과 같이 참조해야했습니다.

// SomeCtrl.js - grab the module, add the controller
angular.module('my.controllers')
 .controller('SomeCtrl', function() { /* ... */ });

대신 내가 한 일은 다음과 같습니다.

// Do not try this at home!

// SomeCtrl.js
angular.module('my.controllers', []) // <-- redefined module, no harm done yet
  .controller('SomeCtrl', function() { /* ... */ });

// SomeOtherCtrl.js
angular.module('my.controllers', []) // <-- redefined module - SomeCtrl no longer accessible
  .controller('SomeOtherCtrl', function() { /* ... */ });

에 대한 호출에서 추가 대괄호를 확인합니다 angular.module.

— 마이클 제스
소스

3

ng-app = ""제거

<div ng-app="">

그리고 간단하게

<div>

— 존 스미스
소스

3

앱 구성에서 라우팅을 사용하는 경우 html에서 ng-controller를 사용하지 마십시오. 대신 ng-view가 있어야합니다. 컨트롤러는 일반적으로 라우팅의보기와 함께 정의됩니다.

— Marc

1

저도 같은 문제에 직면했습니다. 하지만 문제는 ng-app이 의존하는 모듈 목록에 모듈을 나열하는 것을 잊었다는 것입니다.

3

이것은 답변이 아니라 의견이어야합니다.

— 앤소니 페로

1

이 문제에 직면했으며 다음과 같은 방법으로 해결되었습니다.

먼저 ng-app을 다음에서 제거하십시오.
```
<html ng-app>
```
myApp에 ng-app 이름 추가 :
```
<div ng-app="myApp">
```

함수 앞에 다음 코드 줄을 추가하십시오.

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

스크립트의 최종 모습 :

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

function FirstCtrl($scope){
    $scope.data = {message: "Hello"};
}

— Azhar
소스

1

제 경우이 메시지는 메인 모듈에서 잊혀진 의존성 주입에서 비롯됩니다.

— 토마스 고 버트
소스

1

이는 각도 앱 코드를 두 번 이상 추가하도록 잘못 구성한 경우 발생할 수 있습니다. 필자의 경우 이것은 index.js에 있었고 컨트롤러 선언 전후에 js 파일 디렉토리의 일부로 추가했습니다 (gulp로 표시됨). index.js가 축소되지 않고 두 번째로 주입되지 않도록 제외를 추가하면 앱이 작동하기 시작했습니다. 위의 해결 방법 중 하나라도 문제를 해결하지 못하는 경우 또 다른 팁입니다.

— rncrtr
소스

1

첫째-모듈 이름이 정의되어 있지 않으면 JS에서 모듈에 액세스하고 컨트롤러를 연결할 수 없습니다.

앵귤러 모듈에 모듈 이름을 제공해야합니다. 정의 모듈을 사용하는 것에도 차이가 있습니다. 1. angular.module ( "firstModule", []) 2. angular.module ( "firstModule")

1-하나는 두 번째 인수에 추가 된 종속성없이 새 모듈 "firstModule"을 선언하는 것입니다. 2-다른 곳에서 초기화 된 "firstModule"을 사용하고 초기화 된 모듈을 가져 와서 수정하려고합니다.

— 에샨 쿠마르
소스

0

이 문제에 직면했지만 컨트롤러 이름을 변경하여이 문제를 해결할 수있었습니다. 시도해보십시오.

ctrlSub.execSummaryDocuments = function(){};

— 아마이 쿨 카르 니
소스

0

때때로 함수 내부의 코드 구문에 문제가 있으면이 오류가 발생합니다. 기능을 올바르게 확인하십시오. 제 경우에는 Json 필드에 값을 할당하려고 할 때 콜론을 사용하여 등호 = 대신 할당을 만들 때 발생했습니다.

— 아미 테시 란잔
소스

0

두 개의 다른 자바 스크립트 파일에 동일한 이름을 가진 두 개의 컨트롤러가 정의되어 있습니다. 해당 각도를 자극하면 네임 스페이스 충돌을 나타내는 명확한 오류 메시지를 제공 할 수 없습니다.

— 가장 큰
소스

0

이 튜토리얼에 대해 잘 모르겠지만 파일을 grunt / gulp 최소화 프로세스에 포함하는 것을 잊었을 때 동일한 문제가 발생했습니다.

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

도움이 되었기를 바랍니다.

— 파트릭 베고
소스

0

편지 케이스도 조심하세요. 이 버그를 쫓는 데 좋은 시간을 보냈습니다.

<section id="forgotpwd" ng-controller="ForgotPwdController">

컨트롤러 이름을 지정하는 동안

angular
    .module('app')
    .controller('ForgotpwdController', ForgotpwdController);

모두 일관되게 이름을 지정해야합니다.이 경우 소문자 p를 사용하는 p wdController를 잊어 버렸습니다 .

— 제손 마르타 자야
소스