AngularJS Error: Argument 'FirstCtrl' is not a function, got undefined

Question

I am currently doing the egghead.io AngularJS course and have run into an issue a few others seem to have. Any solutions I have come across here aren't working for me though. In the second video the instructor is showing how to connect controllers to ng-apps. I have followed the video exactly, restarted a few times, and tried solutions on here. I am given the following error console:

In the long list of errors there, I have picked out the first as as saying:

"FirstCtrl' is not a function, got undefined"

Anyone know of a solution? Was something changed in the Angular spec in regards to assigning controllers, or is this course skipping information?

Code:

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>My Angular App</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>

<body>
  <div ng-app="">
    <div ng-controller="FirstCtrl">
      <h1>You said:</h1>
      <h3>{{data.message}}</h3>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>

</html>

Hey Marc - looks like you don't really have a controller set up yet - just a function. Check out this page to see how you would add a controller to your angular app: docs.angularjs.org/guide/controller — IfTrue
– IfTrue, Commented Sep 15, 2015 at 15:28
Did you declare your module and put your controller there somewhere? — fasfsfgs
– fasfsfgs, Commented Sep 15, 2015 at 15:28
As far as I know app.controller(); is used instead of function firstctrl(). — razorranjan
– razorranjan, Commented Sep 15, 2015 at 15:28
possible duplicate of angular how to define multiple controllers — IfTrue
– IfTrue, Commented Sep 15, 2015 at 15:32

Moncef Hassein-bey · Accepted Answer · 2015-09-15 15:49:41Z

1

Here is your exemple working (Run the exemple ...).

Add you app name.
Declare your controller using angular.controller.

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

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

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>My Angular App</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>

<body>
  <div ng-app="myApp">
    <div ng-controller="FirstCtrl">
      <h1>You said:</h1>
      <h3>{{data.message}}</h3>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>

</html>

answered Sep 15, 2015 at 15:49

Moncef Hassein-bey

1,3619 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lauromine · Accepted Answer · 2015-09-15 15:30:47Z

0

An Angular controller is defined like this :

var app = angular.module('myApp',[]); //Your app

//The controller in the myApp module, first param is the controller's name
//Second is the controller's dependencies
app.controller('FirstCtrl', ['$scope', function($scope) {
    //Do whatever you want in this controller
    $scope.data.message = 'Hello!';
}]);

Then you bind your controller to the view (your HTML) using the ng-controller attribute.

answered Sep 15, 2015 at 15:30

Lauromine

1,48310 silver badges19 bronze badges

Comments

jsuser · Accepted Answer · 2015-09-15 15:43:29Z

0

You're missing the part where you define your controller.

You can definitely have your FirstCtrl be a function. You just need to first define that the FirstCtrl is a controller.

Example:

angular.module("app").controller("FirstCtrl", FirstCtrl);

And then you have your FirstCtrl function:

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

You also need to include that file in your html scripts

<script src="mypath/firstctrl.js"></script>

answered Sep 15, 2015 at 15:43

jsuser

4114 silver badges10 bronze badges

Comments

luchaninov · Accepted Answer · 2016-05-27 20:06:23Z

0

I too was facing problem when defined controller just like a simple JavaScript function and then I downgraded the cdn link version for angular from "1.4.5" to "1.2.28" and it started recognising controller (A simple javascript function). Also you have to include the .js file in which you have created your controller in your html file . Actually they have deprecated the use of simple javascript function as a controller from angular 1.3 version.

edited May 27, 2016 at 20:06

luchaninov

6,8556 gold badges64 silver badges77 bronze badges

answered Mar 13, 2016 at 12:38

Nitish Kesarwani

11 bronze badge

Collectives™ on Stack Overflow

AngularJS Error: Argument 'FirstCtrl' is not a function, got undefined

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related