Question

92

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

rated 0 times [ 97] [ 5] / answers: 1 / hits: 176717 / 11 Years ago, wed, october 16, 2013, 12:00:00

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

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

randall

Add To Favorites

Follow

Total Points: 492

Total Questions: 99

Total Answers: 103

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

randall questions

1 Cannot create sitemaps on nextjs with next-sitemap

Wed, Mar 16, 22, 00:00, 2 Years ago

1 React Material-UI Select using an array of objects as the source

Mon, Mar 29, 21, 00:00, 3 Years ago

1 How to chain cy.get in cypress

Tue, Nov 10, 20, 00:00, 4 Years ago

1 Vue Composition API: Is there a better way in calling `emit` inside consumable file?

Mon, Nov 9, 20, 00:00, 4 Years ago

1 Router view on Vue 3 doesn't catch event from child

Sat, Oct 31, 20, 00:00, 4 Years ago

View All

answered 11 Years ago ninaemiliaj · Accepted Answer

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/