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

96

votes

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

javascriptangularjs

Here is the solution in the second comments - stackoverflow.com/questions/24894870/… – Kanchan

109

votes

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/

97

votes

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

9

votes

I just did this tutorial and followed @gion_13 answer. Still did not work. Solved it by making my ng-app name in the index identical to the one in my js file. Exactly identical, even the quotes. So:

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

and the js:

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

Weird how the ng-app has to be identical but the ng-controller doesn't.

7

votes

You must name your ng-app, giving your app a namespace; simply using ng-app is not enough.

Instead of:

<html ng-app>
...

You will need something like this instead:

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

Then, like so:

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

6

votes

Another nice one: Accidentally redefining modules. I copy/pasted stuff a little too eagerly earlier today and ended up having a module definition somewhere, that I overrode with my controller definitions:

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

Then in my definitions, I was supposed to reference it like so:

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

What I did instead, was:

// 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() { /* ... */ });

Note the extra bracket in the call to angular.module.

3

votes

remove ng-app="" from

<div ng-app="">

and simply make it

<div>

1

votes

Me too faced the same issue. But the problem was I forgot to list the module in the list of modules the ng-app depends on.

1

votes

I have faced this issue and it fixed with following way:

first remove ng-app from:
```
<html ng-app>
```
add name of ng-app to myApp:
```
<div ng-app="myApp">
```

add this line of code before function:

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

final look of script:

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

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

1

votes

In my case, this message comes from forgotten dependency injection in main module

1

votes

This can happen if you have gulp misconfigured to add your angular app code more than once. In my case, this was in index.js, and it was adding it as part of the directory of js files (globbed in gulp) before and after my controller declarations. Once I added an exclusion for index.js not to be minified and injected the second time, my app began to work. Another tip if any of the solutions above don't address your problem.

1

votes

Firstly - If the module name is not defined, in the JS you will not be able to access the module and link the controller to it.

You need to provide the module name to angular module. there is a difference in using defining module as well 1. angular.module("firstModule",[]) 2. angular.module("firstModule")

1 - one is to declare the new module "firstModule" with no dependency added in second arguments. 2 - This is to use the "firstModule" which is initialized somewhere else and you're using trying to get the initialized module and make modification to it.

0

votes

i faced this issue but i was able to correct this issue by renaming the controller, please have a try on it.

ctrlSub.execSummaryDocuments = function(){};

0

votes

sometimes something wrong in the syntax of the code inside the function throws this error. Check your function correctly. In my case it happened when I was trying to assign Json fields with values and was using colon : to make the assignment instead of equal sign = ...

0

votes

I had two controllers with the same name defined in two different javascript files. Irritating that angular can't give a clearer error message indicating a namespace conflict.

0

votes

I am not sure about this tutorial but I had the same problem when I forgot to include the file into grunt/gulp minimization process.

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

Hope that helps.

0

votes

Watch your letter casing too. I spent a good hour chasing this bug.

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

while I name the controller

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

They all should be consistently named, in this case ForgotpwdController with lower case p.

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

16 Answers