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

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

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

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

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이 의존하는 모듈 목록에 모듈을 나열하는 것을 잊었다는 것입니다.

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

1. 먼저 ng-app을 다음에서 제거하십시오.

   <html ng-app>

2. myApp에 ng-app 이름 추가 :

   <div ng-app="myApp">

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

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

스크립트의 최종 모습 :

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

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

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

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

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

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

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

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

ctrlSub.execSummaryDocuments = function(){};

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

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

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

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

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

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

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

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

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

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