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" };
}
This question is related to
javascript
angularjs
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){});
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"};
}
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.
In my case, this message comes from forgotten dependency injection in main module
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.
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.
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.
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.
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(){};
remove ng-app="" from
<div ng-app="">
and simply make it
<div>
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.
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.
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 = ...
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
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.
Source: Stackoverflow.com