AngularJS error: 'argument 'FirstCtrl' is not a function, got undefined'

I noticed the same question was asked a few times here, I tried so solve it but nothing helps.

I'm following this tutorial with the egghead videos.

But when I get at the section of Controllers and Sharing data between controllers, I can't get it to work.

When I run it with Chrome, I get this error in the console:

'argument 'FirstCtrl' is not a function, got undefined'.

I really don't know what's wrong. The code is the same from in the tutorial.

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

You have 2 unnamed ng-app directives in your html.
Lose the one in your div.

Update
Let's try a different approach.
Define a module in your js file and assign the ng-appdirective to it. After that, define the controller like an ng component, not as a simple function:

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

and the js part:

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

Here's an online demo that is doing just that : http://jsfiddle.net/FssbL/1/

I got exactly the same error message and in my case it turned out i didn't list the controller JS file (e.g. first-ctrl.js) in my index.html

AngularJS error: 'argument 'FirstCtrl' is not a function, got undefined'

Related

Recent Posts