[javascript] AngularJS 오류 : ‘인수’FirstCtrl ‘은 함수가 아니므로 정의되지 않았습니다.’

Program / 글쓴이

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

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

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

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" };
}

답변

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/

답변

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

답변

방금이 튜토리얼을 수행하고 @ 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"};
  });

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

답변

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

대신에:

<html ng-app>
...

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

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

그런 다음 이렇게 :

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

답변

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

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

답변

ng-app = “”제거

<div ng-app="">

그리고 간단하게

<div>

답변

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